For this recitation, we worked individually to create an interactive animation in Processing. In the beginning, I had the idea of creating a keyboard that would play twinkle twinkle little star by graying out certain keys at certain times. However, the keyboard would only have black and white colors, and I wanted to include shapes with more color. Then, I had the idea of dance dance revolution but using fingers, however, dance dance revolution would only use square shapes. In the end, I came up with a random shape and color generator using the four arrow keys. Up was correlated to the color red and triangles. Down was associated with green and squares. Left was blue and ellipses. Right was orange/yellow and quadrilaterals. Then, to make the animation interactive, I added a game function, which would print out UP, DOWN, LEFT or RIGHT, randomly, on the console. If the user hit the correct corresponding arrow, the computer would store that value in the number of correct hits for that specific arrow. If the user hit the key ‘s’, they would be able to see their score (number of hits/total times word appears) for each arrow key. I also implemented an exit function coded to the ESC key. When I tested my game, at times it would work perfectly, but at other times, the shapes would not appear on the screen when I pressed my arrow keys.
//This is the code for my game animation
int value=0;
int rNum;
String up=”UP”;
int countUp=0;
int totalUp=0;
String down=”DOWN”;
int countDown=0;
int totalDown=0;
String left=”LEFT”;
int countLeft=0;
int totalLeft=0;
String right=”RIGHT”;
int countRight=0;
int totalRight=0;
//choose a random number 1-4, each number corresponds to 1 text
//if string is UP and user hits UP, keep track of number of times he gets it right
//color rRed=color(random(0,255),0,0);
//color rGreen=color(0,floor(random(0,255)),0);
//color rBlue=color(0,0,random(0,255));
//color rOrange=color(random(125,255),random(125,255),0);
void setup() {
fill(0);
size(1000, 1000);
println(“Press esc to exit.”);
}
void draw() {
rNum=floor(random(1, 4));
if (rNum==1) {
totalUp++;
println(up);
}
if (rNum==2) {
totalDown++;
println(down);
}
if (rNum==3) {
totalLeft++;
println(left);
}
if (rNum==4) {
totalRight++;
println(right);
}
keyPressed();
printScore();
escape();
}
void keyPressed() {
if (key==CODED) {
if (keyCode==UP) {
color rRed=color(random(0, 255), 0, 0);
fill(rRed);
triangle(random(0, 1000), random(0, 1000), random(0, 1000),
random(0, 1000), random(0, 1000), random(0, 1000));
if (rNum==1) {
countUp++;
}
}
if (keyCode==DOWN) {
fill(0, floor(random(0, 255)), 0);
rect(random(0, 1000), random(0, 1000), random(0, 500), random(0, 500));
if (rNum==2) {
countDown++;
}
}
if (keyCode==LEFT) {
fill(0, 0, floor(random(0, 255)));
ellipse(random(0, 1000), random(0, 1000), random(0, 500), random(0, 500));
if (rNum==3) {
countLeft++;
}
}
if (keyCode==RIGHT) {
fill(floor(random(125, 255)), floor(random(125, 255)), 0);
quad(random(0, 1000), random(0, 1000), random(0, 1000), random(0, 1000),
random(0, 1000), random(0, 1000), random(0, 1000), random(0, 1000));
if (rNum==4) {
countRight++;
}
}
}
}
void escape() {
while (key==ESC) {
break;
}
}
void printScore() {
if (keyPressed) {
if (key==’s’) {
println(“Your score…”);
println(“UP: “, countUp, “/”, totalUp);
println(“DOWN: “, countDown, “/”, totalDown);
println(“LEFT: “, countLeft, “/”, totalLeft);
println(“RIGHT: “, countRight, “/”, totalRight);
}
}
}
Through coding this assignment, I learned that in processing, order matters a lot. Additionally, I completed the expanding and contracting circle, which showed me how to use booleans instead of if statements and loops. I find it frustrating that I can’t store shapes into variables to use later, however, I found a way around that by storing the numbers used inside the shape function to variables. I also found functions quite useful, as it made my main body of code clean and easy to read.
//My code for the circle
boolean isContracting=true;
int d=400;
boolean iMin=true;
int i=0;
int j=0;
int moveU=0;
int moveD=0;
int moveL=0;
int moveR=0;
int currentX=300;
int currentY=300;
void setup() {
size(600, 600);
background(100);
ellipseMode(CENTER);
strokeWeight(20);
colorMode(HSB, 100);
}
void draw() {
background(100);
fill(255);
stroke(i, j, 100);
keyPressed();
hsbControl();
shapeSizeControl();
}
void keyPressed() {
if (keyPressed) {
if (keyCode==UP) {
translate(0, moveU-=5);
ellipse(width/2, height/2, d, d);
currentY=height/2+moveU;
}
if (keyCode==DOWN) {
translate(0, moveD+=5);
ellipse(width/2, height/2, d, d);
currentY=height/2+moveD;
}
if (keyCode==LEFT) {
translate(moveL-=5, 0);
ellipse(width/2, height/2, d, d);
currentX=width/2+moveL;
}
if (keyCode==RIGHT) {
translate(moveR+=5, 0);
ellipse(width/2, height/2, d, d);
currentX=width/2+moveR;
}
}
else{
ellipse(currentX, currentY, d, d);
}
}
void hsbControl() {
if (iMin) {
i++;
j++;
} else {
i–;
j–;
}
if (i==0||i==100||j==0||j==100) {
iMin=!iMin;
}
}
void shapeSizeControl() {
if (isContracting) {
d-=3;
} else {
d+=3;
}
if (d<=150||d>=400) {
isContracting=!isContracting;
}
}