1d:{"title":"Circles, Spirals and Sunflowers","cells":[{"id":0,"value":"md`# Circles, Spirals and Sunflowers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n*Note: This is a port of a tutorial I originally published here. I'm using it as a sandbox for learning Observable -- Jim*\n\n

\nIn 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:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"{\n const html = DOM.element('div');\n html.append(tex`diameter = 2 radius`);\n html.append(md`

`);\n html.append(tex`circumference = 2 π radius`);\n html.append(md` (or) `);\n html.append(tex`circumference = π diameter`);\n html.append(md`

`);\n html.append(tex`area = πradius^2`);\n return html;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`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.\n\nHere'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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"{\n let width = 200;\n let height = 200;\n\n const dc = DOM.context2d(width, height);\n dc.clearRect(0,0,width,height);\n \n dc.fillStyle='#000';\n dc.beginPath();\n var cx = width/2;\n var cy = height/2;\n var rad = width*.45;\n \n dc.arc(cx, cy, rad, 0,2*Math.PI, false);\n dc.fill();\n \n return dc.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`The most complicated piece of this is the arc function, which is used to draw circles, and circular curves. It's parameters are\n * cx, cy - the center coordinates of the circle you are drawing\n * rad - the radius of the circle\n * 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.\n * 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.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`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. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import {viewof pic as taijitu} from \"@jbum/taijitu-yin-yang\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof taijitu","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`You may find it tempting to make a subroutine simply for making filled circles. It would look like this:\n\n function filled_circle(cx, cy, rad)\n {\n dc.beginPath();\n dc.arc(cx, cy, rad, 0,2*Math.PI, false);\n dc.fill();\n }\n\nNote that if you replace the fill function with the stroke function, you can get an outlined circle, which looks like this.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"{\n let width = 200;\n let height = 200;\n\n const dc = DOM.context2d(width, height);\n dc.clearRect(0,0,width,height);\n\n function filled_circle(cx, cy, rad)\n {\n dc.beginPath();\n dc.arc(cx, cy, rad, 0,2*Math.PI, false);\n dc.fill();\n }\n\n function stroke_circle(cx, cy, rad)\n {\n dc.beginPath();\n dc.arc(cx, cy, rad, 0,2*Math.PI, false);\n dc.stroke();\n }\n \n stroke_circle(width/2,height/2,width*.4);\n \n return dc.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`Next, I've drawn a large circle out of small circles, like a black pearl necklace.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"{\n let width = 200;\n let height = 200;\n\n const dc = DOM.context2d(width, height);\n dc.clearRect(0,0,width,height);\n\n dc.clearRect(0,0,width,height);\n \n dc.fillStyle='#000';\n var nbr_circles = 24;\n \n var lg_rad = (width/2) * .85;\n var lg_circ = 2*Math.PI*lg_rad;\n var sm_rad = (lg_circ / nbr_circles) / 2;\n var cx = width/2;\n var cy = height/2;\n \n for (var i = 1; i <= nbr_circles; ++i) {\n dc.beginPath();\n var angle = i*2*Math.PI/nbr_circles;\n var x = cx + Math.cos(angle) * lg_rad;\n var y = cy + Math.sin(angle) * lg_rad;\n dc.arc(x, y, sm_rad, 0, 2*Math.PI, false);\n dc.fill();\n }\n \n return dc.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"$20","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof nbr_circles = slider({min: 8, max: 64, value: 32, description: \"Number of circles drawn\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"\n\n{\n let width = 200;\n let height = 200;\n\n const dc = DOM.context2d(width, height);\n \n var dorefresh = function(dc, width, height, f_nbr_circles) // Sample code by Jim Bumgardner\n {\n dc.clearRect(0,0,width,height);\n\n dc.fillStyle='#000';\n // var nbr_circles = nbr_circles);\n\tlet nbr_circles = Math.floor(f_nbr_circles);\n var lg_rad = (width/2) * .85;\n var lg_circ = 2*Math.PI*lg_rad;\n var sm_rad = (lg_circ / nbr_circles) / 2;\n var cx = width/2;\n var cy = height/2;\n\n for (var i = 1; i <= nbr_circles; ++i) {\n dc.beginPath();\n var angle = i*2*Math.PI/nbr_circles;\n var x = cx + Math.cos(angle) * lg_rad;\n var y = cy + Math.sin(angle) * lg_rad;\n dc.arc(x, y, sm_rad, 0, 2*Math.PI, false);\n dc.fill();\n }\n\n };\n \n dorefresh(dc, width, height, nbr_circles);\n \n return dc.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`\n\nNow consider how this code could be modified to draw a spiral instead of a circle...\n\nHave 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.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"\n\n{\n let width = 400;\n let height = 400;\n\n const dc = DOM.context2d(width, height);\n \n var refresh = function(dc, width, height) // Sample code by Jim Bumgardner\n {\n dc.clearRect(0,0,width,height);\n\n dc.fillStyle='#000';\n var nbr_circles = 100;\n\n var angle_incr = 2 * Math.PI/180; // 2 degrees, converted to radians\n\n var cx = width/2;\n var cy = height/2;\n var outer_rad = width*.45;\n\n var sm_rad = 2;\n\n for (var i = 1; i <= nbr_circles; ++i) {\n var ratio = i/nbr_circles;\n var angle = i*angle_incr;\n var spiral_rad = ratio * outer_rad;\n var x = cx + Math.cos(angle) * spiral_rad;\n var y = cy + Math.sin(angle) * spiral_rad;\n\n // draw tiny circle at x,y\n dc.beginPath();\n dc.arc(x, y, sm_rad, 0, 2*Math.PI, false);\n dc.fill();\n }\n\n }\n \n refresh(dc, width, height);\n \n return dc.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`\nWe 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).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof spiral_incr = slider({min: 0, max: 180, step:0.5, value: 10, description: \"Spiral increment\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"\n\n{\n let width = 400;\n let height = 400;\n\n const dc = DOM.context2d(width, height);\n \n var refresh = function (dc, width, height, increment) // Sample code by Jim Bumgardner\n {\n dc.clearRect(0,0,width,height);\n\n dc.fillStyle='#000';\n var nbr_circles = 100;\n\n var angle_incr = increment * Math.PI/180;\n\n var cx = width/2;\n var cy = height/2;\n var outer_rad = width*.45;\n\n var sm_rad = 2;\n\n for (var i = 1; i <= nbr_circles; ++i) {\n var ratio = i/nbr_circles;\n var angle = i*angle_incr;\n var spiral_rad = ratio * outer_rad;\n var x = cx + Math.cos(angle) * spiral_rad;\n var y = cy + Math.sin(angle) * spiral_rad;\n\n // draw tiny circle at x,y\n dc.beginPath();\n dc.arc(x, y, sm_rad, 0, 2*Math.PI, false);\n dc.fill();\n }\n\n }\n \n refresh(dc, width, height, spiral_incr);\n \n return dc.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`Watch the following animation, in which I am continually increasing the increment, for a couple minutes: interesting things happen!.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"canvas = {\n let width = 400;\n let height = 400;\n let dc,canvas;\n if (this) canvas=this,dc = canvas.getContext(\"2d\");\n else { \n dc = DOM.context2d(width, height);\n canvas = dc.canvas;\n }\n dc.fillStyle = \"blue\";\n var angle_incr = increment*Math.PI/180;\n \n dc.clearRect(0,0,width,height);\n\n dc.fillStyle='#000';\n\n var nbr_circles = 100;\n var cx = width/2;\n var cy = height/2;\n var outer_rad = width*.45;\n\n var sm_rad = 2;\n\n for (var i = 1; i <= nbr_circles; ++i) {\n var ratio = i/nbr_circles;\n var angle = i*angle_incr;\n var spiral_rad = ratio * outer_rad;\n var x = cx + Math.cos(angle) * spiral_rad;\n var y = cy + Math.sin(angle) * spiral_rad;\n\n // draw tiny circle at x,y\n dc.beginPath();\n dc.arc(x, y, sm_rad, 0, 2*Math.PI, false);\n dc.fill();\n }\n yield canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"increment = { \n while (true) {\n for (var d = 0; d < 36000; d += 5) {\n yield Promises.delay(25, d / 100);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"tex`\\phi = { \\sqrt{5} - 1 \\over 2 }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`\n\n golden angle = 360 φ degrees, or 2 π φ radians\n\nExample 8 If we use that angle to produce a spiral, we get one of these\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"\n\n{\n let width = 400;\n let height = 400;\n\n const dc = DOM.context2d(width, height);\n \n var refresh = function(dc, width, height) // Sample code by Jim Bumgardner\n {\n dc.clearRect(0,0,width,height);\n\n dc.fillStyle='#000';\n var nbr_circles = 200;\n\n var phi = (Math.sqrt(5)+1)/2 - 1; // golden ratio\n var golden_angle = phi*2*Math.PI; // golden angle\n var lg_rad = width * .45;\n\n var sm_rad = 2;\n var cx = width/2;\n var cy = height/2;\n\n for (var i = 1; i <= nbr_circles; ++i) {\n dc.beginPath();\n var ratio = i/nbr_circles;\n var angle = i*golden_angle;\n var spiral_rad = ratio * lg_rad;\n var x = cx + Math.cos(angle) * spiral_rad;\n var y = cy + Math.sin(angle) * spiral_rad;\n dc.arc(x, y, sm_rad, 0, 2*Math.PI, false);\n dc.fill();\n }\n\n }\n \n refresh(dc, width, height);\n \n return dc.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`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. `\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$22","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$23","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$24","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`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!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof t = slider({min: 0, max: 360, value: 100, description: \"Animation phase\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$25","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W26","stdlib":"1"}