Recitation 7: Processing Animation (By Megan Rhoades)

Part 1: Interactive Animation

This animation was originally something I created in class when we were learning for loops. The original sketch had only two circles which bounced after reaching the edge of the screen. For this recitation, I added an interactive element in the fact that pressing the mouse (or, since my laptop is also touchscreen, touching the screen) in a certain spot would generate another circle. Further, every mouse click changed the size of the circles randomly. I also added a function which would clear the screen of the small circles with a keyboard press, so that the user could continue drawing if the screen became full. 

Finally, I added a colored background (which also changed with each click), some simply instructions for use, and a title. 

The video is inserted here, and the code can be found at the end of this post:

Part 2: Expanding/Contracting Circle Exercise

I had a lot of trouble with this exercise. Creating the ellipse itself was no problem, and neither was making the ellipse contract/expand by setting boolean parameters that change the size of the radius. The problems began when I attempted to color the outline. As the circle contracted, it left behind a distorted background in the shape of the fully expanded ellipse. I also had trouble getting the colors to change at a more slow pace, so I ultimately left the color change at a default (very rapid) setting. 

The flickering of the circle in the video is from a function I added which clears the program every few frames in order to get rid of the distorted background. 

The final sketch:

And this video shows the distortion mentioned above.

Code:

The code for the animation sketch (circle_rave):

float CIRCLE_DIAM = 30; //20 pixel diameter for circles
final int ARRAY_MAX = 1000; //size of array

int[] pointX = new int[ARRAY_MAX]; //x coordinate of point
int[] pointY = new int[ARRAY_MAX]; //y coordinate of point
int numPoints; //current number of points on the screen

int value = 0;

//for the text
PFont f;

//for the circles
int x = 100;
int y = 400;
color c = color(random(255), random(255), random(255));
int spdx = 3;
int spdy = 4;
float d = 100;
float D = 100;

int X = 150;
int Y = 300;
int spdX = 17;
int spdY = 11;

void setup() {
size(600, 600);
f = createFont(“Georgia”, 16, true);
ellipseMode(CENTER);
numPoints = 0; //sets array
}

void draw() {
background (value);
textFont(f, 70);
fill(0);
text(“c i r c l e r a v e”, width/5, height/4);
fill(255, 255, 255);
text(“tap me”, width/2, 300);
textFont(f, 20);
fill(0);
text(“press key to reset”, width/2, 340);

int red = int(random(255));
int green = int(random(255));
int blue = int(random(255));
color clr = color(red, green, blue);
for (int p=0; p<numPoints; p++)
{
fill(clr);
ellipse(pointX[p], pointY[p], CIRCLE_DIAM, CIRCLE_DIAM);
}

ellipse(x, y, d, d);
x = x + spdX;
if ( (x < d/2) || ( x > width-d/2)) {
spdx = -spdx;
fill(color(random(255)));
}
y = y + spdy;
if ( (y < d/2) || ( y > width-d/2)) {
spdy = -spdy;
fill(color(random(225), random(100, 200), random(100, 200)));
}

ellipse(X, Y, D, D);
X = X + spdX;
if ( (X < D/2) || ( X > width-D/2)) {
spdX = -spdX;
fill(color(random(50, 150), random(50, 150), random(50, 150)));
}
Y = Y + spdY;
if ( (Y < d/2) || ( Y > width-d/2)) {
spdY = -spdY;
fill(color(random(225), random(225), random(225)));
}

if (keyPressed == true) {
numPoints = 0 ;
}
}

void mousePressed() {
if (value == (color(155, 100, 100))) {
value = (color(random(0, 255), random(0, 255), random(0, 255)));
} else {
value = (color(155, 100, 100));
}
if (d == 100) {
float circledi = random(10, 250);
d = circledi;
} else {
d = 100;
}
if (D == 100) {
float circleDi = random(10, 250);
D = circleDi;
} else {
D = 100;
}
if (CIRCLE_DIAM == 30) {
CIRCLE_DIAM = random(5, 80);
} else {
CIRCLE_DIAM = 30;
}
}

void mouseClicked()
{
pointX[numPoints] = mouseX;
pointY[numPoints] = mouseY;
numPoints++;
}

The code for the expanding/contracting ellipse:

int rad = 50;

boolean ellipseIsShrinking = false;

void setup() {
size(600, 600);
//background(255, 255, 255);
frameRate(40);
}

void draw() {
int red = int(random(155, 255));
int green = int(random(155, 255));
int blue = int(random(155, 255));
color clr = color(red, green, blue);

// Make smaller if shrinking, bigger otherwise
if (ellipseIsShrinking) {
rad–;
} else {
rad++;
}
// Test if instructions should be reversed
if (rad == 50 || rad == 150) {
ellipseIsShrinking = !ellipseIsShrinking;
}

ellipseMode(RADIUS);
stroke(clr);
strokeWeight(20);
fill(255, 255, 255);
ellipse(width/2, height/2, rad, rad);

if (rad%4 == 0) {
clear();
}
}

Leave a Reply