{"id":61,"date":"2011-10-28T19:11:16","date_gmt":"2011-10-29T02:11:16","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=61"},"modified":"2011-11-12T00:10:20","modified_gmt":"2011-11-12T08:10:20","slug":"circles-spirals-and-sunflowers-part-1","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/10\/circles-spirals-and-sunflowers-part-1\/","title":{"rendered":"Circles, Spirals and Sunflowers, Part 1"},"content":{"rendered":"<div class=\"exl\"><img decoding=\"async\" src=\"\/img\/sunflower.jpg\" \/><\/div>\n<p>In this tutorial, my aim is to show you some fun ways to draw circles, and spirals, and ultimately, how to draw the interesting pattern you see on sunflowers.  All these techniques are described from a few basic facts about circles, which you probably learned (and forgot) a long time ago.  Back in grade school, you may have learned these three equations:<\/p>\n<p><br clear=\"all\" \/><\/p>\n<div class=\"equation\">D (diameter) = 2 R<\/div>\n<div class=\"equation\">C (circumfrence) = 2 &pi; R    (or &pi; D)<\/div>\n<div class=\"equation\">A (area) = &pi; R<sup>2<\/sup><\/div>\n<p>While these equations are useful, they aren&#8217;t actually needed to draw a circle. We&#8217;ll make use of them in a surprising way, below.<\/p>\n<p>To draw a circle or anything, we are going to need a graphics framework.  I&#8217;m going to use <a href=\"http:\/\/processingjs.org\">Processing.js<\/a>.  If you are using an older web browser,  like IE 8 or earlier, you&#8217;re not going to see anything!<\/p>\n<div class=\"exr \" style=\"width:100px;\"><script type=\"application\/processing\">  size(100,100);\n  smooth();\n\n  background(255);\n\n  float cx = width\/2;\n  float cy = height\/2;\n  float diameter = width*.9;\n  \n  fill(0);\n  ellipse(cx,cy,diameter,diameter);\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=basic_circle\">example 1<br \/>(source)<\/a><\/div>\n<\/div>\n<p>Example 1 shows a basic black circle.  I&#8217;ve made the code longer than it needs to be, to make it readable.  Here&#8217;s what it looks like.<\/p>\n<pre>\r\n  size(100, 100);\r\n  smooth();\r\n\r\n  background(255);\r\n\r\n  float cx = width\/2;\r\n  float cy = height\/2;\r\n  float diameter = width*.9;\r\n  \r\n  fill(0);\r\n  ellipse(cx,cy,diameter,diameter);\r\n<\/pre>\n<p>The most complicated piece of this is the <i>ellipse<\/i> function, which is used to draw circles and ovals.  It&#8217;s parameters are<\/p>\n<ul>\n<li>cx, cy &#8211; the center coordinates of the circle you are drawing.\n<li>width, height &#8211; the dimensions of the circle you are drawing.  For circles (as opposed to ovals) these two numbers are the same, and correspond to the diameter of the circle.\n<\/ul>\n<div class=\"exl \" style=\"width:100px;\"><script type=\"application\/processing\">  size(100,100);\n  smooth();\n  background(255);\n\n  noStroke();\n  \n  float diam = width*.9;\n  float cx = width\/2;\n  float cy = height\/2;\n  float sm_diam = diam\/2.0;\n  float sm_rad = sm_diam\/2;\n  float cx1 = cx;\n  float cy1 = cy + sm_rad;\n  float cx2 = cx;\n  float cy2 = cy - sm_rad;\n    \n  fill(0);\n  ellipse(cx,cy,diam,diam);\n\n  fill(255); \/\/ we use a white rectangle to blank out half the circle\n  rect(0,0,width\/2,height);\n\n  fill(0);\n  ellipse(cx1,cy1,sm_diam,sm_diam);\n\n  fill(255);\n  ellipse(cx2,cy2,sm_diam,sm_diam);\n  ellipse(cx1,cy1,sm_diam\/3,sm_diam\/3);\n\n  fill(0);\n  ellipse(cx2,cy2,sm_diam\/3,sm_diam\/3);\n\n  stroke(0);\n  noFill();\n  strokeWeight(2);\n  ellipse(cx,cy,diam,diam);\n  \n\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=taijitu\">example 2<br \/>(source)<\/a><\/div>\n<\/div>\n<p>Example 2 shows a more complicated <i>taijitu<\/i> figure drawn using multiple filled circles (and one half circle). This is a more advanced example and can be skipped for now.  If you&#8217;re curious about it, click on the link for example 2 and scroll to the bottom of the code to read more about it.  Later, try reproducing it without looking at the code.<\/p>\n<p><br clear=\"all\" \/><\/p>\n<div class=\"exr \" style=\"width:100px;\"><script type=\"application\/processing\">  size(100,100);\n  smooth();\n  \n  background(255);\n  \n  float cx = width\/2;\n  float cy = height\/2;\n  float diameter = width*.9;\n  \n  stroke(0);\n  ellipse(cx,cy,diameter,diameter);\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=stroke_circle\">example 3<br \/>(source)<\/a><\/div>\n<\/div>\n<p>Note that if you use stroke() instead of fill(), you get an outlined circle, which looks like example 3.<\/p>\n<p>At this point, I would suggest, as a hands-on exercise, that you construct a sample web page that draws a circle using Processing.js.  You can use my &#8216;example 3&#8217; code as a starting point &#8211; click on one of the examples and do a &#8220;view source&#8221; to see what&#8217;s going on.   After that, take a break and come back when you&#8217;re feeling fresh!<\/p>\n<div class=\"coffee\"><img decoding=\"async\" src=\"\/img\/coffee_1.jpg\" \/><\/div>\n<p>Feeling refreshed?  Great.  You may be curious how the points on these circles are plotted.   <\/p>\n<div class=\"exl \" style=\"width:200px;\"><script type=\"application\/processing\">size(200,200);\nsmooth();\nbackground(255);\n\nint nbr_circles = 24;\n\nfloat lg_diam = width * .85;\nfloat lg_rad = lg_diam \/ 2;\nfloat lg_circ = PI * lg_diam;\n\nfloat sm_diam = (lg_circ \/ nbr_circles);\n\nfloat cx = width\/2.0;\nfloat cy = height\/2.0;\n\nfill(0);\nfor (int i = 1; i <= nbr_circles; ++i) {\n  float angle = i * TWO_PI \/ nbr_circles;\n  float x = cx + cos(angle) * lg_rad;\n  float y = cy + sin(angle) * lg_rad;\n  ellipse(x, y, sm_diam, sm_diam);\n}\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=circle_of_circles\">example 4<br \/>(source)<\/a><\/div>\n<\/div>\n<p>In example 4, I&#8217;ve drawn a large circle out of small circles, like a black pearl necklace. There are a number of ways to figure out how the points lie on a circle, but I usually use the sine and cosine functions to do it.  I think of these functions as &#8220;circle drawing&#8221; functions.  The basic equations are:<\/p>\n<div class=\"equation\">x = cx + cos(&theta;)  R<br \/>\ny = cy + sin(&theta;) R\n<\/div>\n<p>These are the classic equations for converting from polar coordinates (angle and distance from some center point) to cartesian coordiantes (x and y). In these equations, cx and cy are the center point of the circle, R is the radius of the circle, and theta (&theta;) represents the angle going around the circle.  In code, you usually supply the angle in radians, not degrees.  The more familiar degrees go from 0 to 360.  Radians go from 0 to 2&pi;. To convert a number from degrees to radians, multiply it by a scaling constant (&pi; \/ 180), or just use the radians() function which is built into Processing.  Note that the angle value you pass to sin and cosine doesn&#8217;t need to be restricted to 0 to 2&pi; &#8211; you can keep going around the circle in either direction.  sin(&theta;) will produce identical values for any two numbers which are 2&pi; apart.  The pattern produced by these functions are <a href=\"http:\/\/en.wikipedia.org\/wiki\/Sine_wave\">sine waves and cosine waves<\/a> (cosine waves are basically sine waves which are out of phase by 90 degrees). <\/p>\n<p>In Processing.js, I employ these equations in a loop, to draw each point on the circle, like so:<\/p>\n<pre>\r\nfor (int i = 1; i <= nbr_circles; ++i) {\r\n  float angle = i * TWO_PI \/ nbr_circles;\r\n  float x = cx + cos(angle) * lg_rad;\r\n  float y = cy + sin(angle) * lg_rad;\r\n  ellipse(x, y, sm_diam, sm_diam);\r\n}\r\n<\/pre>\n<p>In this code, <i>lg_rad<\/i> is the radius of the large ring, and <i>sm_diam<\/i> is the diameter of the smaller circles I am drawing in the ring. In order to make the circles just big enough to touch, I worked out the circumfrence of the large circle, and then divided it by the number of circles in the ring. This is the diameter of the smaller circles.<\/p>\n<pre>\r\n\/\/ large circle's diameter\r\nfloat lg_diam =  width * .85;   \r\n\r\n\/\/ large circle's radius\r\nfloat lg_rad  = lg_diam\/2;      \r\n\r\n\/\/ large circumfrence\r\nfloat lg_circ =  PI * lg_diam;  \r\n\r\n\/\/ small circle's diameter\r\nfloat sm_diam = (lg_circ \/ nbr_circles); \r\n<\/pre>\n<div class=\"exr \" style=\"width:200px;\"><script type=\"application\/processing\">int nbr_circles = 24;\n\nvoid setup()\n{\n  size(200,200);\n  smooth();\n  frameRate(24);\n  noLoop();\r\n}\r\n\r\nint bw = 24;\r\n\r\nboolean playState = false;\r\n\r\nvoid drawPlayButton(state)\r\n{\r\n  pushMatrix();\r\n    translate(4, height-(bw+4));\r\n    stroke(0);\r\n    fill(230);\r\n    rect(0,0,bw,bw);\r\n    fill(0);\r\n    if (!state) {\r\n      beginShape();\r\n      vertex(bw*.25,bw*.25);\r\n      vertex(bw*.9,bw\/2);\r\n      vertex(bw*.25,bw*.75);\r\n      endShape(CLOSE);\r\n    }\r\n    else {\r\n      rect(bw\/6+bw\/12,bw*.25,bw\/6,bw\/2);\r\n      rect(4*bw\/6-bw\/12,bw*.25,bw\/6,bw\/2);\r\n    }\r\n  popMatrix();\r\n}\r\n\r\nvoid mouseClicked()\r\n{\r\n  playState = !playState;\r\n  if (playState) {\r\n    loop();\r\n  }\r\n  else {\r\n    noLoop();\r\n    draw();\r\n  }\r\n}\r\n\r\nvoid draw()\n{\n  background(255);\n\n  nbr_circles = 18 + (frameCount % 200);\n\n  float lg_diam = width * .85;\n  float lg_rad = lg_diam \/ 2;\n  float lg_circ = PI * lg_diam;\n  float sm_diam = (lg_circ \/ nbr_circles);\n  float cx = width\/2.0;\n  float cy = height\/2.0;\n  \n  fill(0);\n  for (int i = 1; i <= nbr_circles; ++i) {\n    float angle = i * TWO_PI \/ nbr_circles;\n    float x = cx + cos(angle) * lg_rad;\n    float y = cy + sin(angle) * lg_rad;\n    ellipse(x, y, sm_diam, sm_diam);\n  }\n  drawPlayButton(playState); \/\/ Not included in visual examples\r\n}\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=circle_of_circles_animated\">example 5<br \/>(source)<\/a><\/div>\n<\/div>\n<p>By changing the value of nbr_circles, I can increase or decrease the number of circles in the ring, as in example 5. Try hitting the play button on this example - you'll see the circles get smaller as I increase the number with each frame.  If I make the circles small enough, it closely resembles the circular outline in example 3.  At those sizes, it would be far more efficient to draw individual pixels, rather than little tiny circles!<br \/>\n<br clear=\"all\" \/><\/p>\n<p>While you take a break, consider how this code could be modified to draw a spiral instead of a circle...<\/p>\n<div class=\"coffee\"><img decoding=\"async\" src=\"\/img\/coffee_2.jpg\" \/><\/div>\n<p>Concluded in <a href=\"http:\/\/new.joyofprocessing.com\/blog\/?p=74\">Part 2.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"exl\"><img decoding=\"async\" src=\"\/img\/sunflower.jpg\" \/><\/div>\n<p>In this tutorial, my aim is to show you some fun ways to draw circles, and spirals, and ultimately, how to draw the interesting pattern you see on sunflowers.  All these techniques are described from a few basic facts about circles, which you probably learned (and forgot) a long time ago.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11,7,9,8,10],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-animation","tag-beginner","tag-circles","tag-intermediate","tag-spirals"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/61","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=61"}],"version-history":[{"count":10,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}