What I made during the recitation last week was a drawing board popping up colorful circles on the path the mouse moves. During the process, I’ve learned to modularize my code by setting up a function to generate circles. This has greatly simplified my code, making the main part of my code clearly and concise. I also learned to use the transform function, so that I could generate multiple circles around the mouse’s position at the same time, while keeping my code clean. Of course, pushMatrix and popMatrix() were also implemented to make sure the transformation function works properly. I also learned a strange, yet practical way to achieve fading effect, which is by using a rectangle at the size of the window to cover it while filling it using black. Through setting the opacity of the rectangle, the objects on the screen would disappear at different speed.
What I found most interesting is using the rect() function to fade things out. It is definitely an effective, yet simple way to fade things out. I also think mouseX and mouseY functions are pretty interesting, as they are the gate through which users could interact with the shapes in the processing window.
The followings are the code for the design and the homework, together with the design’s video.
Code for the design
// create the animation
// generates circles and dots around the position of the mouse
void setup(){
size(600,600);
background(0);
noStroke();
smooth();
}
void draw(){
if (keyPressed == true){
if (key == ‘b’){
fill(0, 20);
rect(0, 0, width, height);
println(“no”);
}else if (key == ‘v’){
fill(0, 2);
rect(0, 0, width, height);
println(“changed”);
}
if (pmouseX != mouseX){
for (int i = 0; i < 8; i ++){
float trans1 = random(5, 30);
float trans2 = random(5, 30);
circles(mouseX, mouseY, trans1, trans2);
}
}
}else{
fill(0, 10);
rect(0, 0, width, height);
float r = random(255);
float b = random(255);
float x = random(width);
float y = random(height);
float ra = random(10, 30);
fill(r, 0, b);
ellipse(x, y, r, r);
}
}
// in the function generating
// the position of the mouse need to be measured
void mousePressed(){
clear();
}
void circles(int mouseX, int mouseY, float trans1, float trans2){
pushMatrix();
translate(trans1, trans2);
fill(random(255), 0, random(255), random(20,200));
float r = random(5, 20);
ellipse(mouseX, mouseY, r, r);
popMatrix();
}
Code for the homework
int i = 80;
int stats = 0;
void setup(){
size(600, 600);
smooth();
}
void draw(){
// the first ellipse filled with black
noStroke();
colorMode(RGB, 80);
background(80);
fill(i, 80 – i, 70);
int x = mouseX;
int y = mouseY;
if (x <= (200 – i) / 2){
x = (200 – i) / 2;
}else if (x >= width – (200 – i) / 2){
x = width – (200 – i) / 2;
}
if (y <= (200 – i) / 2){
y = (200 – i) / 2;
}else if (y >= width – (200 – i) / 2){
y = width – (200 – i) / 2;
}
ellipse(x, y, 200 – i, 200 – i);
fill(80);
ellipse(x, y, 180 – i, 180 – i);
if (stats == 0){
i –;
if (i == 0){
stats = 1;
}
}else{
i ++;
if (i == 80){
stats = 0;
}
}
}