Processing How to Draw a Circle
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 you see on sunflowers. All these techniques are described from a few bones facts about circles, which y'all probably learned (and forgot) a long time ago. Dorsum in grade school, you may have learned these three equations:
D (diameter) = two R
C (circumference) = 2 π R (or π D)
A (area) = π R2
While these equations are useful, they aren't actually needed to depict a circumvolve. We'll make apply of them in a surprising style, below.
To draw a circumvolve or anything, nosotros are going to need a graphics framework. I'm going to apply Processing.js. There is another version of this tutorial which uses the HTML5 Canvas direct, without Processing.js. Processing.js uses the HTML5 Canvas APIs under the hood. Therefore, if you are using an older web browser, similar IE 8 or earlier, you're not going to see annihilation!
Example 1 shows a basic black circle. I've made the code longer than it needs to exist, to make it readable. Here's what it looks like.
size(100, 100); smooth(); background(255); float cx = width/2; float cy = top/2; float bore = width*.nine; make full(0); ellipse(cx,cy,diameter,bore);
The most complicated slice of this is the ellipse function, which is used to draw circles and ovals. Its parameters are
- cx, cy - the centre coordinates of the circle you lot are cartoon.
- width, height - the dimensions of the circle you are drawing. For circles (as opposed to ovals) these 2 numbers are the same, and correspond to the bore of the circle.
Example 2 shows a more complicated taijitu figure drawn using multiple filled circles (and one one-half circle). This is a more advanced example and can exist skipped for at present. If y'all're curious almost information technology, click on the link for case 2 and whorl to the lesser of the code to read more about it. Subsequently, try reproducing it without looking at the code.
Note that if you employ stroke() instead of fill(), you get an outlined circumvolve, which looks like example iii.
At this point, I would suggest, as a hands-on exercise, that you construct a sample spider web folio that draws a circle using Processing.js. You tin can utilise my 'example 3' code as a starting point - click on one of the examples and practice a "view source" to run into what's going on. Subsequently that, have a break and come back when yous're feeling fresh!
Feeling refreshed? Swell. You may be curious how the points on these circles are plotted.
In case 4, I've fatigued a large circle out of small circles, similar a black pearl necklace. The are a number of means 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 every bit "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 altitude from some center betoken) to cartesian coordinates (10 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 lot normally supply the angle in radians, not degrees. The more familiar degrees go from 0 to 360. Radians go from 0 to 2π. To catechumen a number from degrees to radians, multiply it by a scaling constant (π / 180), or but apply the radians() function which is built into Processing. Note that the angle value you laissez passer 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 2 numbers which are 2π apart. 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 utilise these equations in a loop, to draw each point on the circle, like so:
for (int i = 1; i <= nbr_circles; ++i) { float bending = i * TWO_PI / nbr_circles; float 10 = cx + cos(angle) * 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 big ring, and sm_diam is the bore of the smaller circles I am drawing in the ring. In order to brand the circles simply large enough to touch, I worked out the circumference of the large circle, and and so divided information technology by the number of circles in the band. This is the diameter of the smaller circles.
bladder lg_diam = width * .85; // big circumvolve'due south bore float lg_rad = lg_diam/2; // large circle's radius float lg_circ = PI * lg_diam; // big circumference bladder sm_diam = (lg_circ / nbr_circles); // small circumvolve'southward diameter
Past changing the value of nbr_circles, I can increase or decrease the number of circles in the ring, equally in example v. Try striking the play button on this case - you'll come across the circles become smaller equally I increase the number with each frame. If I make the circles small plenty, information technology closely resembles the circular outline in example three. At those sizes, it would be far more efficient to draw individual pixels, rather than lilliputian tiny circles!
While y'all take a break, consider how this lawmaking could exist modified to draw a spiral instead of a circle...
Accept you figured it out? The basic idea is that you change the value of the larger radius (what I was calling lg_rad) as y'all describe each point. Take a wait at the pertinent lines of lawmaking in case six. In this instance, every bit each dot is drawn, at an always increasing radius, I also increment the angle by just 2 degrees.
We can tighten the spiral by changing the amount nosotros increment the angle during each footstep, as in example 7. Hit the play button to see the outcome. In this instance, nosotros offset at a 2 caste increment, and so increase the bending past 1 caste per second (since there are 100 dots, the outer dot travels at 100 x 1 degrees or 100 degrees per second).
Lookout man the above blitheness for a couple minutes: interesting things happen!. You volition notice after most 25 seconds, when the screw has tightened up, the dots course a spoked or starfish-like pattern. Then the arms fold in, and the dots form a rose-like configuration. So the arms straighten out again, and you encounter another starfish. This keeps happening. When the starfish has iv arms, the angle increase is 90 degrees, or some multiple of 90 degrees like 270 degrees. The smallest angle that will requite you four arms is 360/four or ninety degrees. Similarly, the smallest angle that will get you 5 arms is 360/5 or 72 degrees. 360/half dozen gives you lot six arms, 360/7 gives you seven arms and so on. In other words, to become those starfish patterns, the angle increment has to be a rational fraction or (or "go evenly into") the full circle (so they tin line up to course arms).
Between those starfish, which are produced by rational fractions of the circle, you lot go the rose-like patterns, in which the dots don't make directly spokes. You lot get these rose patterns when the angle increment is an irrational fraction of the total circle. Mathematicans have demonstrated that at that place are far more than irrational numbers than rational ones, and intuitively, you can encounter that there are more than roses than starfish in the blitheness.
In that location are a number of irrational angles that look peculiarly overnice (try the square root of ii times π or 4.442). The ane that produces the most optimal packing, and corresponds to the familiar sunflower arrangement is an bending of approximately 222.five degrees (or 137.5 going the other way). This is the golden angle, and it is closely related to φ (phi), the gilded ratio.
More precisely:
φ = (sqrt(5) + ane) / 2 - 1
gilt angle = 360 φ degrees, or 2 π φ radians
If we use that angle to produce a screw, we go one of these! Case 8 is sometimes chosen a fibonacci spiral, because the gilded ratio is closely related to fibonacci numbers. I besides call these phyllotaxy spirals, because the golden angle appears a lot in plant growth (it optimizes surface area to sunlight). One time you start noticing it, you'll see it in a lot of plants in addition to sunflowers, such as pino cones and agaves.
In the above example, you may accept noticed that the dots are kind of tight in the eye, and and then get progressively further apart as they go out. This is considering the radial increment is constant, or linear. It would exist cool if we could effigy out how to get them to pack tightly, like the seeds of a sunflower. It turns out, we already have the mathematical tools to reach this!
Consider a large circle which is made upwardly of a bunch of tightly packed niggling circles - circles so tightly packed that no space remains. If all those little circles are the same size, and the surface area of the large circumvolve is A, then the area of the niggling circles, B = A/N, where N is the number of little circles.
As we abound a phyllotaxy screw, at each step M from ane to N, nosotros make something very similar a circle made up of M tiny circles. The area of that circumvolve is B*Thousand. Since we know that area = π R2, we can deduce the desired radius from the area. R = sqrt( area / π )
Nosotros 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 i. 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 utilize a fudge factor which keeps the circles from overlapping past drawing them slightly smaller. I find cartoon 87% of the perfect size works fine. This produces this effigy.
To get even closer to a sunflower, we can make the circles grow larger as they grow outward. One mode to hands accomplish this is past 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.
Finally, nosotros can use the processing variable frameCount to produce some absurd animation effects with these patterns. Click and ringlet to the bottom of example 11 for more info well-nigh how I did the color cycling. Accept fun!
The side by side tutorial in this series is Double Rainbow All The Way!.
By the mode, if y'all are in the Los Angeles surface area, I'll exist teaching a couple of graphics and music programming workshops in Culver City, using the Processing linguistic communication, in the next few weeks. More info hither.
Privacy Policy
Contact Krazydad
Source: https://krazydad.com/tutorials/circles_js/
0 Response to "Processing How to Draw a Circle"
Enviar um comentário