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 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:

 

 

Computer Coding With Processing

Coding is the hot topic in education these days, so I decided to teach myself a computer language. I chose Processing, because it creates nice computer graphics, which I think will appeal to my students. I’m using Daniel Shiffman’s book, Learning Processing, which is very entertaining and understandable. He assumes the reader knows nothing about coding, and that’s a good thing in my case!

Processing uses simple commands like ellipse(centerX, centerY, width, height), or line(X1, Y1, X2, Y2). If you’re familiar with coordinate geometry, then coding in Processing is a piece of cake. And did I mention it’s open-source, which means it’s completely free? The Processing website (linked above) has a fantastic reference that covers all of the commands and their parameters.

Here is my first project, which is the result of working through the first three chapters. I think I’ll call him Hypno-Dog, because I made his eyes change color.