Circles, Spirals and Sunflowers
{ let width = 600; let height = 600; const dc = DOM.context2d(width, height); var refresh = function(dc, width, height, frame_number) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); var nbr_circles = 333; var deviation = 5/8.0; var phi = (Math.sqrt(5)+1)/2 - 1; // golden ratio var golden_angle = phi*2*Math.PI; // golden angle var lg_rad = width * .45; var lg_area = Math.pow(lg_rad,2)*Math.PI; var mean_area = lg_area / nbr_circles; var min_area = mean_area * (1-deviation); var max_area = mean_area * (1+deviation); var cum_area = 0; var fudge = .87; // Fudge factor, since our circles don't actually fill up space entirely. var cx = width/2; var cy = height/2; var hue_incr = frame_number * .0002 + .1; var angle_offset = frame_number * .01; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*golden_angle + angle_offset; var ratio = i / nbr_circles; var sm_area = min_area + ratio * (max_area - min_area); var sm_rad = Math.sqrt( sm_area / Math.PI ); cum_area += sm_area; var spiral_rad = Math.sqrt( cum_area / Math.PI ); var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; var hue = hue_incr*i; hue -= Math.floor(hue); hue *= 360; dc.fillStyle = 'hsl(' + hue + ',80%,50%)'; dc.arc(x, y, sm_rad * fudge, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height, 100); return dc.canvas; }
Note: This is a port of a tutorial I originally published here. I'm using it as a sandbox for learning Observable -- Jim 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:
{ const html = DOM.element('div'); html.append(tex`diameter = 2 radius`); html.append(md`<p>`); html.append(tex`circumference = 2 π radius`); html.append(md` (or) `); html.append(tex`circumference = π diameter`); html.append(md`<p>`); html.append(tex`area = πradius^2`); return html; }
While these equations are useful, they aren't actually needed to draw a circle. We'll make use of them in a surprising way, below. Here's a basic black circle. The javascript code for this is perhaps needlessly complicated, but not too difficult to understand. I've made it longer than it needs to be, to make it readable. Here's what it looks like.
{ let width = 200; let height = 200; const dc = DOM.context2d(width, height); dc.clearRect(0,0,width,height); dc.fillStyle='#000'; dc.beginPath(); var cx = width/2; var cy = height/2; var rad = width*.45; dc.arc(cx, cy, rad, 0,2*Math.PI, false); dc.fill(); return dc.canvas; }
The most complicated piece of this is the arc function, which is used to draw circles, and circular curves. It's parameters are cx, cy - the center coordinates of the circle you are drawing rad - the radius of the circle begin_angle, end_angle - the beginning and ending positions of the arc, expressed in radians. For a complete circle, use 0,2*Math.PI, which is the radians equivalent of 0 to 360 degrees. counter_clockwise_flag - a flag which indicates whether to draw clockwise or counter-clockwise. For all of our examples, I'll pass false, meaning clockwise - this is more of an issue when you are drawing partial arcs.
The next example shows a more complicated taijitu figure drawn using multiple filled circles (and one half circle). This is a more advanced example and can be skipped for now.
import {viewof pic as taijitu} from "@jbum/taijitu-yin-yang"
viewof taijitu
You may find it tempting to make a subroutine simply for making filled circles. It would look like this: function filled_circle(cx, cy, rad) { dc.beginPath(); dc.arc(cx, cy, rad, 0,2*Math.PI, false); dc.fill(); }Note that if you replace the fill function with the stroke function, you can get an outlined circle, which looks like this.
{ let width = 200; let height = 200; const dc = DOM.context2d(width, height); dc.clearRect(0,0,width,height); function filled_circle(cx, cy, rad) { dc.beginPath(); dc.arc(cx, cy, rad, 0,2*Math.PI, false); dc.fill(); } function stroke_circle(cx, cy, rad) { dc.beginPath(); dc.arc(cx, cy, rad, 0,2*Math.PI, false); dc.stroke(); } stroke_circle(width/2,height/2,width*.4); return dc.canvas; }
Next, I've drawn a large circle out of small circles, like a black pearl necklace.
{ let width = 200; let height = 200; const dc = DOM.context2d(width, height); dc.clearRect(0,0,width,height); dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 24; var lg_rad = (width/2) * .85; var lg_circ = 2*Math.PI*lg_rad; var sm_rad = (lg_circ / nbr_circles) / 2; var cx = width/2; var cy = height/2; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*2*Math.PI/nbr_circles; var x = cx + Math.cos(angle) * lg_rad; var y = cy + Math.sin(angle) * lg_rad; dc.arc(x, y, sm_rad, 0, 2*Math.PI, false); dc.fill(); } return dc.canvas; }
The 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 "circle drawing" functions. The basic equations are: x = cx + cos(θ) R y = cy + sin(θ) RThese are the classic equations for converting from polar coordinates (angle and distance from some center point) to cartesian coordinates (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 (θ) 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π. To convert a number from degrees to radians, multiply it by a scaling constant (π / 180). Note that the angle value you pass to sin and cosine doesn't need to be restricted to 0 to 2π - you can keep going around the circle in either direction. sin(θ) will produce identical values for any two numbers which are 2π apart. The pattern produced by these functions are sine waves and cosine waves (cosine waves are basically sine waves which are out of phase by 90 degrees). In javascript, I employ these equations in a loop, to draw each point on the circle, like so: for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*2*Math.PI/nbr_circles; var x = cx + Math.cos(angle) * lg_rad; var y = cy + Math.sin(angle) * lg_rad; dc.arc(x, y, sm_rad, 0, 360, false); dc.fill(); }In this code, lg_rad is the radius of the large ring, and sm_rad is the radius 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 circumference of the large circle, and then divided it by the number of circles in the ring. This is the diameter of the smaller circles. I got the radius by dividing it by 2. var lg_rad = (width/2) * .85; // large radius var lg_circ = 2*Math.PI*lg_rad; // large circumference var sm_rad = (lg_circ / nbr_circles) / 2; // small radiusBy changing the value of nbr_circles, I can increase or decrease the number of circles in the ring, as in example 5.
viewof nbr_circles = slider({min: 8, max: 64, value: 32, description: "Number of circles drawn"})
{ let width = 200; let height = 200; const dc = DOM.context2d(width, height); var dorefresh = function(dc, width, height, f_nbr_circles) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; // var nbr_circles = nbr_circles); let nbr_circles = Math.floor(f_nbr_circles); var lg_rad = (width/2) * .85; var lg_circ = 2*Math.PI*lg_rad; var sm_rad = (lg_circ / nbr_circles) / 2; var cx = width/2; var cy = height/2; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*2*Math.PI/nbr_circles; var x = cx + Math.cos(angle) * lg_rad; var y = cy + Math.sin(angle) * lg_rad; dc.arc(x, y, sm_rad, 0, 2*Math.PI, false); dc.fill(); } }; dorefresh(dc, width, height, nbr_circles); return dc.canvas; }
Now consider how this code could be modified to draw a spiral instead of a circle... Have you figured it out? The basic idea is that you change the value of the larger radius (what I was calling lg_rad) as you draw each point. Take a look at the pertinent lines of code in the next example. In this example, as each dot is drawn, at an ever increasing radius, I also increment the angle by just 2 degrees.
{ let width = 400; let height = 400; const dc = DOM.context2d(width, height); var refresh = function(dc, width, height) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 100; var angle_incr = 2 * Math.PI/180; // 2 degrees, converted to radians var cx = width/2; var cy = height/2; var outer_rad = width*.45; var sm_rad = 2; for (var i = 1; i <= nbr_circles; ++i) { var ratio = i/nbr_circles; var angle = i*angle_incr; var spiral_rad = ratio * outer_rad; var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; // draw tiny circle at x,y dc.beginPath(); dc.arc(x, y, sm_rad, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height); return dc.canvas; }
We can tighten the spiral by changing the amount we increment the angle during each step, as in example 7. Hit the play button to see the effect. In this example, we start at a 2 degree increment, and then increase the angle by 1 degree per second (since there are 100 dots, the outer dot travels at 100 x 1 degrees or 100 degrees per second).
viewof spiral_incr = slider({min: 0, max: 180, step:0.5, value: 10, description: "Spiral increment"})
{ let width = 400; let height = 400; const dc = DOM.context2d(width, height); var refresh = function (dc, width, height, increment) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 100; var angle_incr = increment * Math.PI/180; var cx = width/2; var cy = height/2; var outer_rad = width*.45; var sm_rad = 2; for (var i = 1; i <= nbr_circles; ++i) { var ratio = i/nbr_circles; var angle = i*angle_incr; var spiral_rad = ratio * outer_rad; var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; // draw tiny circle at x,y dc.beginPath(); dc.arc(x, y, sm_rad, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height, spiral_incr); return dc.canvas; }
Watch the following animation, in which I am continually increasing the increment, for a couple minutes: interesting things happen!.
canvas = { let width = 400; let height = 400; let dc,canvas; if (this) canvas=this,dc = canvas.getContext("2d"); else { dc = DOM.context2d(width, height); canvas = dc.canvas; } dc.fillStyle = "blue"; var angle_incr = increment*Math.PI/180; dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 100; var cx = width/2; var cy = height/2; var outer_rad = width*.45; var sm_rad = 2; for (var i = 1; i <= nbr_circles; ++i) { var ratio = i/nbr_circles; var angle = i*angle_incr; var spiral_rad = ratio * outer_rad; var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; // draw tiny circle at x,y dc.beginPath(); dc.arc(x, y, sm_rad, 0, 2*Math.PI, false); dc.fill(); } yield canvas; }
increment = { while (true) { for (var d = 0; d < 36000; d += 5) { yield Promises.delay(25, d / 100); } } }
Notice that when the spiral has tightened up the dots form a spoked or starfish-like pattern. Then the arms fold in, and the dots form a rose-like configuration. Then the arms straighten out again, and you see another starfish. This keeps happening. When the starfish has four arms, the angle increment is 90 degrees, or some multiple of 90 degrees like 270 degrees. The smallest angle that will give you 4 arms is 360/4 or 90 degrees. Similarly, the smallest angle that will get you 5 arms is 360/5 or 72 degrees. 360/6 gives you six arms, 360/7 gives you seven arms and so on. In other words, to get those starfish patterns, the angle increment has to be a rational fraction or (or "go evenly into") the full circle (so they can line up to form arms). Between those starfish, which are produced by rational fractions of the circle, you get the rose-like patterns, in which the dots don't make straight spokes. You get these rose patterns when the angle increment is an irrational fraction of the full circle. Mathematicans have demonstrated that there are far more irrational numbers than rational ones, and intuitively, you can see that there are more roses than starfish in the animation. There are a number of irrational angles that look especially nice (try the square root of 2 times π or 4.442). The one that produces the most optimal packing, and corresponds to the familiar sunflower arrangement is an angle of approximately 222.5 degrees (or 137.5 going the other way). This is the golden angle, and it is closely related to φ (phi), the golden ratio. More precisely:
tex`\phi = { \sqrt{5} - 1 \over 2 }`
golden angle = 360 φ degrees, or 2 π φ radiansExample 8 If we use that angle to produce a spiral, we get one of these
{ let width = 400; let height = 400; const dc = DOM.context2d(width, height); var refresh = function(dc, width, height) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 200; var phi = (Math.sqrt(5)+1)/2 - 1; // golden ratio var golden_angle = phi*2*Math.PI; // golden angle var lg_rad = width * .45; var sm_rad = 2; var cx = width/2; var cy = height/2; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var ratio = i/nbr_circles; var angle = i*golden_angle; var spiral_rad = ratio * lg_rad; var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; dc.arc(x, y, sm_rad, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height); return dc.canvas; }
This is sometimes called a fibonacci spiral, because the golden ratio is closely related to fibonacci numbers. I also call these phyllotaxy spirals, because the golden angle appears a lot in plant growth (it optimizes surface area to sunlight). Once you start noticing it, you'll see it in a lot of plants in addition to sunflowers, such as pine cones and agaves.
In the above example, you may have noticed that the dots are kind of tight in the center, and then get progressively further apart as they go out. This is because the radial increment is constant, or linear. It would be cool if we could figure out how to get them to pack tightly, like the seeds of a sunflower. It turns out, we already have the mathematical tools to accomplish this! Consider a large circle which is made up of a bunch of tightly packed little circles - circles so tightly packed that no space remains. If all those little circles are the same size, and the area of the large circle is A, then the area of the little circles, B = A/N, where N is the number of little circles. As we grow a phyllotaxy spiral, at each step M from 1 to N, we make something very like a circle made up of M tiny circles. The area of that circle is B*M. Since we know that area = π R2, we can deduce the desired radius from the area. R = sqrt( area / π ) We can use this technique to figure out (given the number of circles we wish to draw, and the size of the outer circle) both the size of the small circles, and how far out to draw each one. The math for working out the expanding radii isn't perfect, because there is a little space left over after the cicles are packed together. To compensate for that, we use a fudge factor which keeps the circles from overlapping by drawing them slightly smaller. I find drawing 87% of the perfect size works fine. This produces this figure.
{ let width = 400; let height = 400; const dc = DOM.context2d(width, height); var refresh = function(dc, width, height) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 200; var phi = (Math.sqrt(5)+1)/2 - 1; // golden ratio var golden_angle = phi*2*Math.PI; // golden angle var lg_rad = width * .45; var lg_area = Math.pow(lg_rad,2)*Math.PI; var sm_area = lg_area / nbr_circles; // Area of our little circles, if they filled the space entirely var sm_rad = Math.sqrt( sm_area / Math.PI ); // This is related to the equation area = pi r squared var fudge = .87; // Fudge factor, since our circles don't actually fill up space entirely. var cx = width/2; var cy = height/2; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*golden_angle; var cum_area = i*sm_area; var spiral_rad = Math.sqrt( cum_area / Math.PI ); var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; dc.arc(x, y, sm_rad * fudge, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height); return dc.canvas; }
To get even closer to a sunflower, we can make the circles grow larger as they grow outward. One way to easily accomplish this is by making the outer circles grow exactly the same amount as the inner circles shrink, so that cumulatively, the area of the circles remains the same. Here is an example.
{ let width = 400; let height = 400; const dc = DOM.context2d(width, height); var refresh = function(dc, width, height) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); dc.fillStyle='#000'; var nbr_circles = 200; var deviation = 5/8.0; var phi = (Math.sqrt(5)+1)/2 - 1; // golden ratio var golden_angle = phi*2*Math.PI; // golden angle var lg_rad = width * .45; var lg_area = Math.pow(lg_rad,2)*Math.PI; var mean_area = lg_area / nbr_circles; var min_area = mean_area * (1-deviation); var max_area = mean_area * (1+deviation); var cum_area = 0; var fudge = .87; // Fudge factor, since our circles don't actually fill up space entirely. var cx = width/2; var cy = height/2; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*golden_angle; var ratio = i / nbr_circles; var sm_area = min_area + ratio * (max_area - min_area); var sm_rad = Math.sqrt( sm_area / Math.PI ); cum_area += sm_area; var spiral_rad = Math.sqrt( cum_area / Math.PI ); var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; dc.arc(x, y, sm_rad * fudge, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height); return dc.canvas; }
Finally, we can use a variable to produce some cool animation effects with these patterns. Click and scroll to the bottom of example 11 for more info about how I did the color cycling. Have fun!
viewof t = slider({min: 0, max: 360, value: 100, description: "Animation phase"})
{ let width = 400; let height = 400; const dc = DOM.context2d(width, height); var refresh = function(dc, width, height, frame_number) // Sample code by Jim Bumgardner { dc.clearRect(0,0,width,height); var nbr_circles = 333; var deviation = 5/8.0; var phi = (Math.sqrt(5)+1)/2 - 1; // golden ratio var golden_angle = phi*2*Math.PI; // golden angle var lg_rad = width * .45; var lg_area = Math.pow(lg_rad,2)*Math.PI; var mean_area = lg_area / nbr_circles; var min_area = mean_area * (1-deviation); var max_area = mean_area * (1+deviation); var cum_area = 0; var fudge = .87; // Fudge factor, since our circles don't actually fill up space entirely. var cx = width/2; var cy = height/2; var hue_incr = frame_number * .0002 + .1; var angle_offset = frame_number * .01; for (var i = 1; i <= nbr_circles; ++i) { dc.beginPath(); var angle = i*golden_angle + angle_offset; var ratio = i / nbr_circles; var sm_area = min_area + ratio * (max_area - min_area); var sm_rad = Math.sqrt( sm_area / Math.PI ); cum_area += sm_area; var spiral_rad = Math.sqrt( cum_area / Math.PI ); var x = cx + Math.cos(angle) * spiral_rad; var y = cy + Math.sin(angle) * spiral_rad; var hue = hue_incr*i; hue -= Math.floor(hue); hue *= 360; dc.fillStyle = 'hsl(' + hue + ',80%,50%)'; dc.arc(x, y, sm_rad * fudge, 0, 2*Math.PI, false); dc.fill(); } } refresh(dc, width, height, t); return dc.canvas; }
import {slider} from "@jashkenas/inputs"