|
Chapter: Visual
Representations
of Code  Drawing
Aliasing
You might have noticed that the ellipse is looking a bit pixelated and
not very smooth this effect is known as aliasing and is often
counteracted with the effect of anti-aliasing which creates the
impression of a smoother looking rendering. Fortunately in Processing
we have a function that is made exactly for the purpose of making the
contents of a sketch look smoother. Add the following statement to the
first part of the sketch just after the size() function:
smooth();
The smooth() function does not accept any parameters but still requires
parenthesis, it's also worth noting that although using the smooth()
function will make your geometry appear smoother it might come at the
expense of slowing down the rate at which your sketch runs. By default
a Processing sketch will try to update itself 60 times in one second
(if a function such as draw() is used), this allows for smooth looking
motion and almost instantaneous interactive results. We are creating
what is known as a static sketch which does not involve any
interactivity or animation, so using the smooth() function in this
situation should not greatly influence the sketches performance.
Smile
The ellipse needs a smile in order to make it into a smiley face. We
will use an arc to draw the smile, the main reason we are using an arc
is firstly to introduce the arc() function but more importantly it's an
opportunity to explore working with angles in Processing.
Angles in Processing
In mathematics angles are usually measured in either degrees or
radians, Processing and many other programming languages generally
accept both units of measurements but prefer the latter. One of the
main reasons most programming languages prefer measuring angles in
radians is because radians work well with the value known as PI
(pronounced py rhymes with “try”) which can be represented in
mathematical notation as π. PI is a number that has the approximate
value 3.1415927 (calculated to seven decimal places). The actual number
that PI represents in programming is not quite as important as it's
mathematical equivalent, subsequently we will generally never need to
remember what this number is in programming but rather what the
language we are choosing to use it in, represents it as. In Processing
the value of π is represented by the mathematical constant PI. To
Processing and many other programming languages a constant is a value
that does not change, as a result it makes sense for the Processing
representation of pi to be a constant. Pi has always been the same
value long before Archimedes approximated it's value in the 200's BC as
it's implication in the construction of many architectural wonders of
human ingenuity from as far back as the Egyptian pyramids and even
further back in human history suggests, and it's highly unlikely that
pi could be used to represent any other value. So what does it mean?
Pi is the ratio of the circumference of a circle to it's diameter, and
pi radians is also equal to approximately 180 degrees. Pi can be
expressed mathematically as:
π = C/d
Where C is the circumference of a circle and d is the diameter of a
circle.
So how do we use this information about pi to work with radians and
degrees? Well we already know that pi radians is equal to 180 degrees
so that means twice pi radians (or you might be more familiar with the
mathematical notation 2πr) is equal to a full revolution or 360
degrees, or as the value is referred to in Processing TWO_PI.
Processing also has other mathematical constants to represent pi in
other useful quantities such as HALF_PI which is approximately
equivalent to 90 degrees and finally QUARTER_PI. But what about all the
other infinite angles how do we reference these values in Processing?
You could either type them out explicitly as radians or if you know
their approximate equivalent in degrees you can use a formula to
convert the value from degrees to radians:
radians = (π/180)*angle in degrees
For example if we had the angle 270 degrees and we needed this in
radians so that we could use it in our Processing sketch we could
either use the mathematical constants Processing provides us with and
type the following expression:
PI + HALF_PI
This expression would return the equivalent of 270 degrees in radians.
Or we could use the above mentioned formula and type the following
expression, which would also return the equivalent of 270 degrees in
radians:
(PI/180)270
Remember that because there is no mathematical operator between 270 and
the right closing parenthesis character the value of what is in
parenthesis must be multiplied by 270, this will return the equivalent
of 270 degrees in radians.
However there is a simpler method of converting degrees to radians in
Processing, and that is to use the radians() function. If you know the
value of the angle in degrees and want to convert it to radians you can
simply use the known value as a parameter of the radians() function and
Processing will use the above mentioned formula to calculate the
equivalent value in radians for you. For example:
radians(270);
This will convert 270 degrees to it's equivalent in radians. One of the
main reasons why angles in Processing are converted to radians is
because all trigonometric functions that require angles as an input
accept these values in radians.
Getting the
hang of working with radians at first might be a little tricky if you
are used to degrees, but if you think of them in terms of pi they can
be a lot easier to work with.
The arc() function in processing accepts six parameters in the format
arc(x, y, width, height, start, stop)
You are already familiar with the first four parameters X and Y
determine the origin of the arc and this can be further
controlled with the ellipseMode() function. The width and height
parameters represent the dimensions of the arc in much the same way
that these parameters, determine the dimensions of an ellipse. The last
two parameters you might not be familiar with, the start and stop
parameters determine the beginning and ending angles of the arc. For
example, we are attempting to draw a half circle to represent a smile
which, as you know, can be expressed with angles between 0 and 180
degrees. Secondly, because we want our smile to resemble the shape of a
horseshoe pointing upwards we will start it at 0 and end it at PI
(which is approximately 180 degrees). This means that the arc will be
drawn between the start and stop parameters and the other parameters
are used to determine the dimensions of the arc and the arc's position.
Add the following statement to your sketch following the ellipse
statement:
arc(width/2, height/2, 50, 50, 0, PI);
A Smile on the
“Hello World” Program.
|
|
Previous