Recitation 7: Processing Animation by Bing Chen

Coming into this recitation, I already knew most of the programming features of processing because I have used it before. But in this recitation, I learned how to use the key and keyMode variables, something I never used before. I wanted to make my animation involve keyMode because I wanted more practice coding something different than my usual mousePressed programs. 

Before this recitation, I wanted to create a program similar to the popular carnival game Whack-A-Mole using Object-Oriented Programming. I was going to make a “mole” class called “Disk” and make each disk pop up randomly using the random() function. Unfortunately, this didn’t go as planned because for some reason the Disk class started rejecting all of the processing built-in functions, like fill() and ellipse(). Due to time-constraints, I changed my project to a short game where you control an eraser using the keyboard direction keys and you have to erase the board.

Code for eraser: 

void setup() {
size(600, 600);
background(0);
smooth();

textAlign(CENTER);
textSize(30);
text(“Erase the board as fast as you can!”, 300, 50);

noStroke();
}

// variables for the eraser (rect)
int x = 300;
int y = 300;
int w = 40;
int h = 40;

// how many “I Love Math” to draw
int i = 0;

void draw() {

if (i < 100) { // spam “I Love Math” like there’s no tomorrow
fill(255);
textSize(random(0, 50));
text(“I Love Math”, random(0, 600), random(100, 600));
i++;
fill(0);
}

rect(x, y, w, h); // the eraser

// control the movements of the eraser
if (key == CODED) {
if (keyCode == UP) {
y -= 5;
}
else if (keyCode == DOWN) {
y += 5;
}
else if (keyCode == LEFT) {
x -= 5;
}
else if (keyCode == RIGHT) {
x += 5;
}
}
}

Code for step 4: 

void setup() {
size(1000, 1000);
strokeWeight(10);
frameRate(16);
}

int x = 500;
int y = 500;
int size = 500;
boolean expand = true;

void draw() {
background(255);
stroke(random(0, 255), random(0, 255), random(0, 255));

if (expand) {
ellipse(x, y, size, size);
size += 10;
}
else {
ellipse(x, y, size, size);
size -= 10;
}

if (size == 600) {
expand = false;
}
else if (size == 500) {
expand = true;
}

if (key == CODED) {
if (keyCode == UP) {
y -= 10;
}
else if (keyCode == DOWN) {
y += 10;
}
else if (keyCode == LEFT) {
x -= 10;
}
else if (keyCode == RIGHT) {
x += 10;
}
}
}

Leave a Reply