Coding With Processing, Part 5

Now we’re getting somewhere! In Chapter 7 of Daniel Shiffman’s Learning Processing, I learned how to define a function, which makes coding repeated objects so much easier. For this exercise, I had to define a function (named drawFlower) that drew a flower. I defined variables for the placement of each flower and the color of its petals. Here’s the result:

Here’s the code:

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

void draw() {
//Sky-blue background
background(0, 191, 255);

//For the drawFlower function, enter the x-coordinate of the flower’s center,
//the y-coordinate, and the r, g, b values for the petals.
drawFlower(100, 85, color(255, 255, 0));
drawFlower(200, 100, color(255,69,0));
drawFlower(150, 200, color(218,112,214));
drawFlower(300, 225, color(230,230,250));
drawFlower(400, 80, color(250,250,210));
drawFlower(480, 150, color(255,99,71));
drawFlower(440, 230, color(138,43,226));
}

void drawFlower(int centerX, int centerY, color c) {

//Draw the stem
stroke(0, 255, 100);
strokeWeight(4);
line(centerX, centerY + 15, centerX, centerY + 115);

//Draw the leaves
fill(0, 255, 100);
ellipse(centerX-40, centerY+40, 80, 20);
ellipse(centerX+40, centerY+40, 80, 20);

//Draw the center of the flower
stroke(0);
fill(0);
ellipse(centerX, centerY, 30, 30);

//Draw the petals
stroke(c);
fill(c);
ellipse(centerX, centerY+40, 20, 40);
ellipse(centerX-40, centerY, 40, 20);
ellipse(centerX+40, centerY, 40, 20);
ellipse(centerX, centerY-40, 20, 40);

}

Advertisement

Coding With Processing, Part 4

I’m continuing to work my way through Daniel Shiffman’s Learning Processing. Here is the result of incorporating variables and conditionals into my Lesson One Project: a bouncing dog that stays within the viewing window:

You can view the actual project here: https://www.openprocessing.org/sketch/480556#

Here is the code:

float x = 200;
float y = 0;
int speedX = 1;
float speedY = 0;
float gravity = 0.1;

void setup() {
//Set window size
size(800,600);
}
void draw() {
//Draw a black background
background(0);

//Set ellipses and rects to CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);

//Change the x location by speedX
x = x + speedX;
//If dog reaches edge, reverse course
if ((x > width)|(x < 0)) {
speedX = speedX*-1;
}

//Start y dropping
y = y + speedY;
speedY = speedY + gravity;

//Draw the body
strokeWeight(5);
stroke(100,0,0);
fill(0.5*x,y,x);
rect(x, y, 300,150);

//Draw the head
fill(200,50,50);
ellipse(x+225, y, 150,200);

//Draw the mouth and nose
strokeWeight(10);
line(x + 200, y + 40, x + 250, y + 40);
line(x + 225, y – 25, x + 225, y + 25);

//Draw the eyes
strokeWeight(0);
fill(0,50,200);
ellipse(x + 200, y- 30, 30, 50);
ellipse(x + 250, y – 30, 30, 50);

//Draw the legs
strokeWeight(20);
line(x – 100,y + 75,x – 150, y + 150);
line(x – 100, y + 75, x – 50, y + 150);
line(x + 100, y + 75, x + 50, y + 150);
line(x + 100, y + 75, x + 150, y + 150);

//Draw the tail
strokeWeight(25);
line(x – 150,y, x – 250, y – 100);

//Bounce back up
if (y > height) {
speedY = speedY*-0.95;
y = height;
}

}

 

Coding With Processing, Part 3

I just learned about for loops in Processing, and it occurred to me that they are perfect for illustrating iterated function systems. The classic example of an iterated function system is where you start with three vertices of a triangle, labeled 1, 2, and 3. Then perform the following steps:

1. Plot a point (x0, y0) anywhere inside the triangle.
2. Use a random number generator to generate 1, 2, or 3 randomly.
3. If 1 comes up, plot the midpoint between vertex #1 and (x0, y0).
4. If 2 comes up, plot the midpoint between vertex #2 and (x0, y0).
5. If 3 comes up, plot the midpoint between vertex #3 and (x0, y0).
6. Make your new point (x0, y0).
7. Repeat the process.

Even though the locations of the points are being generated randomly, a very interesting picture emerges. Here is after 100 iterations:

And here is the result after 1000 iterations:

And here it is after 10,000. It’s pretty clear that we’re getting the Sierpinski Triangle!

Here’s the code:

float x1 = width/2;
float y1 = 0;
float x2 = 0;
float y2 = height;
float x3 = width;
float y3 = height;

float x0 = width/2;
float y0 = height/2;

size(600, 600);
background(0);
stroke(255);
frameRate(5);

for (int i = 1; i < 10000; i = i + 1) {
int roll = int (random(0, 4));
if (roll == 1) {
x0 = (x0 + x1)/2;
y0 = (y0 + y1)/2;
point(x0, y0);
} else if (roll == 2) {
x0 = (x0 + x2)/2;
y0 = (y0 + y2)/2;
point(x0, y0);
} else {
x0 = (x0 + x3)/2;
y0 = (y0 + y3)/2;
point(x0, y0);
}
}

Coding With Processing, Part 2

I’m continuing to work through Daniel Shiffman’s book, Learning Processing, and I have just finished the chapter on conditionals. I wrote a program that animates a rectangle and ellipse, and depending on their positions in the window their colors and shapes change. You can click here to see it run in openprocessing.org.

Here’s a gif of 3 seconds of it in action: