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();
}
}