18
\$\begingroup\$

Introduction

On 30 May 2020, NASA and SpaceX launched a crewed rocket to the international space station on the SpaceX Demo 2 mission. This is the first time humans have been launched into orbit from American soil since the retiring of the Space Shuttle in 2011, and the first time ever that a private company has launched astronauts into orbit. The rocket bore the iconic NASA worm logo, the first time this logo has been used since 1992. Let's celebrate NASA and SpaceX's achievement by drawing the worm logo.

I looked on the internet for a specification of this logo. The best I could find was on Reddit. However there are a number of issues with this version. For example the thickness of vertical and curved lines is defined as 1 but for horizontal lines it is 0.95 and there is no specification of how to transition between the two thicknesses.

Challenge

Draw the simplified version of the NASA worm logo defined in the SVG below.

Some notes on the design:

  • All parts of the worm are 100 units wide.
  • All diagonal lines have a slope of 24/7. This takes advantage of the pythagorean triple 24^2 + 7^2 = 25^2 to ensure accurate and consistent positions of the thickness of the worm and the beginnings and endings of arcs while using only integer coordinates.
  • As the vertical height of the arms of the A's are not multiples of 24, the x coordinates of the bottoms of the A are not integers, but they are integer multiples of 1/6.
  • The S is 500 units high, from y=100 to y=600. The curved parts of the S have internal and external radii of 50 and 150.
  • The internal and internal radii of the curved parts of the N and A's are 25 and 125. The y coordinates of the centres of these arcs are y=215 and y=485. This means that the tops and bottoms of the arcs extend above and below the top and bottom of the S, specifically to y=90 and y=610. This is similar to the official logo.
  • The ends of the N terminate at y=100 and y=600. Similarly, the ends of the A's terminate at y=600.
  • There is an overlap region between the first A and the S. The length of the upper and lower arms of the S is chosen to be 231.67 units so that this overlap region is triangular. The top of the lower arm of the S meets the A at 1043.33,600
  • In addition to the SVG script, A PNG image (not perfectly to scale) is given with annotations of the coordinates of all parts of the logo: all four coordinates of each straight section and the centre and radius of each curved section. Note that because of the way SVG defines arcs, the coordinates of the centres of the curved sections do not appear in the SVG script. Curved sections are shown in black and straight sections are shown in red, with the exception of the lower arm of the S, which is shown in blue to distinguish it from the part of the A which it overlaps.

PNG

enter image description here

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewbox=0,0,2000,700>

<path fill="red" d="M110,600 L110,215 A125,125,0,0,1,355,180 L446,492 A25,25,0,0,0,495,485 L495,100 L595,100 L595,485 A125,125,0,0,1,350,520 L259,208 A25,25,0,0,0,210,215 L210,600"/>
  
<path fill="red" d="M587.5,600 L710,180 A125,125,0,0,1,950,180 L1072.5,600 L968.33,600 L854,208 A25,25,0,0,0,806,208 L691.67,600" />
  
<path fill="red" d="M1043.33,500 L1275,500 A50,50,0,0,0,1275,400 L1175,400 A150,150,0,0,1,1175,100 L1406.67,100 L1406.67,200 L1175,200 A50,50,0,0,0,1175,300 L1275,300 A150,150,0,0,1,1275,600 L1043.33,600"/> 
  
<path fill="red" d="M1407.5,600 L1530,180 A125,125,0,0,1,1770,180 L1892.5,600 L1788.33,600 L1674,208 A25,25,0,0,0,1626,208 L1511.67,600" />
 
</svg>

Rules

The logo shall be in a single arbitrary colour on a distinctly coloured background.

The accuracy of the logo shall be within +/- 2 units of the specification given in this question.

It is not essential to use the coordinate system used in the specification given in this question. The logo may be rescaled, and different amounts of whitespace may be added above, below, left and right, so long as the logo can be visualized easily with free and easily available software. The logo may not be rotated.

The logo may be drawn filled, or as an outline. The first A and the S overlap slightly. If drawn as an outline, it is preferred that the lines at the overlap of these two letters are omitted, so that the A and S form a single continuous outline. It is however permitted to include the complete outline of the A and/or the complete outline of the S, with the shape specified in the PNG and SVG in the question. No other extraneous lines are permitted.

Any pre-existing graphics format is acceptable provided it can be viewed with free and easily available software. Any means of output accepted by standard rules on this site is acceptable, inlcuding viewing on the screen, output to a file, or (if applicable) as a returned value from a function call. Please Include instructions on how to view your output in your answer. Your program or function should take no input.

It is not acceptable to use a font with letters of the correct or similar shape to print "NASA", with or without modification. (In practice this is unlikely to be an issue, because although there are similar fonts, I think it's very unlikely that the letters match the proportions specified in this question.)

This is codegolf. Shortest code wins.

\$\endgroup\$
4
  • \$\begingroup\$ Looking at the NASA Graphics Standards Manual, their main advice is that "the NASA logotype should be reproduced photographically whenever possible." They do provide a large version against a grid on p. 1.7, but leave out any numbers, if they exist. \$\endgroup\$ Jun 8, 2020 at 3:09
  • \$\begingroup\$ @LegionMammal978 despite its modern look this logo was designed in the 70's when there was very little in the way of electronic reproduction. I'm familiar with that manual, and I think some of the curves (especially on the N) aren't simple radii. That's why I did my own simplified design, based loosely on the Reddit construction. There's a precedent for this type of simplification on this site. For example there was a question on the google "G" (single character, multicolour) logo that was simplified to make it easier to specify and to golf. \$\endgroup\$ Jun 8, 2020 at 3:17
  • \$\begingroup\$ Does a program which just prints "NASA" qualify, assuming an appropriate font has been installed? (Not that I know of such a font.) \$\endgroup\$
    – Abigail
    Jun 8, 2020 at 8:57
  • \$\begingroup\$ @Abigail that's an interesting point and there is a font called Nasalization based on the NASA logo, but I don't think it matters because the shape of the letters will almost certainly be out of spec (as will the spacing.) In any case thanks fo bringing it up. I'm going to say no, you can't use such a font. \$\endgroup\$ Jun 8, 2020 at 9:04

6 Answers 6

10
\$\begingroup\$

SVG (HTML 5), 370 bytes

<svg viewbox=0,0,240,64 fill=none stroke=red stroke-width=12.5><path d=M82,62V11M180.4,62V11 transform=skewX(-17) /><path d=M90.8,62V11M189.2,62V11 transform=skewX(17) /><path stroke-width=12 d=M6,62V15.8A9,9,0,0,1,23.6,13.3L34.6,50.7A9,9,0,0,0,52.2,48.2V2M78,13.3a9,9,0,0,1,16.8,0M112,56H139.8a12,12,0,0,0,0,-24h-12A12,12,0,0,1,127.8,8H155.6M176.4,13.3a9,9,0,0,1,16.8,0

Based on my optimised answer, but drawing the logo as a stroked path rather than an outline, which takes a few more bytes to set up but requires fewer drawing operations. Edit: Original version was clipped incorrectly. Hopefully this one is nearer to the original.

\$\endgroup\$
6
  • 1
    \$\begingroup\$ @Arnauld I originally used square line caps but when I tweaked the answer to use the default butt line caps I forgot to adjust the S. Should be fixed now. \$\endgroup\$
    – Neil
    Jun 7, 2020 at 19:51
  • \$\begingroup\$ @LevelRiverSt I'd tried to convert some absolute coordinates to relative coordinates in my other answer and got one of my sums wrong, which then also threw off this answer. Should be fixed now. \$\endgroup\$
    – Neil
    Jun 7, 2020 at 20:03
  • \$\begingroup\$ Here's a path per the original spec at the original scale and coordinates (correct except the bottoms of the A's are sloped) stroke-width="100" d="M160,600 V215 A75,75,0,0,1,307,194 L398,506 A75,75,0,0,0,545,485 V100 M639.58,600 L758,194 A75,75,0,0,1,902,194 L1020.42,600 M1043.33,550 L1275,550 A100,100,0,0,0,1275,350 L1175,350 A100,100,0,0,1,1175,150 L1406.67,150M1459.58,600 L1578,194 A75,75,0,0,1,1722,194 L1840.42,600" If you want to copy this, note that stack exchange inserts special characters at new lines in comments so you may have to remove them. \$\endgroup\$ Jun 8, 2020 at 0:43
  • 1
    \$\begingroup\$ I did a transform=scale(8.333333 8.333333) translate(13.2,12) on your answer and overlaid it on my original SVG. some of your Y coordinates are a little off. Per the question the curves of the N and A's are supposed to extend 10 units above and below the S. You have the the top curve of the N starting and finishing 10 units lower than it should be and the bottom 10 units higher. The curves of your A's start and end at Y=196.666 instead of 194. That's out by 2.666 so nearly within tolerance, but the tops are clipping on the bounding box, which should be expanded upwards to make space for them \$\endgroup\$ Jun 8, 2020 at 0:58
  • \$\begingroup\$ The bottom of the bounding box should be expanded downwards to make space for the curve of the revised N. Unfortunately this means the bottom of the A's should be clipped in a different way. Your X coordinates are good though. The tops of the A's are exactly at +/- 2 units (per original scale) tolerance. I didn't check the bottoms of the A's but everything else is good. \$\endgroup\$ Jun 8, 2020 at 1:00
5
\$\begingroup\$

HTML / JS, 406 bytes

A RegPack'ed version of the reference SVG with slightly rounded values and uppercase keywords so that the full range [Y-k] is available for compression.

<script>for(_='5,k00jjLi9k1i5h9k485gi1f1f407,e15d7kc0,bbbab180`jA5b5aa1_,6^,208]jAdbdab1,1[A2k2kabZA12k12ka1,Y<SVG VIEWBOX=a2jb7j><PATH D=M110^f1b2dY35k180L446,492Z4gL4hhgY35b520L259]Z21b2dL210^jM587^i71`Y95`L1072^i968^i854]Z806]L692^jM1043,5f2c5_2c4f1c4[1cee2f1c2_1c3f2c3[275^f043^jM1407^id3`Y177`L1892^f788^f674]Z1626]Ld12^j>';G=/[Y-k]/.exec(_);)with(_.split(G))_=join(shift());document.write(_)</script>

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Huh, I never knew JavaScript had a with statement \$\endgroup\$ Jun 8, 2020 at 13:10
3
\$\begingroup\$

Wolfram Language (Mathematica), 342 bytes

a=#~Partition~2&;b=ToCharacterCode;c=Disk;d=Pi/2;e=ArcTan[24/7];Graphics[Thread/@{Cuboid@@@a[2a@b@"ê?êįĦHș?ʾʂ·ʾ{ʂį̍ó"],Parallelogram[a@b@"ĦfɃЌ؛ߤ",a@a@b@"ĒȭĒĨʍĒʍĒĨʍĒʍ"-149],c[f=6a@b@"NINĵN",150,{{d-e,2d},{-d-e,0},g={d-e,d+e},g}],c[h=6a@b@"êÖG",180,a@{-d,d,d,3d}],White,f~c~30,h~c~60}]&

Pure function. Takes no input and returns a Graphics object as output. In a Mathematica notebook, the output is automatically rendered to the screen. It can be seen in this Wolfram Cloud notebook; a screenshot is shown below.

Some 1-pixel gaps may be visible, but those are just artifacts of the vector graphics. Also, several unprintable characters are used for compression, so here's a UTF-8 hexdump:

00000000: 613d 237e 5061 7274 6974 696f 6e7e 3226  a=#~Partition~2&
00000010: 3b62 3d54 6f43 6861 7261 6374 6572 436f  ;b=ToCharacterCo
00000020: 6465 3b63 3d44 6973 6b3b 643d 5069 2f32  de;c=Disk;d=Pi/2
00000030: 3b65 3d41 7263 5461 6e5b 3234 2f37 5d3b  ;e=ArcTan[24/7];
00000040: 4772 6170 6869 6373 5b54 6872 6561 642f  Graphics[Thread/
00000050: 407b 4375 626f 6964 4040 4061 5b32 6140  @{Cuboid@@@a[2a@
00000060: 6240 2203 c3aa 3f03 c3aa c4af c4a6 48c8  b@"...?.......H.
00000070: 993f cabe 03ca 82c2 b7ca be7b ca82 c4af  .?.........{....
00000080: cc8d c3b3 225d 2c50 6172 616c 6c65 6c6f  ...."],Parallelo
00000090: 6772 616d 5b61 4062 4022 c4a6 66c9 8306  gram[a@b@"..f...
000000a0: d08c 06d8 9b06 dfa4 0622 2c61 4061 4062  .........",a@a@b
000000b0: 4022 c492 c295 1ec8 adc4 92c2 95c4 a8ca  @"..............
000000c0: 8dc4 92c2 9502 ca8d c492 c295 c4a8 ca8d  ................
000000d0: c492 c295 02ca 8d22 2d31 3439 5d2c 635b  ......."-149],c[
000000e0: 663d 3661 4062 4022 1a4e 4918 c291 4ec4  f=6a@b@".NI...N.
000000f0: b54e 222c 3135 302c 7b7b 642d 652c 3264  .N",150,{{d-e,2d
00000100: 7d2c 7b2d 642d 652c 307d 2c67 3d7b 642d  },{-d-e,0},g={d-
00000110: 652c 642b 657d 2c67 7d5d 2c63 5b68 3d36  e,d+e},g}],c[h=6
00000120: 6140 6240 22c3 aa1f c396 4722 2c31 3830  a@b@".....G",180
00000130: 2c61 407b 2d64 2c64 2c64 2c33 647d 5d2c  ,a@{-d,d,d,3d}],
00000140: 5768 6974 652c 667e 637e 3330 2c68 7e63  White,f~c~30,h~c
00000150: 7e36 307d 5d26                           ~60}]&
\$\endgroup\$
5
  • \$\begingroup\$ Congratulations on the first non-SVG answer. The 1-pixel gaps seem to appear / disappear depending on zoom level (but for some reason Chrome will only let me change the zoom a couple of times, then refuses to respond.) The shape looks right but I'm not sure how to go about checking it. \$\endgroup\$ Jun 9, 2020 at 8:32
  • \$\begingroup\$ Here's the list of graphics primitives: Axis-aligned rectangles (corner, corner): (6, 468), (126, 6); (468, 606), (588, 144); (1074, 126), (1404, 6); (1284, 366), (1404, 246); (1284, 606), (1562, 486). Parallelograms (corner, displacement, displacement): (294, 102), (125, 0), (-119, 408); (579, 6), (125, 0), (147, 504); (1036, 6), (125, 0), (-147, 504); (1563, 6), (125, 0), (147, 504); (2020, 6), (125, 0), (-147, 504)... \$\endgroup\$ Jun 9, 2020 at 13:33
  • \$\begingroup\$ Black disks (center, radius, start angle, stop angle; α = arctan(24/7)): (156, 468), 150, π/2 - α, π; (438, 144), 150, -π/2 - α, 0; (870, 468), 150, π/2 - α, π/2 + α; (1854, 468), 150, π/2 - α, π/2 + α; (1404, 186), 180, -π/2, π/2; (1284, 426), 180, π/2, 3π/2. White disks (center, radius): (156, 468), 30; (438, 144), 30; (870, 468), 30; (1854, 468), 30; (1404, 186), 60; (1284, 426), 60... \$\endgroup\$ Jun 9, 2020 at 13:33
  • \$\begingroup\$ @LevelRiverSt A displacement of (6, 6) in my coordinate system corresponds to a displacement of (5, -5) in your coordinate system. The origin (0, 0) of my coordinate system corresponds to the point (80, 630) in your coordinate system. \$\endgroup\$ Jun 9, 2020 at 13:41
  • \$\begingroup\$ The dimensions all seem correct, but your origin actually appears to correspond to (105,605) in my coordinate system, for example (6,468) -> (105+6/1.2,605-468/1.2) = (110,215). This is the shortest answer so far. I'll wait at least a week more before accepting \$\endgroup\$ Jun 9, 2020 at 18:19
2
\$\begingroup\$

PostScript, 325 bytes

Code (compressed version):

<</M{moveto}/L{lineto}>>begin 20 setlinewidth 0 50 translate 32 0 M 47 77 15 180 16.3 arcn 94 23 15 196.3 0 arc 109 100 L 126.4 -4.8 M 166 77 15 163.7 16.3 arcn 201.2 10 L 255 30 20 -90 90 arc 235 70 20 -90 90 arcn 281.4 90 L 290.6 -4.8 M 330 77 15 163.7 16.3 arcn 369.4 -4.8 L stroke 1 setgray 110 0 280 -9 rectfill showpage

Code (uncompressed version):

% define some short-named procedures for later use
<<
  /M {moveto}
  /L {lineto}
>> begin

% to get shorter code we use stroke (with a big linewidth) instead of fill
20 setlinewidth

0 50 translate  %  we need some empty space at the bottom

% draw N
32 0 M
47 77 15 180 16.3 arcn
94 23 15 196.3 0 arc
109 100 L

% draw A
126.4 -4.8 M   % descender will be cut off later
166 77 15 163.7 16.3 arcn
201.2 10 L

% draw S
 % no moveto here, so we get a connected line 
255 30 20 -90 90 arc
235 70 20 -90 90 arcn
281.4 90 L

% draw A
290.6 -4.8 M   % descender will be cut off later
330 77 15 163.7 16.3 arcn
369.4 -4.8 L   % descender will be cut off later

stroke

1 setgray  % white
110 0 280 -9 rectfill  % overwrite the excess bottoms of A

showpage

Result:

screenshot

\$\endgroup\$
2
\$\begingroup\$

PostScript, 259 249 bytes

[/M{moveto}/L{lineto}/a{arcn}/m{77 15 163.7 16.3 a}/c{20 -90 90}>>begin
20 setlinewidth
32 0 M 47 77 15 180 16.3 a 94 23 15 196.3 0 arc 109 100 L
126.4 -4.8 M 166 m 201.2 10 L 255 30 c arc 235 70 c a 281.4 90 L
290.6 -4.8 M 330 m 369.4 -4.8 L
stroke

A shortened version of Thomas Fritsch's answer with more defs to save bytes, and flush with the bottom of the page so the final crop could be removed without changing the appearance.

(This should be a comment on Thomas's answer, but I can't comment yet).

\$\endgroup\$
1
\$\begingroup\$

SVG (HTML5), 442 440 438 bytes

<svg viewbox=0,0,240,64><path fill=red d=M13.2,62V15.8A15,15,0,0,1,42.6,11.6L53.5,49a3,3,0,0,0,5.9,-.8V2h12V48.2A15,15,0,0,1,42,52.4L31.1,15a3,3,0,0,0,-5.9,.8V62m45.3,0L85.2,11.6a15,15,0,0,1,28.8,0L128.7,62H116.2L102.5,15a3,3,0,0,0,-5.8,0L83,62M125.2,50H153a6,6,0,0,0,0,-12H141A18,18,0,0,1,141,2H168.8V14H141a6,6,0,0,0,0,12h12A18,18,0,0,1,153,62H125.2m43.7,0L183.6,11.6a15,15,0,0,1,28.8,0L227.1,62H214.6L200.9,15a3,3,0,0,0,-5.8,0L181.4,62

Just an optimisation of the SVG given in the question. There's a better way of doing this!

\$\endgroup\$
2
  • \$\begingroup\$ No +1, too boring IMO, but remove fill=red since "The logo shall be in a single arbitrary colour on a distinctly coloured background". Eagerly awaiting the "better way" :) \$\endgroup\$ Jun 7, 2020 at 17:17
  • 1
    \$\begingroup\$ @JonathanAllan I've added that as another answer as I thought it made sense that way. \$\endgroup\$
    – Neil
    Jun 7, 2020 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.