Animating something new:
Using Processing I created this little interactive animation. I am still finding coding in this way to be somewhat challenging, so I mostly used elements we have previously discussed in class to make this. It demonstrates an element of interactivity because it involves using the arrow keys to move the ball around, as seen in this video.
Code:
int x;
int y;
int speed;
void setup() { // setup() runs once
size(600, 600);
frameRate(30);
x = width/2;
y = height/2;
speed = 10;
}
void draw() { // draw() loops forever, until stopped
background(random(255), random(255), random(255));
noStroke();
ellipse(x, y, 100, 100);
}
void keyPressed() {
if (keyCode == UP) {
y = y-speed;
}
if (keyCode == DOWN) {
y = y+speed;
}
if (keyCode == RIGHT) {
x = x+speed;
}
if (keyCode == LEFT) {
x = x-speed;
}
}
Recitation Homework: the expanding and contracting rainbow ring
Step 1
The initial set up of this code did not present any real challenges or difficulties. I was easily able to create a black ring on a white background as it was very similar to processing codes I have written in the past and in class.
Step 2
To get the ring to expand and contract, however, was somewhat more challenging for me to figure out. I used the boolean ellipseIsShrinking to control this and also played around with the sizes because in the beginning the ring would just continuously expand beyond the edges of the frame and then never back down. I also had (z == 0 || z == 600) for a while, so that the ring would go all the way to the edges and then back to nothing, rather than the sample video which showed it stopping before reaching these points.
Step 3
I found it exceptionally frustrating to work with colorMode and the HSB color ranges to get the colors of the ring to smoothly change. I spent a long time with trial and error and looking at the links provided to finally be able to do so, but it was definitely difficult for me. I was mostly confused by where to put the colorMode (HSB, 360, 100, 100); and kept accidentally adding this in the wrong parts of the code so that nothing was changing.
Step 4
This aspect was not too tricky for me to code, as it is very similar to something we had done in class and something that was also practiced in the recitation in my previous animation. I very easily copied just this part of the code and added it to the end of this new code to be able to control the placement of the expanding and contracting ring by using the arrow keys. I am quite please to be able to know how to do this particularly because I feel as if it adds and interesting element of interactivity to this entertaining animation.
Code:
int x=300;
int y=500;
int z;
int speed;
int d=200;
boolean ellipseIsShrinking = false;
void setup() { // setup() runs once
size(600, 600);
colorMode(HSB, 360, 100, 100);
frameRate(50);
x = width/2;
y = height/2;
z = 100;
speed = 200;
colorMode(HSB);
}
void draw() { // draw() loops forever, until stopped
background(360);
stroke(z, 200,200);
ellipse(x, y, z, z);
if (ellipseIsShrinking) z--;
else z++;
if (z == 50 || z == 200) ellipseIsShrinking = !ellipseIsShrinking;
}
void keyPressed() {
if (keyCode == UP) {
y = y-speed;
}
if (keyCode == DOWN) {
y = y+speed;
}
if (keyCode == RIGHT) {
x = x+speed;
}
if (keyCode == LEFT) {
x = x-speed;
}
}
Some functions I used to make these animations are:
Size
Setup
Void Draw () {
Background
Stroke / noStroke
Random
Fill (color)
Ellipse (x, y, size x, size y)