1. How About Some PI?
Trigonometry
Feb 18,2009

2. Trigonometry

3. Angles and Waves Angles can be measured in degrees or radians
Pi is the ratio of the circumference of a circle to its diameter
Angles can be converted from degrees to radians with radians()
Angles can be converted from radians to degrees with degrees()

4. Sine

5. Sine Wave in Processing
Angles are specified in radians in sin() and cos() functions
size(700, 100);
noStroke();
fill(0);
float angle = 0.0;
for (int x = 0; x <= width; x += 5) {
float y = height/2 + (sin(angle) * height/3);
rect(x, y, 2, 4);
angle += PI/20.0; }

6. Cosine too size(700, 100); noStroke(); fill(0); float angle = 0.0;
for (int x = 0; x <= width; x += 5) {
float y1 = height/2 + (sin(angle) * height/3);
float y2 = height/2 + (cos(angle) * height/3);
fill(255,0,0);
rect(x, y1, 2, 4);
fill(0,0,255);
rect(x, y2, 2, 4);
angle += PI/20.0; }

7. Animate It void setup() { size(700, 100); noStroke(); fill(0); }
float angle = 0.0;
void draw() {
background(255);
for (int x = 0; x <= width; x += 5) {
float y1 = height/2 + (sin(angle) * height/3);
float y2 = height/2 + (cos(angle) * height/3);
fill(255,0,0);
rect(x, y1, 2, 4);
fill(0,0,255);
rect(x, y2, 2, 4);
angle += PI/20.0;

8. Animation 2 void setup() { size(700, 100); ellipseMode(CENTER);
fill(0); }
float angle = 0.0;
float time = 0;
float yPos = 0;
void draw() {
background(255);
yPos = height/2 +(height/2.5)*sin(angle);
ellipse(time, yPos, 20, 20);
if (time>width) {
time=0;
time += 5;
angle += PI/20.0;

9. The Last One void setup() { size(200,200); noStroke(); smooth(); }
float radius = 1.0;
int deg = 0;
float increment=random(20);
void draw() {
float angle = radians(deg);
float x = width/2 + (cos(angle) * radius);
float y = height/2 + (sin(angle) * radius);
ellipse(x, y, 6, 6);
deg += 11;
if(radius>width/2+1) {
radius=0;
increment=random(20);
radius = radius ;

10. Lab Exercise
Fill the canvas with a regular, repeating pattern that uses the sine function. Do the same with a cosine function.