Recitation 7: Processing Animation
Instructor: Marcela
Instead of building off what I had from last recitation, I really wanted to be able to draw randomized colored circles at different sizes when I clicked on the mousepad. For this processing recitation, I really utilized the float variable and the mousePressed () function. But I found, what was more important was where everything was placed (ie inside void draw or void setup or as a global variable etc.) I created 2 versions of the animation I wanted. My first attempt at getting the result I wanted gave me a bunch of black blobs that moved very slowly around. This was because I put al my float RGBs values outside of the void draw and therefore, it was not being called each time I pressed down on the mouse. I consulted with Rudi and he explained the difference between a global variable and how it would affect the outcome if I called the variables outside instead of within void draw. Then, I was able to create a version where the circles that are drawn appear when you are pressing down the mouse pad and constantly keep being drawn.
Code:
float xpos = 0;
float ypos = 0;
void setup(){
background(225);
size(800,600);
}
void draw (){
float s = random(10,100);
float R = random(255);
float G = random(255);
float B = random(255);
xpos = mouseX;
ypos = mouseY;
if (mousePressed == true){
//fill(random(R),random(G),random(B));
fill(R, G, B );
ellipse(xpos, ypos, s, s);
noStroke();
}
}
While this looks really cool on screen, it wasn’t actually exactly what I was envisioned. I wanted to have only 1 circle drawn when you pressed down the mouse pad. With the help of Marcela, I realized that in order to achieve only one circle with a click, I had create a new function void mousePressed () and rearrange where I put the float RGBs values. We put the float RGBs values back into the global variables, but called them in our new function. We had to create a new function to adjust the functionality of only one mouse click. This was the final result!
Code:
float xpos = 0;
float ypos = 0;
float s;
float R;
float G;
float B;
void setup(){
background(225);
size(800,600);
}
void draw (){
xpos = mouseX;
ypos = mouseY;
}
void mousePressed(){
s = random(10,100);
R = random(255);
G = random(255);
B = random(255);
fill(R, G, B );
ellipse(xpos, ypos, s, s);
noStroke();
}
Additional Homework
I had trouble with where to start out after I created the circle. I consulted the Processing Forums a lot and they helped me get an idea of how to approach this animation. I learned what HSB is and that HSB is super important in making sure the colors flow smoothly and swiftly when you have an animated object in Processing. I also learned about key == CODED function to enable the movements of pulsing circle. However, I was not able to get the movements to be smooth, and instead they turned out to be little adjustments based on how much I choose to add to y or x (ie the y = y – 20;).
Code:
float d = 100;
float speed = 2;
int c = 0;
int x;
int y;
void setup(){
size (600, 600);
frameRate(100);
colorMode(HSB);
x = width/2;
y = height/2;
}
void draw(){
background (255);
ellipse (x, y, d, d);
strokeWeight (20);
stroke(c, 255, 255);
c = c + 1;
if (c > 255){
c = c – 255;
}
cM();
cB();
}
void cM(){
d = d + speed;
}
void cB(){
if ((d > 350) || (d < 100)){
speed = -speed;
}
}
void keyPressed(){
if (key == CODED){
if (keyCode == UP){
y = y – 20;
}
if (keyCode == DOWN){
y = y + 20;
}
if (keyCode == LEFT){
x = x – 20;
}
if (keyCode == RIGHT){
x = x + 20;
}
}
}