Lesson 5 – Putting It All Together
Chapter
13 – Mathematics
Chapter
13 -
In This Chapter
Probability
Perlin Noise
Trigonometry
13.1 Mathematics and Programming
This chapter aims to take a relxed and
friendly approach to a few useful topics mathematics that will help us aling the journey of developing Processing
sketches.
For example :
13.2 Modulus
Modulus is a very simple concept (one
13.2 Modulus
The modulo operator calculates the
remainder when one number is divided by enother.
13.2 Modulus
Example :
20 divided by 6 equals 3 reminder 2.
(in other words: 6*3 + 2 = 18 + 2 = 20)
Therefore
13.2 Modulus
Here are a few more, with some
13.2 Modulus
You will notice that if A = B % C, A can
never be larger than C.
The remainder can never be larger than
13.2 Modulus
Therefore, modulo can be used whenever you need to cycle a counter variable back to zero.
The following lines of code :
can be replaced by :
x = x + 1;
if (x >=
limit){
x = 0;
}
x = x + 1;
if (x >=
limit){
x = 0;
}
x = (x + 1) %
limit
13.2 Modulus
13.2 Modulus
13.2 Modulus
13.3 Random Numbers
Processing random number generator
produces what is known as a “uniform” distribution of numbers.
For example:
If we ask for a random number between
13.3 Random Numbers
Pseudo-Random Numbers
The randon number we get from random() function are not truly random and are known as “pseudo-random”.
They are the result of a mathematical function that simulates randomness.
13.3 Random Numbers
Example 13-2: Random number
13.3 Random Numbers
Example 13-2: Random number
13.3 Random Numbers
Example 13-2: Random number
13.4 Probability Review
Given a system with a certain number of
13.4 Probability Review
The simples example is a coin toss.
There are a total of two possible
outcomes (heads or tails).
There is only one way to fip heads,
13.4 Probability Review
Consider a deck of 52 cards. The
probability of drawing an ace from that deck is:
Number of aces/number of cards =
4/52 = 0.077 = ~8%
The probability of drawing a diamond is :
Number of diamonds/number of
13.4 Probability Review
We can also calculate the propability of
multiple events occuring in sequence as the product of the individual probabilities of each event.
The probability of a coin fipping up
heads three times in a row is:
13.4 Probability Review
We can also calculate the propability of
multiple events occuring in sequence as the product of the individual probabilities of each event.
The probability of a coin fipping up
heads three times in a row is:
13.4 Probability Review
Exercise 13-1: What is the probability
13.5 Event Probability in Code
There are few diferent techniques for
using the random() function with probability in code.
For example, if we fll an array with a
13.5 Event Probability in Code
13.5 Event Probability in Code
This same technique can also be applied
to multiple outcomes.
Outcome A – 60% | Outcome B –
10%| Outcome C – 30%
To implement this in code, we pick one
random foat and check where it falls. Between 0.00 and 0.60 (60%)
Between 0.60 and 0.70 (10%)
13.5 Event Probability in Code
Example 13-3 draws a circle with a three
13.5 Event Probability in Code
13.5 Event Probability in Code
13.5 Event Probability in Code
13.5 Event Probability in Code
13.6 Perlin Noise
One of the qualities of a good random
number generator is that the numbers produced appear to have no relationship.
If they exhibit no discernible pattern,
13.6 Perlin Noise
In programming behaviours that have an
organic, almost lifelife quality, a little bit of randomness is a good thing.
This is the approach taken by Ken Perlin,
13.6 Perlin Noise
It was originally designed to create
procedural textures, for which Ken Perlin won an Academy Award for Technical Achievement.
Perlin noise can be used to generate a
13.6 Perlin Noise
Figure 13.3 shows two graphs, -a graph
13.6 Perlin Noise
Processing has a built-in implementation of
the Perlin noise algorithm with the function noise( ) .
The noise() function takes one, two, or
three arguments (referring to the “ space ” in which noise is computed: one, two, or three dimensions).
One-dimensional Perlin noise produces as a
13.6 Perlin Noise
13.6 Perlin Noise
13.6 Perlin Noise
13.8 Trigonometri
Sohcahtoa. Strangly enough, this
seemingly nonsense word, Sohcahtoa, is the foundation for a lot of computer graphics work.
Any time you need to calculate an angle,
13.8 Trigonometri
Trigonometry is the study of the
relationships between the sides and angles of triangles and Sohcahtoa is a mnemonic device for remembering the defnitions of the trigonometric functions, sine, cosine, and tangent.
13.8 Trigonometri
Soh : sine = opposite/hypotenuse
Cah : cosine = adjacent/hypotenuse
13.8 Trigonometri
13.8 Trigonometri
13.8 Trigonometri
13.8 Trigonometri
13.10 Recursion
In 1975, Benoit Mandelbrot coined the term
fractal to describe self-similar shapes found in nature.
Much of the stuf we encounter in our physical
13.10 Recursion
Functions that call themselves are recursive and are appropriate for solving diferent types of problems.
This occurs in mathematical calculations;
the most common example of this is “ factorial. ”
13.10 Recursion
13.10 Recursion
13.10 Recursion
13.10 Recursion
With a teeny bit more code, we
could add a circle above and below.
Chapter
Objectives
In this chapter:
2D and 3D translation
Using P3D and OpenGL
Vertex shapes
2D and 3D rotation
Saving the transformation state in the
14.1 The Z-Axis
In three-dimensional space (such as the
actual, real-world space where you are reading this book), a third axis (commonly referred to as the Z-axis) refers to depth of any given point.
In Processing sketch windos, a
14.1 The Z-Axis
Scratching your head is a perfectly
reasonable response here. (after all, a computer window is only two dimensional)
In this chapter, we will exemanie how
14.1 The Z-Axis
Example 14-1: A growing rectangle,
14.1 The Z-Axis
Example 14-1: A growing rectangle,
14.1 The Z-Axis
Is this rectangle fying of the computer
screen about to bump into your nose?
Technically, this is of course not the
case.
It is simboly a rectangle growing in size.
14.1 The Z-Axis
If we choose to use 3D coordinates, Processing will create will create the illusion for us.
While the idea of a third dimension on a
fat computer monitor may seem imaginary, it is quite real for Processing
Processing knows about perspective, and
14.1 The Z-Axis
In order to specify points in three
dimensions, the coordinates are specifed in the order you would expect: x, y, z.
Cartesian 3D systems can be described
as “left-handed” or “right-handed”.
If you use your right hand to point your
14.1 The Z-Axis
In Processing, the system is left-handed,
14.1 The Z-Axis
Our frst goal is to rewrite Example 14-1
using 3D capabilities of Processing.
Assume the following variables:
Int x = width/2;
Int y = height/2;
Int z = 0;
14.1 The Z-Axis
In order to specify the location for a
rectangle, the rect() function takes four arguments: an x location, a y location, a width, and a height.
14.1 The Z-Axis
Our frst instict might be to add another
14.1 The Z-Axis
The Processing reference page for rect(), however, does not allow for this possibility.
In order to specify 3D coordinates for shape in the Processing world, we must learn to use a new function, called translate().
14.1 The Z-Axis
The function translate() moves the origin point-(0,0)- relative to its previous state.
We know that when a sketch frst starts, the origin point lives on the top left of the window.
14.1 The Z-Axis
Where is the origin?
The “origin” in a Processing sketch is the
poin (0,0) in two dimensions or (0,0,0) in three dimensions.
It is always at the top left corner of the
windows unless you move it using
14.1 The Z-Axis
You can think of it as moving a pen around the screen, where the pen indicates the origin point.
In addition, the origin always resets itself back to the top left corner at the beginning of draw().
Any calls to translate() only apply to the current cycle through the draw() loop.
14.1 The Z-Axis
14.1 The Z-Axis
14.1 The Z-Axis
14.1 The Z-Axis
14.1 The Z-Axis
Now that we understand how
translate() words, we can return to the original problem of specifying 3D coordinates.
Translate(), unlike rect(), ellipse()
14.1 The Z-Axis
The above code translates 50 units along the
Z-axis, and then draws rectangle at (100,100).
14.1 The Z-Axis
Finally, we can use a variable for the Z
14.1 The Z-Axis
Example 14-3: A rectangle moving
14.1 The Z-Axis
Example 14-3: A rectangle moving
14.1 The Z-Axis
Example 14-3: A rectangle moving
14.1 The Z-Axis
Exercise 14-1: Fill in the appropriate
translate() function to create this pattern. Once you are fnished, try adding a third argument to translate()
14.1 The Z-Axis
The translate() function is particularly
useful when you are drawing a collection of shapes relative to a given centerpoint.
Harking back to a Zoog from the frst 10
14.1 The Z-Axis
The display() function above draws all
Zoog’s parts (body and head, etc) relative to Zoog’s x,y location.
It requires that x and y be used in both
