Based on my understanding of variables, frameCount, math functions, comparisons and conditionals, and different types of motions, I experimented with three different motions in this mini-project.
Jumping Circle: a circle that runs with acceleration, jumps, and then continues running. Each jump has a different distance.
Falling leaf: a leaf that falls on a random track from slow to fast, changing color from green to yellow.
Zooming: circles zooming out from the center of the screen, with less and less opacity so the colors overlap and generate new colors.
The first motion is the most complicated motion among the three to me because it involves a little math. It was meant to mimic the long jump of a human.
I made the circle jump by asking it to finish half of one period of sin.
if ((radians(ySpd) <= PI)){
y = height/2 - sin(radians(ySpd)) * 50;
// console.log(sin(radians(ySpd)))
}else {
y = height/2;
}
However, I had difficulty making it start from 0 again. Jiapei helped me out by pointing out that I didn't reset the values of ySpd and xSpd.
}else if (x >= width - 5) {
ySpd = 0;
y = height/2;
xSpd = 0;
x = 0;
randomY = random(5, 20);
// console.log(randomY)
}
In order to mimic the natural process of trees aging and leaves falling, I changed the color of the leaf from green to yellow during its falling process. ColorMode(HSB) is the point. H stands for Hue, S stands for Saturation, B stands for Brightness. In hue, 60 degrees is yellow, while 90,120, and 150 are different types of green. Thus, the leaf color should decline from 150 to 60.
let h;
let s;
...
function setup() {
createCanvas(600, 600);
colorMode(HSB);
...
h = 150;
s = random(50,100);
}
function draw() {
background(0);
...
h = 100 - y*0.1
noStroke();
fill(h,s,80);
ellipse(x,y,60,30);
}
In the extra slides, opacity is controlled by the fourth number in the fill() function. It's essential in this motion because I want the colors to overlap and form a 3-dimensional visual effect.
...
let opa;
function setup() {
createCanvas(600, 600);
background(0);
//colorMode(HSB);
dia = 0;
opa = 255;
...
}
function draw() {
...
if (opa > 0) {
console.log("yes");
opa = opa - frameCount * 0.005;
dia = dia + frameCount * 0.01;
...
} else {
dia = 0;
opa = 255;
if (frameCount % 10 === 0) {
noStroke();
fill(random(255), random(255), random(255), opa);
circle(x, y, dia);
}
}
}
After utilizing random function, the circles changed too fast and the image was not visually pleasing. Fellow TJ suggested that I could make some gaps between the framecount I want to use by adding a condition measuring if they are dividable by certain numbers.
if (frameCount % 10 === 0) {
noStroke();
fill(random(255), random(255), random(255), opa);
circle(x, y, dia);
}
Lesson Learned:
I really enjoyed the creatures Karl Sims made that were introduced in the class presentation. I'm very happy that I can also grant things with motions that make them look alive. Especially for the first motion I created in this mini project, I genuinely think the little circle was so cute when it jumped hehe.
Technique-wise, I always like how logical coding is. Now this characteristic is enlarged by the math involved. I learned a lot about the connections between math equations and coding instructions.
Some future improvements:
I don't like the falling leaf one very much. It doesn't look very real to me. I found it hard to mimic something in real life. Hope I'll learn how to change the leaning angle of the leaf to be random when it falls.
I feel the only way I can make things seemingly generative is by adding a lot of random functions that are actually pointless. I hope the "creatures" I created can have some sort of freedom other than random.