Recitation 6: Processing Animation

Part 1

For this recitation I tweaked the bouncing ball code and made it so that a box would appear if the mouse were to be clicked, and then the ball would then bounce inside of that box instead of around the whole screen.

CODE

float x = 100;
float y = 100;

float xsp = 7;
float ysp = 12;

void setup() {
size(800,800);
background(0);
}

void draw() {
noStroke();
background(0);

fill(255);
ellipse(x,y,100,100);

if(x > width-50 || x < 50){
xsp = -xsp;
}
if(y > height-50 || y < 50){
ysp = -ysp;
}
x = x+xsp;
y = y+ysp;

if (mousePressed) {
rectMode(CENTER);
fill(255,0);
stroke(255);
rect(400,400,400,400);

if(x > width-250 || x < 250){
xsp = -xsp;
}
if(y > height-250 || y < 250){
ysp = -ysp;
}
x = x+xsp;
y = y+ysp;
}
}

Part 2

For the homework, I had to create a circle that expanded and contracted while changing colors, as well as a square that I could move using the arrow keys.

The functions I used in this code include millis() in conjunction with frameRate() in order to create smooth movement, as well as the sin() function to make the circle expand and contract. Since trigonometric functions go from 1 to -1, I used the abs() function in order to make it go from 0 to 1.

CODE

float x = 300;
float y = 300;

void setup() {
size(600,600);
frameRate(60);
}

void draw() {
background(255);
ellipseMode(CENTER);
strokeWeight(10);
stroke(abs(255*cos(millis()*0.004)),abs(255*sin(millis()*0.003)),abs(255*cos(millis()*0.002)));
fill(0,0);
ellipse(300,300,250*cos(millis()*0.001), 250*cos(millis()*0.001));

rectMode(CENTER);
rect(x,y, 50, 50);
}

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

Leave a Reply