Recitation Exercise:
For the recitation exercise, our task was to incorporate animation into processing. I chose to alter my creation from recitation 6 to include interaction and animation we learned in class. At first, I only incorporated the “mousePressed” function so that the background would change into random colors when the mouse was pressed. I realized this was too simple of an interaction so I decided to animate my actual creation. I made my design rotate by utilizing the “ translate” and “rotate” function. In the beginning, I only utilized the “rotate” function, however, the design was rotating off the frame so I added the “translate” function so that it would rotate in frame, around the center. The last interaction I incorporated was when the mouse went inside the center circle, the tiny circles surrounding the center would change from white to black. To do this, I used an if statement and set a boundary in which if the mouse entered the ellipses would turn black to set the boundary I used “mouseX” and “mouseY”. Through the completion of this exercise, I was able to familiarize myself with using processing to animate and incorporated interaction. At first, I had trouble understanding what some functions are used for and this exercise really allowed me to gain a better understanding of the purpose of different functions and how they can be used.
CODE:
void setup() {
size(750, 750);
}
void draw() {
stroke(255,255,255,250);
translate(width/2,height/2);
rotate(frameCount);
fill(255, 108, 15);
triangle(70,45,350,70,100, 500);
fill (54, 190, 255);
ellipse(150, 340, 150, 150);
scale(0.5);
ellipse(150, 340, 150, 150);
fill (104, 41, 255);
ellipse(150, 340, 100, 100);
fill(255, 89, 80);
ellipse(100, 250, 150, 150);
noFill();
ellipse(150,340,150,150);
fill(205, 255, 59);
ellipse(350, 200, 300, 300);
fill(250,28,224, 100);
rect(300, 240, 200, 200);
fill(247,22,30, 100);
rect(150, 200, 250, 200);
scale(0.5);
rect(150, 200, 250, 200);
fill(54, 59, 134);
triangle(100,400,400,600,500,450);
fill(250, 250, 250);
ellipse(350, 200, 50, 50);
fill(0, 0, 0);
ellipse(350, 200, 20, 20);
fill(0, 0, 0);
ellipse(150, 200, 50, 50);
fill(250, 250, 250);
ellipse(150, 200, 30, 30);
fill(0, 0, 0);
ellipse(300, 350, 175, 175);
fill(250, 250, 250);
ellipse(300, 350, 100, 100);
fill(0, 0, 0);
ellipse(320, 350, 40, 40);
if (mouseX> 275 && mouseX< 475 && mouseY> 275 && mouseY< 475) {
fill(10, 10, 10);
ellipse(150, 200, 50, 50);
}
}
void mousePressed() {
int r = int(random(0, 255));
int g = int(random(0, 255));
int b = int(random(0, 255));
background(r,g,b);
}
Recitation Homework:
For this recitation homework I had the most trouble with making the circle change colors as it was expanding and contracting. The first step was relatively easy, but when I got to the second and third step of this assignment I had trouble understanding which functions I needed to use. For the second step of changing the diameter and color of the circle I needed to declare variables and trying to understand what I wanted the computer to do was hard at first because I would mix up different variables. But after some trial and error I was able to get it working. By utilizing math equations for the second task I succeeded in accomplishing the task. For incorporating the “keyPressed ” function, first I wrote and layed out what I wanted the computer to actually do and that helped with being able to translate it to code. Through the completion of this assignment I was able to realize how much coding and logic goes into creating a work that seems simple. In essence, one has to think like a computer in order to create a successful code.
CODE:
int v = 2;
int dia = 300;
int changeColor = 1;
int i;
int x = 300;
int y = 300;
void setup(){
size (600, 600);
colorMode(HSB, 360, 100, 100);
}
void draw(){
background(359, 0, 99);
noFill();
stroke (i, 100, 100);
strokeWeight(20);
ellipse (x, y, dia, dia);
dia = dia + v;
if (dia < 100) {
v = 1;
dia = dia + v;
}
if (dia > 400){
v = -1;
dia = dia + v;
// this alters the diameter, allows the program to expand and contract
}
i = i + changeColor;
if (i > 100) {
changeColor = -1;
}
if (i < 0) {
changeColor = 1;
// this alters the color as it expands and contract
}
}
void keyPressed(){
if (key == CODED){
if (keyCode == UP){
y = y – 20;
}else if (keyCode == DOWN){
y = y + 20;
}else if (keyCode == LEFT){
x = x – 20;
}else if (keyCode == RIGHT){
x = x + 20;
}else {
x = 300;
y = 300;
}
// this limits the circle from going completely outside the screen
if(x >= 600) x = 600;
if(y >= 600) y = 600;
if(x <= 0) x = 0;
if(y <= 0) y = 0;
}
}