For this recitation, I chose to create an animation consisted of a circle on a screen which would change color whenever the space bar was pressed. Along with this, I chose to have the circle grow until it hit the edge of the canvas, at which point it would shrink again.
As I am already familiar with p5, coding this exercise was not difficult, and the main functions I used was keyPressed(). Along with this, i also created my own functions to split up the program into parts. Overall, this exercise was not too challenging, and the only thing I experienced issues with was programming the speed with which the circle increases in size.
In the extra exercise, the shape which changed color was a ring shape. To accomplish this, I chose to draw a circle, with a heavy stroke weight, with a fill value the same as the background. The only color value which would change is the one of the stroke. Then, I chose to modify the color based on the size of the circle, as the circle would either increase or decrease. To accomplish this, I declared a variable ‘r’ to be used as the radius of the circle, then set the range of the HSB colors to go up to 500 (as the my circle would be 500 pixels wide at the largest point). Then, when using the stroke() method, I put in the variable ‘r’ for all three values. The result which I achieved is very similar to the one demonstrated, but I chose to go with a black background as I thought it looked better with my color range.
Code used for first exercise:
int r;
int g;
int b;
int x = width/2;
int y = height/2;
int radius = 25;
int circleSize = 50;
int circleSpeed = int(random(2, 5));
int newCircleRadius = int(random(10, 20));
void setup() {
size(500, 500);
//fill(0, 0, 0);
}
void keyPressed() {
colorChange();
speedChange();
}
void colorChange(){
// colorMode(HSB, 100);
r = int(random(0, 255));
g = int(random(0, 255));
b = int(random(0, 255));
fill(r, g, b);
}
void draw() {
background(255);
noStroke();
ellipse(250, 250, radius, radius);
moveCircle();
circleCheck();
}
void moveCircle() {
radius = radius + circleSpeed;
}
void circleCheck() {
if(radius < 0 || radius > 500) {
circleSpeed *= -1;
}
}
void speedChange() {
circleSpeed *= int(random(1, 2));
}
Code for extra exercise:
int h;
int s;
int b;
float speed = 3.0;
int x = width/2;
int y = height/2;
float r = 25.0;
void setup() {
size(500, 500);
}
void draw() {
background(0, 0, 0);
fill(0, 0, 0);
colorMode(HSB, 500);
stroke(r, r, r);
strokeWeight(20);
ellipse(250, 250, r, r);
expandCircle();
checkCircle();
}
void expandCircle() {
r = r + speed;
}
void checkCircle() {
if(r <25 || r > 500){
speed *= -1;
}
}