How to Draw a Quarter Circle in Processing
Circles, Spirals and Sunflowers
A Processing.js tutorial by Jim Bumgardner
In this tutorial, my aim is to prove you some fun ways to describe circles, and spirals, and ultimately, how to draw the interesting pattern yous see on sunflowers. All these techniques are described from a few basic facts about circles, which you probably learned (and forgot) a long time agone. Back in grade school, you may have learned these three equations:
D (bore) = 2 R
C (circumference) = two π R (or π D)
A (area) = π R2
While these equations are useful, they aren't actually needed to draw a circle. We'll brand use of them in a surprising way, below.
To depict a circle or anything, we are going to need a graphics framework. I'm going to use Processing.js. In that location is another version of this tutorial which uses the HTML5 Canvas directly, without Processing.js. Processing.js uses the HTML5 Canvas APIs under the hood. Therefore, if you are using an older web browser, like IE 8 or earlier, you're not going to see anything!
Instance 1 shows a basic black circle. I've made the code longer than it needs to be, to make information technology readable. Hither'southward what information technology looks like.
size(100, 100); smooth(); background(255); float cx = width/2; bladder cy = superlative/2; float diameter = width*.nine; fill up(0); ellipse(cx,cy,diameter,diameter);
The nearly complicated slice of this is the ellipse function, which is used to draw circles and ovals. Its parameters are
- cx, cy - the center coordinates of the circle you are drawing.
- width, height - the dimensions of the circle y'all are drawing. For circles (equally opposed to ovals) these 2 numbers are the same, and correspond to the bore of the circle.
Example 2 shows a more than complicated taijitu figure drawn using multiple filled circles (and one half circumvolve). This is a more advanced example and can exist skipped for at present. If you're curious almost information technology, click on the link for instance ii and scroll to the bottom of the lawmaking to read more about it. Later, effort reproducing it without looking at the code.
Note that if you utilize stroke() instead of fill(), you get an outlined circle, which looks like example iii.
At this signal, I would suggest, as a hands-on exercise, that you construct a sample web page that draws a circle using Processing.js. You tin use my 'case 3' code as a starting point - click on one of the examples and do a "view source" to see what'south going on. Afterwards that, take a interruption and come up back when you're feeling fresh!
Feeling refreshed? Smashing. You may be curious how the points on these circles are plotted.
In example 4, I've fatigued a big circumvolve out of modest circles, like a blackness pearl necklace. The are a number of ways to figure out how the points lie on a circle, but I normally 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(θ) R
These are the classic equations for converting from polar coordinates (bending and distance from some center signal) to cartesian coordinates (x and y). In these equations, cx and cy are the eye indicate of the circumvolve, R is the radius of the circle, and theta (θ) represents the angle going around the circle. In code, you normally supply the angle in radians, not degrees. The more familiar degrees become from 0 to 360. Radians go from 0 to 2π. To catechumen a number from degrees to radians, multiply it by a scaling abiding (π / 180), or only use the radians() function which is built into Processing. Note that the angle value y'all 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(θ) volition produce identical values for any two numbers which are 2π autonomously. The design 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 Processing.js, I apply these equations in a loop, to draw each betoken on the circle, like so:
for (int i = ane; i <= nbr_circles; ++i) { float angle = i * TWO_PI / nbr_circles; float x = cx + cos(bending) * lg_rad; float y = cy + sin(angle) * lg_rad; ellipse(x, y, sm_diam, sm_diam); } In this code, lg_rad is the radius of the large ring, and sm_diam is the diameter of the smaller circles I am cartoon in the ring. In society to make the circles only big enough to touch, I worked out the circumference of the large circle, and so divided it by the number of circles in the band. This is the diameter of the smaller circles.
bladder lg_diam = width * .85; // large circumvolve's diameter float lg_rad = lg_diam/2; // large circle's radius float lg_circ = PI * lg_diam; // large circumference float sm_diam = (lg_circ / nbr_circles); // small circle'southward diameter
By changing the value of nbr_circles, I can increment or subtract the number of circles in the ring, as in example 5. Try striking the play button on this example - you'll run across 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 iii. At those sizes, it would exist far more efficient to draw individual pixels, rather than niggling tiny circles!
While you take a pause, consider how this code could be modified to draw a spiral instead of a circle...
Accept you figured it out? The bones idea is that you change the value of the larger radius (what I was calling lg_rad) as y'all draw each indicate. Have a expect at the pertinent lines of code in example 6. In this case, as each dot is drawn, at an ever increasing radius, I as well increment the bending past but 2 degrees.
We can tighten the spiral past changing the amount we increment the angle during each step, as in example 7. Hit the play button to run into the consequence. In this example, nosotros start at a two degree increment, and so increase the angle by 1 degree per 2d (since in that location are 100 dots, the outer dot travels at 100 x 1 degrees or 100 degrees per second).
Lookout the above blitheness for a couple minutes: interesting things happen!. You will notice after almost 25 seconds, when the spiral has tightened upward, the dots form a spoked or starfish-like pattern. Then the arms fold in, and the dots form a rose-like configuration. And then the arms straighten out again, and yous run into another starfish. This keeps happening. When the starfish has iv arms, the angle increment is ninety degrees, or some multiple of 90 degrees like 270 degrees. The smallest angle that will give y'all iv artillery is 360/4 or 90 degrees. Similarly, the smallest bending that will get yous five arms is 360/5 or 72 degrees. 360/6 gives you six arms, 360/vii gives you 7 arms and so on. In other words, to go those starfish patterns, the bending increment has to be a rational fraction or (or "go evenly into") the full circumvolve (so they can line up to course 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 brand direct spokes. You get these rose patterns when the angle increase is an irrational fraction of the full circle. Mathematicans have demonstrated that there are far more than irrational numbers than rational ones, and intuitively, you lot can run across that there are more than roses than starfish in the blitheness.
There are a number of irrational angles that look especially overnice (endeavor the foursquare root of ii 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.five degrees (or 137.5 going the other manner). This is the golden angle, and it is closely related to φ (phi), the golden ratio.
More precisely:
φ = (sqrt(v) + 1) / ii - 1
golden bending = 360 φ degrees, or 2 π φ radians
If we use that angle to produce a screw, nosotros get 1 of these! Instance 8 is sometimes called a fibonacci spiral, because the gilded ratio is closely related to fibonacci numbers. I likewise call these phyllotaxy spirals, because the gold angle appears a lot in plant growth (it optimizes surface area to sunlight). Once you get-go noticing it, you lot'll see information technology in a lot of plants in addition to sunflowers, such as pino cones and agaves.
In the above case, you may take noticed that the dots are kind of tight in the center, and then get progressively farther apart as they go out. This is because the radial increment is constant, or linear. It would be absurd if we could figure out how to get them to pack tightly, like the seeds of a sunflower. It turns out, we already accept the mathematical tools to attain this!
Consider a big circle which is made upwardly of a agglomeration of tightly packed petty circles - circles and then tightly packed that no space remains. If all those little circles are the aforementioned size, and the area of the big circle is A, and then the surface area of the little circles, B = A/N, where N is the number of little circles.
As we grow a phyllotaxy screw, at each step Thou from 1 to Due north, we brand something very like a circle fabricated up of One thousand tiny circles. The area of that circle is B*Chiliad. Since we know that area = π R2, we can deduce the desired radius from the area. R = sqrt( expanse / π )
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 pocket-sized circles, and how far out to depict 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, nosotros utilize a fudge cistron which keeps the circles from overlapping by drawing them slightly smaller. I find drawing 87% of the perfect size works fine. This produces this effigy.
To get even closer to a sunflower, we can make the circles abound larger equally they grow outward. One way to easily accomplish this is by making the outer circles abound exactly the same amount as the inner circles shrink, and so that cumulatively, the area of the circles remains the aforementioned. Hither is an example.
Finally, we can use the processing variable frameCount to produce some cool animation effects with these patterns. Click and roll to the bottom of example 11 for more than info virtually how I did the color cycling. Have fun!
The side by side tutorial in this series is Double Rainbow All The Manner!.
Past the way, if yous are in the Los Angeles surface area, I'll exist education a couple of graphics and music programming workshops in Culver City, using the Processing language, in the next few weeks. More info here.
Privacy Policy
Contact Krazydad
pullenwhippyraton1972.blogspot.com
Source: https://krazydad.com/tutorials/circles_js/
0 Response to "How to Draw a Quarter Circle in Processing"
Post a Comment