Course Number: ARTD 275
Course Name: Time Arts II
Professor: Mr. Bart Woodstrup

Example Processing code from class lectures

1. Draw a point(x, y) on the screen:

size(300, 300);
background(127);
point(50, 50);

2. Draw a row of points:

size(300, 300);
background(127);
point(50, 50);
point(100, 100);
point(150, 150);
point(200, 200);
point(250, 250);

3. Draw a line(x1, y1, x2, y2) on the screen:

size(300, 300);
background(127);
line(50, 50, 250, 250);

4. Draw a box with lines:

size(300, 300);
background(127);
line(50, 50, 50, 250);
line(50, 250, 250, 250);
line(250, 250, 250, 50);
line(250, 50, 50, 50);

5. Change the stroke of the line:

size(300, 300);
background(127);
strokeWeight(5);
line(50, 50, 50, 250);
line(50, 250, 250, 250);
line(250, 250, 250, 50);
line(250, 50, 50, 50);

6. Draw using rect(x, y, width, height)

size(300, 300);
background(127);
rect(50, 50, 200, 200);

7. Introduce rectMode(CENTER) also try CORNER, CORNERS, CENTER, or RADIUS

size(300, 300);
background(127);
rectMode(CENTER);
rect(150, 150, 200, 200);

8. Change the fill() color and introduce width and height (and some math) and ORDERING!
   

size(300, 300);
background(127);
rectMode(CENTER);
rect(width/2, height/2, 200, 200);
rectMode(CORNER);
fill(255);rect(100, 100, 100, 100);
fill(0);
rect(125, 125, 50, 50);

9. Introduce RGB and alpha fill(r, g, b, a)
   

size(300, 300);
background(127);
rectMode(CENTER);
rect(width/2, height/2, 200, 200);
rectMode(CORNER);
fill(0, 0, 127, 255);
rect(100, 100, 100, 100);
fill(255, 0, 0, 128);
rect(125, 125, 50, 50);

How hard is it to pick an exact color in RGB? How would you make orange?

fill(255, 128, 0, 255);

10. Introduce HSB colorMode(mode, range1, range2, range3) Also, noStroke.

size(300, 300);
noStroke();
colorMode(HSB, 360, 100, 100);
background(360, 0, 100);
fill(180, 50, 50);
rectMode(CENTER);
rect(width/2, height/2, 200, 200);
fill(180, 100, 50);
rect(width/2, height/2, 100, 100);
fill(180, 50, 100);
rect(width/2, height/2, 50, 50);
fill(180, 0, 50);
rect(width/2, height/2, 25, 25);

11. Use mouse to scan hue and saturation (Introduce continuous mode and map() )

void setup()
{
size(360, 360);
colorMode(HSB, 360, 100, 100);
}

void draw()
{
int y = mouseY;
background(mouseX, map(y, 0, 100, 100, 0), 50);
println(map(y, 0, 360, 100, 0));
}

12. Add mouse click (picking up from last time)

int bright = 0; //this is a global variable, what happens if we do not declare this here (scope)

void setup()
{
size(360, 360);
colorMode(HSB, 360, 100, 100);
}

void draw()
{
int y = mouseY;

if (mousePressed == true)
{
if (bright < 100)
{
bright += 1;
}

} else {

if (bright > 0)
{
bright -= 1;
}
}

background(mouseX, map(y, 0, 360, 100, 0), bright);
println(bright);
}

Anatomy of a sketch:

Some parts of the Processing program run once, others loop. When the program starts the code outside of setup() and draw() runs first. Then the code inside setup() runs - this sets up your program. Programs that run continuously must be included in a draw() function. The draw() function runs the code inside it and then draws its contents to the screen. Then it runs again. This redrawing of the screen is called framerate. frameRate() is also a function that allows you to set the framerate - but it defaults to 60fps. To see this in action put print(frameCount) in the draw() and watch it print frames to the output window. If for some reason you want to stop the draw() function, you can use the noLoop() function.

Finally it is important to understand scope. Variables declared inside any block can only be accessed within that block. Variables declared at the base level (usually the first few lines of the program) are called “global variables” because they can be accessed anywhere in the program.

Let's see some of this in action:

int y = 0; // data type, variable name, assignment operator, value, statement terminator (this is a global variable)

void setup() // this code only runs once “void” is a keyword that returns no value, if you want to return a value you would replace void with the data type you are returning and then use the return in your block of code (usually at the end of the code). See "return" for more info.

{
size(300, 300); // this creates the image size, because it is in setup() it only is drawn once.
}

void draw() // This block of code will loop.
{
line(0, y, 300, y); // this is a function with the parameters in parenthesis.
y = y + 4; // this is the variable y, an assignment operator, and an expression.

if (y >= 250)
{
noLoop();
}
}

13. Animating a ball

int x = 0;

void setup()
{
size(400, 400);
}

void draw()
{
background(128);
ellipse(x, height/2, 30, 30);
x = x + 10;
if (x >= width)
{
x=0;
}
}

14. Stop the animation after 500 frames

int x = 0;

void setup()
{
size(400, 400);
}

void draw()
{
background(128);
ellipse(x, height/2, 30, 30);
x = x + 10;
if (x >= width)
{
x=0;
}

println(frameCount);

if (frameCount == 500)
{
noLoop();
}
}

15. animate with random()

First, never forget that random() is a float!!! often you will need to convert this number from a float to an int which is done this way: int(random(100)) see also: ceil(), floor(), round()

void setup()
{
}

void draw()
{
int x = int(random(100));
println(x);
}

16. animating with setup and draw

void setup()
{
size(300, 300);
}

void draw()
{
int x = int(random(width));
int y = int (random(height));
ellipse(x, y, 30, 30);
}

17. Use random in a for loop

void setup()
{
size(400, 400);
}

void draw()
{
background(0);
stroke(255, 60);
for(int i = 0; i < 400; i++)
{
float r = random(10);
strokeWeight(r);
float offset = r *5.0;
line(i - 20, 400, i+offset, 0);
}
}

18. Use random in an if statement

void setup()
{
size(400, 400);
}

void draw()
{
int rx = int(random (width));
int ry = int(random (height));
if (rx < width/2)
{
line(rx, ry, 0, 400);
}else{
ellipse(rx, ry, 30, 30);
}
}

19. Using PImage to load an image

Processing can load gif png jpg and tga files. PImage is the constructor that allocates the space for you to load the image into. You use PImage like a variable, you declare it and then give it a name. Usually globally:

PImage flower;

Then you use loadImage() to load the file into the program (you give it the name of the file in “quotes”) - make sure the image file is in your search path (the “data” subfolder).

flower = loadImage(“flower.gif”);

In order to place the file into your sketch, you need to use the image(name, x, y, width, height)

20. Animate using a picture

PImage flower;

void setup()
{
size(300, 300);
flower = loadImage("flower.gif");
smooth();
}

void draw()
{
int x = int(random(width));
int y = int (random(height));
image(flower, x-flower.width/2, y-flower.height/2);
}

21. Animate using a picture and tint

PImage flower;

void setup()
{
size(400, 400);
flower = loadImage("flower.gif");
smooth();
}

void draw()
{
int x = int(random(width));
int y = int(random(height));
int r = int(random(255));
int g = int(random(255));
int b = int(random(255));
tint(r, g, b);
image(flower, x-flower.width/2, y-flower.height/2);
}

22. Animate using a picture and tint and scale() -- 1. = 100%

PImage flower;

void setup()
{
size(400, 400);
flower = loadImage("flower.gif");
smooth();
}

void draw()
{
int x = int(random(width));
int y = int(random(height));
int r = int(random(255));
int g = int(random(255));
int b = int(random(255));
tint(r, g, b);
scale(random(3));
image(flower, x-flower.width/2, y-flower.height/2);
}

23. Drawing with an image

PImage flower;

void setup()
{
size(300, 300);
flower = loadImage("flower.png");
}

void draw()
{
image(flower, mouseX, mouseY);
}

24. Drawing with random tint

PImage flower;

void setup()
{
size(300, 300);
}

void draw()
{
int r = int(random(255));
int g = int(random(255));
int b = int(random(255));
flower = loadImage("flower.png");
tint(r, g, b);
imageMode(CENTER);
image(flower, mouseX, mouseY);
}

Week Two Lectures:

25. Making the Ball bounce

int x = 0;
int i = 10;

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
background(128);
ellipse(x, height/2, 30, 30);
x = x + i;
if (x >= width)
{
i = -10;
}
if (x <= 0)
{
i = 10;
}
}

Or for more fun:

int x = 0;
int xi = 10;
int y = 0;
int yi = 10;

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
background(128);
ellipse(x, y, 30, 30);
x = x + xi;
if (x >= width)
{
x = x+=6;
xi = -10;
}
if (x <= 0)
{
xi = 10;
}

y = y + yi;
if (y >= height)
{
yi = -10;
}
if (y <= 0)
{
yi = 10;
}
}

or even more fun,

int x = 0;
int xi = 10;
int y = 0;
int yi = 10;

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
fill(0, 8);
rect(0, 0, width, height);
fill(255);
ellipse(x, y, 30, 30);
x = x + xi;
if (x >= width)
{
x = x+=6;
xi = -10;
}
if (x <= 0)
{
xi = 10;
}

y = y + yi;
if (y >= height)
{
yi = -10;
}
if (y <= 0)
{
yi = 10;
}
}

Functions

26. Making your first function

Functions are modular blocks of code. What does this mean? Code that is reused often can be made into a function and called when necessary - this reduces the amount of code and the chance of errors. Functions have parenthesis after their name, this is where the function's parameters are stored. If you were going to write a function to draw multiple copies of the circles - what would be some different parameters that you would what to send to the function to make the circles unique?

Here's how you would make a function to draw multiple ellipses:

void setup()
{
size(400, 400);
noStroke();
smooth();
noLoop();
}

void draw()
{
eye(100, 100);
eye(300, 300);
}

void eye(int x, int y)
{
fill(255);
ellipse(x, y, 60, 60);
fill(0);
ellipse(x, y, 30, 30);
fill(255);
ellipse(x, y, 10, 10);
}

And here's how you would change the color:

void setup()
{
size(400, 400);
noStroke();
smooth();
noLoop();
}

void draw()
{
eye(100, 100, 300);
eye(300, 300, 20);
}

void eye(int x, int y, int hueColor)
{
colorMode(HSB, 360, 100, 100);
fill(hueColor, 100, 100);
ellipse(x, y, 60, 60);
fill(0);
ellipse(x, y, 30, 30);
fill(255);
ellipse(x, y, 10, 10);
}

And a for loop... iteration!

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
for(int i = 0; i<100; i++)
{
int x = i%9 * 50;
println(x);
int y = i/9 * 50;
int hueColor = int(random(360));
eye(x, y, hueColor);
}
}

void eye(int x, int y, int hueColor)
{
colorMode(HSB, 360, 100, 100);
fill(hueColor, 100, 100);
ellipse(x, y, 60, 60);
fill(0);
ellipse(x, y, 30, 30);
fill(255);
ellipse(x, y, 10, 10);
}

And since I'm listening to the Beatles right now...

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
for(int i = 0; i<100; i++)
{
int x = i%9 * mouseX;
int y = i/9 * mouseY;
int hueColor = int(random(360));
eye(x, y, hueColor);
}

if(mousePressed == true)
{
saveFrame("psychadelicBaby_###.tif");
}
}

void eye(int x, int y, int hueColor)
{
colorMode(HSB, 360, 100, 100);
fill(hueColor, 100, 100);
ellipse(x, y, 60, 60);
fill(0);
ellipse(x, y, 30, 30);
fill(255);
ellipse(x, y, 10, 10);
}

Transformations

27. Transform moves the whole coordinate system!

int x = 0, y = 0;

void setup()
{
size(400, 400);
}

void draw()
{
background(127);
rect(x, y, width/4, height/4);
if(mousePressed == true)
{
translate(x = width/2 - width/8, y = height/2 - height/8);
}
else
{
translate(x = 0, y = 0);
}
}

Here's proof:

int x = 0, y = 0;

void setup()
{
size(400, 400);
}

void draw()
{
background(127);
fill(127);
ellipse(width/2, height/2, 200, 200);
fill(0);
rect(x, y, width/4, height/4);
if(mousePressed == true)
{
translate(x = width/2 - width/8, y = height/2 - height/8);
}
else
{
translate(x = 0, y = 0);
}
fill(255);
ellipse(width/2, height/2, 200, 200);
}

28. If you want to isolate a transformation you can do so using a pushMatrix() and popMatrix()

NOTE: here we use rotate() and rotate requires a parameter in radians (not degrees) - to convert degrees to radians use radians(360) this is equivalent to radians(2PI)

2*PI = 360 or TWO_PI
PI = 180
PI/2 = 90 or HALF_PI
PI/4 = 45 or QUARTER_PI
PI+PI/2 = 270

etc..

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
background(127);
rect(0, 0, 100, 100);
pushMatrix();
fill(0);
translate(100, 100);
rotate(PI/8);
rect(0, 0, 100, 100);
popMatrix();
fill(255);
rect(0, 200, 100, 100);

}

NOTICE HOW ORDERING IS IMPORTANT!!!

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
background(127);
rect(0, 0, 100, 100);
pushMatrix();
fill(0);
rotate(PI/8);
translate(100, 100);
rect(0, 0, 100, 100);
popMatrix();
fill(255);
rect(0, 200, 100, 100);

}

29. Another example, but with scale()

void setup()
{
size(400, 400);
noStroke();
smooth();
}

void draw()
{
background(127);
fill(255);
rect(100, 175, 50, 50);
if(mousePressed == true)
{
pushMatrix();
fill(0);
scale(1.2);
rect(250, 175, 50, 50);
popMatrix();
}
else
{
rect(250, 175, 50, 50);
}


}

30. Scale fixed (like a button)

void setup()
{
size(400, 400);
noStroke();
smooth();
rectMode(CENTER);
}

void draw()
{
background(127);
fill(255);
rect(width/2 - 100, height/2, 50, 50);
if(mousePressed == true)
{
pushMatrix();
fill(0);
scale(2.);
rect(width/2 - 50, height/2 - 100, 50, 50);
popMatrix();
}
else
{
rect(width/2 + 100, height/2, 50, 50);
}


}

31. Here's how to make a flower...

size(100, 100);

fill(0, 127, 0);
ellipse(width/2, height/2, 20, 100);
ellipse(width/2, height/2, 100, 20);

pushMatrix();
translate(width/2, height/2);
rotate(PI/4);
fill(200, 127, 0);
ellipse(0, 0, 20, 100);
ellipse(0, 0, 100, 20);
popMatrix();

rectMode(CENTER);
rect(width/2, height/2, 22, 22);

32. And here's how you use the flower in a function.

void setup() {

size(400, 400);
noStroke();
smooth();
colorMode(HSB, 360, 100, 100);
}

void draw(){
for(int i = 0; i<100; i++){
int x = i%5 * 100;
println(x);
int y = i/5 * 100;
int colorHue = int(random(360));
int colorSat = int(random(50, 100));
flower(x, y, colorHue, colorSat);
}
}

void flower(int x, int y, int colorHue, int colorSat)
{

fill(200, 100, 100);
ellipse(x, y, 20, 100);
ellipse(x, y, 100, 20);

pushMatrix();
translate(x, y);
//rotate(PI/4);
rotate(radians(mouseX));
fill(colorHue, 50, 100);
ellipse(0, 0, 20, 100);
ellipse(0, 0, 100, 20);
popMatrix();
fill(colorHue, colorSat, 100);
ellipse(x, y, 22, 22);
}

Recursion

Think of recursion like standing between two mirrors. Recursion is simply when a block of code calls itself. Like mirrors, recursion could continue forever - so it is necessary to allow the function a way to exit. If you forget to let the program exit it will give you a stack overflow error.

void setup()
{
drawLines(5, 15);
}

void drawLines(int x, int num)
{
line(x, 20, x, 80);
if (num > 0) // notice how this if statement keeps the function from continuing forever...
{
drawLines(x+5, num-1);
}
}

33. Here's a way to use recursion to grow a garden.

void setup()
{
size(400, 400);
drawFlower(50, 50, 5);
smooth();
noStroke();
}

void drawFlower(int x, int y, int num)
{
fill(0, 255, 0);
ellipse(x, y, 20, 100);
ellipse(x, y, 100, 20);

pushMatrix();
translate(x, y);
rotate(PI/4);
fill(200, 100, 0);
ellipse(0, 0, 20, 100);
ellipse(0, 0, 100, 20);
popMatrix();
fill(120);
ellipse(x, y, 22, 22);

if(num > 1)
{
num = num -1;
drawFlower(x + 75, y + 75, num);
}
}

Trigonometry

http://en.wikipedia.org/wiki/Polar_coordinate_system
http://en.wikipedia.org/wiki/Rose_%28mathematics%29

The values of sin are from -1.0 to 1.0 and are valuable because they are easy to scale - just multiply by the range you are looking for. To get a range starting at 0 you can add 1 which will make the range 0-2 and then just divide by 2. ...or you can use map()

33 . Smooth up down

int x = 200;
float y = 0;
float angle = 0;

void setup()
{
size(400, 400);
smooth();
noStroke();
}

void draw()
{
background(127);
angle++;
if(angle >= 360)
{
angle = 0;
}

y = (sin(radians(angle)) * height/2 + height/2);
ellipse(x, y, 30, 30);

}

34. Make a circular motion

float x = 0;
float y = 0;
float angle = 0;

void setup()
{
size(400, 400);
smooth();
noStroke();
}

void draw()
{
fill(0, 10);
rect(0, 0, width, height);
fill(255);

angle++;
if(angle >= 360)
{
angle = 0;
}

y = (sin(radians(angle)) * height/4 + height/2);
x = (cos(radians(angle)) * height/4 + height/2);
ellipse(x, y, 30, 30);

}

35. Make a spiral motion

float angle;
float radius;

void setup()
{
size(500, 500);
noStroke();
smooth();
background(0);
}

void draw()
{

fill(255);
radius +=.1;
angle++;
float x = cos(radians(angle)) * radius +width/2;
float y = sin(radians(angle)) * radius +height/2;
ellipse(x, y, 2, 2);
}