The interactive animation I have made👇
Here is the code:
THE PROCESS:
I wanted to explore more functions of processing, so I started to look for functions that were related to the mouse controlling. I found this interesting function called “mouseDragged”. Basically, every time I drag my mouse, the code then operates.
Yes, it did seem too simple. Actually, I attempted to achieve the effect that once I created a new rectangle, it would start to bounce around the canvas. However, I was only able to make the latest made rectangle move and the rest of all the rectangles I had created failed to bounce together.
At first, I thought perhaps I was not using the right function for the effect. I searched in the references on the processing website but found no alternative function. Therefore, I turned to Tristan for help. He told me that I had to use “array” for this kind of effect, which I had not learned yet. The good news is that I am going to learn it next class, so I am looking forward to being able to use this new function.
All the interesting functions I have come across:
random(); a really useful and interesting function to help decide the size, position and color;
ellipseMode(); it helps to position the ellipse ore precisely;
mouseDragged(); the code runs when you drag the mouse, a way to approach interaction;
mouseReleased(); I have considered to combine this with mouseClicked(); to make animation before I found mouseDragged();
Besides, I have tried the recitation homework and here is what I have achieved.
At first I wrote the code like what is shown below. However, it failed to be what I want. The outside black circle just refused to move without any apparent reason.
At last, I changed the code and it turned out to be like what is shown below.
int a=400;
int b=350;
int speed=5;
int w=300;
int h=300;
int s=5;
int i,j,k;
void setup(){
size(600,600);
}
void draw(){
a=a+speed;
b=b+speed;
background(255);
noStroke();
colorMode(HSB,360);
for (int i = 0; i < 100; i++) {
fill(i,200,100);
}
ellipse(h,w,a,a);
fill(255);
ellipse(h,w,b,b);
if (a>400){
speed *=-1;
}
if (a<100){
speed *=-1;
}
}
void keyPressed() {
if (key == CODED) {
if (keyCode == UP) {
w = w – s;
} if (keyCode == DOWN) {
w = w + s;
}
} if (keyCode == LEFT){
h = h -s;
}
else if (keyCode == RIGHT){
h = h +s;
}
}
Still, the color did not change accordingly. After reading through the instructions on the reference page of the processing website, I found perhaps it was because only one parameter of the “fill()” was changing and thus the change of the color was less than obvious. Therefore, I changed the range of the color and all the three parameters of the “fill()”. As I expected, It worked at last.
Here is the code:
int a=400;
int b=350;
int speed=5;
int w=300;
int h=300;
int s=5;
int i,j,k;
void setup(){
size(600,600);
}
void draw(){
a=a+speed;
b=b+speed;
background(255);
noStroke();
colorMode(HSB, 300,500,a);
fill(a/2,a*2,a);
ellipse(h,w,a,a);
fill(255);
ellipse(h,w,b,b);
if (a>400){
speed *=-1;
}
if (a<100){
speed *=-1;
}
}
void keyPressed() {
if (key == CODED) {
if (keyCode == UP) {
w = w – s;
} if (keyCode == DOWN) {
w = w + s;
}
} if (keyCode == LEFT){
h = h -s;
}
else if (keyCode == RIGHT){
h = h +s;
}
}