{"id":176,"date":"2011-11-09T16:08:33","date_gmt":"2011-11-10T00:08:33","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=176"},"modified":"2012-01-01T10:57:45","modified_gmt":"2012-01-01T18:57:45","slug":"stars-and-asters","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/stars-and-asters\/","title":{"rendered":"Stars and Asters"},"content":{"rendered":"<p><script type=\"application\/processing\">\/\/ Routines for drawing stars and asters  - Jim Bumgardner\n\nvoid setup()\n{\n  size(500,250);\n  smooth();\n  noLoop();\n}\n\n\n\/\/ Only looks star-like if skipPoints is relatively prime with nbrPoints\nvoid drawStar(int nbrPoints, float cx, float cy, float odiam, int skipPoints )\n{\n  float orad = odiam \/ 2.0;\n\n  pushMatrix();\n  translate(cx, cy);\n  rotate(radians(-90)); \/\/ Point upwards  \n\n  float  a = TWO_PI \/ nbrPoints;\n\n  beginShape();\n  int  n = 0;\n  for (int i = 0; i < nbrPoints; ++i) {\n    vertex( cos( a * n) * orad, sin( a * n) * orad);\n    n += skipPoints;\n  }\n  endShape(CLOSE);\n  popMatrix();\n}\n\nvoid drawAster(int nbrPoints, float cx, float cy, float odiam, float idiamRatio)\n{\n  float orad = odiam \/ 2;\n  float irad = orad * idiamRatio;\n \n  pushMatrix();\n  translate(cx, cy);\n  rotate(radians(-90)); \/\/ Point upwards  \n\n  float  a = TWO_PI \/ nbrPoints;\n\n  beginShape();\n  for (int i = 0; i < nbrPoints; ++i) {\n    vertex( cos( a * i) * orad, sin( a * i) * orad);\n    vertex( cos( a * (i+.5)) * irad, sin( a * (i+.5)) * irad);\n  }\n  endShape(CLOSE);\n  popMatrix();\n}\n\nvoid draw()\n{\n\n  background(0);\n\n  \/\/ Dim randomized stars on background\n  stroke(100);\n  strokeWeight(.5);\n  noFill();\n  for (int y = 0; y < height; y += 24) {\n    for (int x = 0; x < width; x += 24) {\n      \n      if (random(2) < 1) {\n        int nbrPoints = ((int)random(2,6))*2+1;\n        int skipPoints = (int) (nbrPoints\/2);\n        drawStar(nbrPoints, x, y, 24, skipPoints);\n      } else {\n        int nbrPoints = (int)random(5,13);\n        drawAster(nbrPoints, x, y, 24, random(.1,.6));\n      }\n    }\n  }\n\n  stroke(#FFCC00);\n  strokeWeight(2);\n  noFill();\n\n  drawStar(5, width*1\/5, height*1\/4, height*.4, 2);\n  drawAster(5, width*2\/4, height*1\/4, height*.4, .25);\n  drawAster(5, width*4\/5, height*1\/4, height*.4, .55);\n\n  noStroke();\n  fill(#FFCC00);\n\n  drawStar(5, width*1\/5, height*3\/4, height*.4, 2);\n  drawAster(5, width*2\/4, height*3\/4, height*.4, .25);\n  drawAster(5, width*4\/5, height*3\/4, height*.4, .55);\n\n}\n\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=Stars\">source<\/a><\/div>\n<p>Some upcoming <a href=\"\/blog\/2011\/11\/how-to-draw-the-union-jack\/\">world flag tutorials<\/a> are going to use two different types of stars, so I thought I&#8217;d spend some time explaining how they are made.  The above sketch contains some sample code you can borrow for drawing stars.<\/p>\n<div class=\"exl\"><img decoding=\"async\" src=\"\/img\/star_example.jpg\" \/><\/div>\n<p>Here&#8217;s how I usually draw a star, when doodling.  Maybe you do it the same way.  This is the same kind of 5-pointed star that appears in the US flag.  I start from the lower left, and then draw 5 lines in quick succession, connecting nearly opposite vertices.  Typically, when doing a 5 pointed star, I connect every 2 points with a line.  This only works if the number of points, and the number of points you are skipping (2 in this case) are relatively prime numbers.  You can&#8217;t make a six-pointed star this way.<\/p>\n<p>I&#8217;ve written a routine DrawStar, which generalizes this kind of drawing, so you can make a lot of different stars and spyrograph effects with it.  In the first example, the two yellow stars on the left were drawn with it.  Here&#8217;s the code:<\/p>\n<pre>\r\nvoid drawStar(int nbrPoints, float cx, float cy, float odiam, int skipPoints )\r\n{\r\n  float orad = odiam \/ 2.0;\r\n\r\n  pushMatrix();\r\n  translate(cx, cy);\r\n  rotate(radians(-90)); \/\/ Point upwards  \r\n\r\n  float  a = TWO_PI \/ nbrPoints;\r\n\r\n  beginShape();\r\n  int  n = 0;\r\n  for (int i = 0; i < nbrPoints; ++i) {\r\n    vertex( cos( a * n) * orad, sin( a * n) * orad);\r\n    n += skipPoints;\r\n  }\r\n  endShape(CLOSE);\r\n  popMatrix();\r\n}\r\n<\/pre>\n<p>To use this routine, you have to supply the following parameters:<\/p>\n<ul>\n<li>nbrPoints The number of points in the star (5 is a good choice, 6 is not so good)\n<li>cx,cy  The center coordinates of the star\n<li>odiam The outer diameter (or width) of the star\n<li>skipPoints The number of points to skip when drawing the star.  It should be<br \/>\nrelatively prime with nbrPoints if you want the classic star effect.\n<\/ul>\n<div class=\"exl\"><img decoding=\"async\" src=\"\/img\/aster_example.jpg\" \/><\/div>\n<p>The second way I have of drawing stars is slightly more complicated.  I draw two lines for each point, in a sunburst-like pattern.  To distinguish this second type of star from the first, I'm going to call this an \"aster\" which is latin for star (I haven't found a standard nomenclature for distinguishing the two methods).<\/p>\n<p>The American (USA) flag contains stars of the first type, but the Australian flag contains asters.  With asters, you can control both the outer and inner diameter, and achieve a lot of different kinds of stars, from spiny stars to fat bulging stars.  In the first illustration, the 4 remaining yellow stars on the right are 5-pointed asters.  The 7 and 5-pointed asters on the Australian flag happen to have an inner diameter which is 4\/9 the outer diameter.  It is this ratio that you pass as the final parameter to my drawAster routine, which is shown below.<\/p>\n<pre>\r\nvoid drawAster(int nbrPoints, float cx, float cy, float odiam, float idiamRatio)\r\n{\r\n  float orad = odiam \/ 2;\r\n  float irad = orad * idiamRatio;\r\n \r\n  pushMatrix();\r\n  translate(cx, cy);\r\n  rotate(radians(-90)); \/\/ Point upwards  \r\n\r\n  float  a = TWO_PI \/ nbrPoints;\r\n\r\n  beginShape();\r\n  for (int i = 0; i < nbrPoints; ++i) {\r\n    vertex( cos( a * i) * orad, sin( a * i) * orad);\r\n    vertex( cos( a * (i+.5)) * irad, sin( a * (i+.5)) * irad);\r\n  }\r\n  endShape(CLOSE);\r\n  popMatrix();\r\n}\r\n<\/pre>\n<p>To use this routine, you have to supply the following parameters, which, with the exception of the last one, are the same as for my other star drawing routine:<\/p>\n<ul>\n<li>nbrPoints The number of points in the star (5 is a good choice, 6 is not so good)\n<li>cx,cy  The center coordinates of the star\n<li>odiam The outer diameter (or width) of the star\n<li>iratioRatio The ratio of the inner diameter to the outer diameter (e.g. .444 for the Australian flag stars).\n<\/ul>\n<p>The background stars in the first illustration are a variety of stars drawn using both routines, with copious use of random numbers.  It is not hard to produce snow-flake like effects by changing the colors and the symmetry.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>source Some upcoming world flag tutorials are going to use two different types of stars, so I thought I&#8217;d spend some time explaining how they are made. The above sketch contains some sample code you can borrow for drawing stars. Here&#8217;s how I usually draw a star, when doodling. Maybe you do it the same [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[5,14,15],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-easy","tag-stars","tag-symmetry"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":10,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/176\/revisions\/450"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}