The word trigonometry sometimes strikes fear into the hearts of people who struggled with maths at school. Fortunately, we do not need to revisit all of that. We are likely to need only two or three simple bits of knowledge. (See also the Processing Trigonometry Primer, which goes into a bit more detail.)
These knowledge scraps are, however, essential. You cannot go very far in constructing or modifying images in computer graphics if you do not know about sines and cosines, because without them you cannot even draw a circle. The smooth variations that can be produced using sines and cosines are also useful in many other ways, such as constructing more complex cyclic motions and Lissajous Curves. Sines and cosines are a really useful tool for all sorts of purposes, so take the time get it straight in your mind. It really is not that hard.
It's Really About Circles
Remember that a computer screen is normally [1] a rectangular array of pixels and in order to do something with a pixel (e.g. set its colour) we need to know its address. This is usually defined by counting columns in from the left side of the screen and rows down from the top of the screen. This defines a Cartesian coordinate system (named after Descartes who invented the idea). We also often informally refer to this type of addressing as an "x,y" coordinate system with, conventionally, x running horizontally and y vertically.
If we want to draw a circle of a certain radius on a computer screen we therefore need to work out the x,y coordinates of every pixel that needs to be turned from the background colour to the line colour and visit them in turn.
Look at the diagram on the right. We think about a circle as having a certain radius, R. Draw a line from the circle's centre to any point on the circumference. This line always has the length R. It makes an angle θ with the horizontal (the x-axis). Now imagine light coming from the top and think about the shadow of this line on the X axis. This has a certain length which we can calculate by using the Processing programming expression R*cos(θ). With light coming from the right, the shadow on the Y axis is calculated with the expression R*sin(θ). The functions sin() and cos() in Processing have been built to make this happen correctly.
As far as you are concerned, the Processing language provides the calculating machines sin() and cos() which take a number representing an angle (in this case θ), do some work, and then throw out a number representing a ratio of two lengths, as in cos(θ) = x/R or sin(θ)=y/R. These mathematical functions are set up just so they give these projected lengths (that is, the length of shadows). That is all they are. You do not have to know how this is done: it just works.
Hence, we can draw our circle by starting with θ at 0, working out x and y from R*cos(θ) and R*sin(θ) turn the pixel at the coordinates white than increase θ a little bit and do it again, and keep doing it until we go all the way round the circle and get back to the start. (We do of course have to take account of the fact that we normally count pixels from the top left of the screen, and we might want to draw the circle with a centre at an arbitrary point on the screen, but this is just adding the same offset to each x and y value.)
You may, at this point, have noticed that Processing provides the ellipse() function for drawing ellipses (of which circles are a special case). So why am I going on about needing sines and cosines to draw circles? Firstly, ellipse() will just be doing behind the scenes something similar to the recipe I have just described. Secondly, as we will find out in the example programs on this site, we often want to do more that just draw a circle, we may want to trace out the circumference of the circle step by step and draw some motif at each of the steps. Finally, there are natural extensions of this technique which we can use for drawing more complex curves. (See the Cyclic Motions and Lissajous Curves pages for examples and also Harmonics for a bit more understanding.)
It's Not the Whole Story
Just for completeness, we can also mention the tan() function provided by Processing, which is the ratio tan(θ) = y/x in the diagram above. This gives you the frequently useful short-cut way to work out y if you know x and vice versa, given the angle θ.
An important pitfall when you are dealing with tan() functions is that x can go right down to 0 when θ is 90 degrees (or π/2 radians), and, mathematically, tan(π/2) goes off to infinity. If you try calculating tan(PI/2.0) with Processing you will actually get -2.2877332x107 which corresponds to an angle very slightly larger than π/2 radians. (Remember that π/2 cannot be represented exactly on a computer because the digits of π go on forever, so you are always dealing with something slightly less or slightly more.)
There are other ways of finding x from y and vice versa which work when tan(π/2) gives up. We use the theorem of Pythagoras, which says that we must have x2+y2 = R2 because we have a right-angle triangle in the figure. So, we can always use the Processing expressions: x = sqrt( R*R - y*y );, or y = sqrt( R*R - x*x );. Using tan() (when it works) is normally faster and speed can be important when drawing dynamic images.
We shall admit that the full glory of trigonometry (which we have hardly touched) can get pretty complicated. You can, however, go a very long way with what we have just talked about.
Radians and All That?
One final subtlety. You are probably use to measuring angles in degrees. (360 degrees all around a circle.) Although degrees are a familiar scale of measurement (dating all the way back to ancient Babylonians) they are nevertheless an arbitrary unit and in fact rather inconvenient when doing mathematics and computing. Most calculations turn out to be easier if we measure angles using radians. This defines the angle by the distance around the circumference of a circle divided by its radius. So, in the diagram, the value of the angle in radians is just given by θ = c/R. Mathematicians like this because it is just a pure number - no arbitrary units - and the relationship of functions like sin() and cos() to the rest of mathematics then takes its simplest form. OK - we do not expect to get into these complications. You are just going to have to accept that this is the way things are for very good reasons, which, however, are not likely to give you much immediate benefit.
If we want to see an angle in familiar units we can always multiply by 180/π (and Processing has a built in constant PI with the predefined value 3.14156.... to make this type of thing easy). It is, however, very important that you only give values to Processing sin() and cos() function in radians - if you need to take your value in degrees and multiply by π/180 (because there are π radians going round a semi-circle, corresponding to 180 degrees).
- "Normally rectangular" - but not always. I would love to be able to design art for the Liquid Crystal displays made in the shape of a globe which have recently become available. Small versions are sometimes used for displaying the results of climate simulations - or more often in large sizes for advertising in very high end shopping malls. Unfortunately these are still niche technologies and rather expensive. We are also beginning to see the introduction of flexible organic displays and the military are already looking at chameleon-like camouflage clothing that will adapt to surroundings. Clearly lots of fun to come, but not yet.