Shiffman Daniel. Learning processing
Подождите немного. Документ загружается.
202 Learning Processing
And most recently, in Chapter 10, we tested intersection using the Pythagorean eorem.
float d = dist(x1,x2,y1,y2);
ese are just a few examples we have seen so far and as you get more and more advanced, you may even
fi nd yourself online, late at night, googling “ Sinusoidal Spiral Inverse Curve. ” For now, we will start with a
selection of useful mathematical topics.
13.2 Modulus
We begin with a discussion of the modulo operator , written as a percent sign, in Processing. Modulus is a
very simple concept (one that you learned without referring to it by name when you fi rst studied division)
that is incredibly useful for keeping a number within a certain boundary (a shape on the screen, an index
value within the range of an array, etc.) e modulo operator calculates the remainder when one number
is divided by another. It works with both integers and fl oats.
20 divided by 6 equals 3 remainder 2. (In other words: 6*3 ⴙ 2 ⴝ 1 8 ⴙ 2 ⴝ 20.)
therefore:
20 modulo 6 equals 2 or 20 % 6 ⴝ 2
Here are a few more, with some blanks for you to fi ll in.
17 divided by 4 equals 4 remainder 1
17 % 4 1
3 divided by 5 equals 0 remainder 3
3 % 5 3
10 divided by 3.75 equals 2 remainder 2.5
10.0 % 3.75 2.5
100 divided by 50 equals ___________ remainder ______ _________
100 % 40 ____________
9.25 divided by 0.5 equals ___________ remainder _______________
9.25 % 0.5 ______ _____
You will notice that if A B % C , A can never be larger than C . e remainder can never be larger than
the divisor.
0 % 3 0
1 % 3 1
2 % 3 2
3 % 3 0
4 % 3 1
etc .
Mathematics 203
erefore, modulo can be used whenever you need to cycle a counter variable back to zero. e following
lines of code:
x = x + 1;
if (x > = limit) {
x = 0;
}
can be replaced by:
x = (x + 1) % limit;
is is very useful if you want to count through the elements of an array one at a time, always returning to
0 when you get to the length of the array.
Example 13-1: Modulo
// 4 random numbers
float[] randoms = new float[4];
int index = 0; // Which number are we using
void setup() {
size(200,200);
// Fill array with random values
for (int i = 0; i < randoms.length; i + + ){
randoms[i] = random(0,256);
}
frameRate(1);
}
void draw() {
// Every frame we access one element of the array
background(randoms[index]);
// And then go on to the next one
index = (index + 1) % randoms.length;
}
13.3 Random Numbers
In Chapter 4, we were introduced to the random( ) function, which allowed us to randomly fi ll variables.
Processing’s random number generator produces what is known as a “ uniform ” distribution of numbers. For
example, if we ask for a random number between 0 and 9, 0 will come up 10% of the time, 1 will come
up 10% of the time, 2 will come up 10% of the time, and so on. We could write a simple sketch using an
array to prove this fact. See Example 13-2 .
Pseudo-Random Numbers
e random numbers we get from the random( ) function are not truly random and are known as
“ pseudo-random. ” ey are the result of a mathematical function that simulates randomness. is
function would yield a pattern over time, but that time period is so long that for us, it is just as
good as pure randomness!
Using the modulo operator
to cycle a counter back to 0.
204 Learning Processing
Example 13-2: Random number distribution
// An array to keep track of how often random numbers are picked.
float[] randomCounts;
void setup() {
size(200,200);
randomCounts = new float[20];
}
void draw() {
background(255);
// Pick a random number and increase the count
int index = int(random(randomCounts.length));
randomCounts[index] + + ;
// Draw a rectangle to graph results
stroke(0);
fill(175);
for (int x = 0; x < randomCounts.length; x + + ) {
rect(x*10,0,9,randomCounts[x]);
}
}
With a few tricks, we can change the way we use random( ) to produce a nonuniform distribution of
random numbers and generate probabilities for certain events to occur. For example, what if we wanted
to create a sketch where the background color had a 10% chance of being green and a 90% chance of
being blue?
13.4 Probability Review
Let’s review the basic principles of probability, fi rst looking at single event probability, that is, the
likelihood of something to occur.
Given a system with a certain number of possible outcomes, the probability of any given event occurring
is the number of outcomes which qualify as that event divided by total number of possible outcomes. e
simplest example is a coin toss. ere are a total of two possible outcomes (heads or tails). ere is only
one way to fl ip heads, therefore the probability of heads is one divided by two, that is, 1/2 or 50%.
Consider a deck of 52 cards. e probability of drawing an ace from that deck is:
number of aces/number of cards ⴝ 4/52 ⴝ 0.077 ⴝ ⬃ 8%
e probability of drawing a diamond is:
number of diamonds/number of cards ⴝ 13/52 ⴝ 0.25 ⴝ 2 5 %
We can also calculate the probability of multiple events occurring in sequence as the product of the
individual probabilities of each event.
fi g. 13.1
Mathematics 205
e probability of a coin fl ipping up heads three times in a row is:
(1/2) * (1/2) * (1/2) ⴝ 1/8 (or 0.125).
In other words, a coin will land heads three times in a row one out of eight times (with each “ time ” being
three tosses).
13.5 Event Probability in Code
ere are few diff erent techniques for using the random( ) function with probability in code. For example,
if we fi ll an array with a selection of numbers (some repeated), we can randomly pick from that array and
generate events based on what we select.
int[] stuff = new int[5];
stuff[0] = 1;
stuff[1] = 1;
stuff[2] = 2;
stuff[3] = 3;
stuff[4] = 3;
int index = int(random(stuff.length));
if (stuff[index] == 1) {
// do something
}
If you run this code, there will be a 40% chance of selecting the value 1, a 20% chance of selecting the
value 2, and a 40% chance of selecting the value 3.
Another strategy is to ask for a random number (for simplicity, we consider random fl oating point values
between 0 and 1) and only allow the event to happen if the random number we pick is within a certain
range. For example:
float prob = 0.10; // A probability of 10%
float r = random(l); // A random floating point value between 0 and 1
if (r < prob) { // If our random is less than .1
/*INSTIGATE THE EVENT HERE*/
}
is same technique can also be applied to multiple outcomes.
Outcome A — 60% | Outcome B — 10% | Outcome C — 30%
______________________________________
Exercise 13-1: What is the probability of drawing two aces in a row from the deck of cards?
This code will only be executed 10% of
the time.
Picking a random element from an array.
206 Learning Processing
To implement this in code, we pick one random fl oat and check where it falls.
• Between 0.00 and 0.60 (10%) → outcome A.
• Between 0.60 and 0.70 (60%) → outcome B.
• Between 0.70 and 1.00 (30%) → outcome C .
Example 13-3 draws a circle with a three diff erent colors, each with the above probability (red: 60%,
green: 10%, blue: 30%). is example is displayed in Figure 13.2 .
Example 13-3: Probabilities
void setup() {
size(200,200);
background(255);
smooth();
noStroke();
}
void draw() {
// Probabilities for 3 different cases
// These need to add up to 100%!
float red_prob = 0.60; // 60% chance of red color
float green_prob = 0.10; // 10% chance of green color
float blue_prob = 0.30; // 30% chance of blue color
float num = random(1); // pick a random number between 0 and 1
// If random number is less than .6
if (num < red_prob) {
fill(255,53,2,150);
// If random number is between .6 and .7
} else if (num < green_prob + red_prob) {
fill(156,255,28,150);
// All other cases (i.e. between .7 and 1.0)
} else {
fill(10,52,178,150);
}
ellipse(random(width),random(height),64,64);
}
fi g. 13.2
float y = 100;
void setup() {
size(200,200);
smooth();
}
Exercise 13-2: Fill in the blanks in the following code so that the circle has a 10% chance of
moving up, a 20% chance of moving down, and a 70% chance of doing nothing.
Mathematics 207
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, they are considered random .
In programming behaviors that have an organic, almost lifelife quality, a little bit of randomness is a good
thing. However, we do not want too much randomness. is is the approach taken by Ken Perlin, who
developed a function in the early 1980’s entitled “ Perlin noise ” that produces a naturally ordered (i.e.,
“ smooth ” ) sequence of pseudo-random numbers. 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 variety of interesting eff ects including clouds, landscapes, marble textures, and so on.
Figure 13.3 shows two graphs,—a graph of Perlin noise over time (the x -axis represents time; note how
the curve is smooth) compared to a graph of pure random numbers over time. (Visit this book’s web site
for the code that generated these graphs.)
Perlin Noise Random
fi g. 13.3
void draw() {
background(0);
float r = random(1);
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
ellipse(width/2,y,16,16);
}
208 Learning Processing
Processing has a built-in implementation of the Perlin noise algorithm with the function noise( ) . e
noise( ) function takes one, two, or three arguments (referring to the “ space ” in which noise is computed:
one, two, or three dimensions). is chapter will look at one-dimensional noise only. Visit the Processing
web site for further information about two-dimensional and three-dimensional noise.
One-dimensional Perlin noise produces as a linear sequence of values over time. For example:
0.364, 0.363, 0.363, 0.364, 0.365
Note how the numbers move up or down randomly, but stay close to the value of their predecessor. Now,
in order to get these numbers out of Processing , we have to do two things: (1) call the function noise( ) , and
(2) pass in as an argument the current “ time. ” We would typically start at time t 0 and therefore call the
function like so: “ noise(t); ”
float t = 0.0;
float noisevalue = noise(t); // Noise at time 0
We can also take the above code and run it looping in draw( ) .
float t = 0.0;
void draw() {
float noisevalue = noise(t);
println(noisevalue);
}
e above code results in the same value printed over and over. is is because we are asking for the
result of the noise( ) function at the same point in “ time ” —0.0—over and over. If we increment the “ time ”
variable t, however, we will get a diff erent result.
float t = 0.0;
void draw() {
float noisevalue = noise(t);
println(noisevalue);
t + = 0.01;
}
Noise Detail
If you visit the Processing.org noise reference, you will fi nd that noise is calculated over several
“ octaves. ” You can change the number of octaves and their relative importance by calling
the noiseDetail( ) function. is, in turn, can change how the noise function behaves.
See http://processing.org/reference/noiseDetail_.html.
You can read more about how noise works from Ken Perlin himself:
http://www.noisemachine.com/talk1/.
Time moves forward!
Output:
0.28515625
0.28515625
0.28515625
0.28515625
Output:
0.12609221
0.12697512
0.12972163
0.13423012
0.1403218
Mathematics 209
How quickly we increment t also aff ects the smoothness of the noise. Try running the code several times,
incrementing t by 0.01, 0.02, 0.05, 0.1, 0.0001, and so on.
By now, you may have noticed that noise( ) always returns a fl oating point value between 0 and 1. is
detail cannot be overlooked, as it aff ects how we use Perlin noise in a Processing sketch. Example 13-4
assigns the result of the noise( ) function to the size of a circle. e noise value is scaled by multiplying
by the width of the window. If the width is 200, and the range of noise( ) is between 0.0 and 1.0, the
range of noise( ) multiplied by the width is 0.0 to 200.0. is is illustrated by the table below and by
Example 13-4 .
Noise Value Multiplied by Equals
0 200 0
0.12 200 24
0.57 200 114
0.89 200 178
1 200 200
Example 13-4: Perlin noise
float time = 0.0;
float increment = 0.01;
void setup() {
size(200,200);
smooth(); {
void draw() {
background(255);
float n = noise(time)*width;
// With each cycle, increment the "time"
time + = increment;
// Draw the ellipse with size determined by Perlin noise
fill(0);
ellipse(width/2,height/2,n,n);
}
fi g. 13.4
Get a noise value at “time” and scale
it according to the window’s width.
210 Learning Processing
90°
0°45 °
180°
360°
fi g. 13.5
// Noise " time " variables
float xtime = 0.0;
float ytime = 100.0;
float increment = 0.01;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(0);
float x = ____________________________________;
float y = ____________________________________;
____________________________________;
____________________________________;
// Draw the ellipse with size determined by Perlin noise
fill(200);
ellipse(__________,__________,__________,__________);
}
Exercise 13-3: Complete the following code which uses Perlin noise to set the location of
a circle. Run the code. Does the circle appear to be moving “ naturally ” ?
13.7 Angles
Some of the examples in this book will require a basic understanding of how angles are defi ned in
Processing. In Chapter 14 , for example, we will need to know about angles in order to feel comfortable
using the rotate( ) function to rotate and spin objects.
In order to get ready for these upcoming examples, we need to learn about radians and degrees . It is likely
you are familiar with the concept of an angle in degrees. A full rotation goes from zero to 360
°
. An angle
of 90
°
(a right angle) is one-fourth of 360
°
, shown in Figure 13.5 as two perpendicular lines.
In this sketch, we want to use noise for
two different values. So that the output
of the noise function is not identical,
we start at two different points in time.
Mathematics 211
It is fairly intuitive for us to think angles in terms of degrees. For
example, the rectangle in Figure 13.6 is rotated 45 ° around its center.
Processing , however, requires angles to be specifi ed in radians . A radian is a
unit of measurement for angles defi ned by the ratio of the length of the arc
of a circle to the radius of that circle. One radian is the angle at which that
ratio equals one (see Figure 13.7 ). An angle of 180° PI radians. An angle
of 360 ° 2*PI radians, and 90 ° PI/2 radians, and so on.
fi g. 13.6
arc length radius
radius
angle 1 radian
fi g. 13.7
PI, What Is It?
e mathematical constant PI (or π ) is a real number defi ned as the ratio of a circle’s circumference
(the distance around the perimeter) to its diameter (a straight line that passes through the circle
center). It is equal to approximately 3.14159.
e formula to convert from degrees to radians is:
Radians 2 * PI * (degrees/360)
Fortunately for us, if we prefer to think in degrees but code with radians, Processing makes this easy. e
radians( ) function will automatically convert values from degrees to radians. In addition, the constants PI
and TWO_PI are available for convenient access to these commonly used numbers (equivalent to 180 °
and 360 ° , respectively). e following code, for example, will rotate shapes by 60 ° (rotation will be fully
explored in the next chapter).
float angle = radians(60);
rotate(angle);