Archives for March 2024

Project Name: Rabbit Bouncing Ball

Link to my project: 1) code: https://editor.p5js.org/Sky-Falling/sketches/9oBsgu4b1   

                              2) github: https://sky-falling.github.io/cc-lab/object-dancer/

Brief description and concept: The inspiration of this project comes from an emoji series which can be found on Wechat—提摩西小队. This emoji series consists of some gifs of cute animals and the rabbit I created is the simplified version of the main character of this series, which is also my favourite. To make the “dance” more realistic, I use multiple movements, including the rotation and translation of its hands, ears and foot, to make its bouncing from side to side looks more natural. For example, you may notice that the rabbit’s legs will shake accordingly as he falls to the ground. All in all, there’re so many series of cute animals memes nowadays, due to their wide circulation and people’s inherent affection on cute animals, they definitely play a positive role in raising people’s awareness of animal protection. 

 

 

Video documentation: 

 

 

 

Code explanation:

 dancer.update();
dancer.display();

 

This part call the 2 methods that I define in the class. The .update() will update all the parameters and the .display() will draw every frame according to the parameters. 

 

this.x = startX;
this.y = startY;
this.angle_ear_speed = 0.02;
this.r = 20;
this.cita = 0;
this.cita_speed = 5;
this.oci = 0;

this.angle_hand = -0.6;
this.angle_hand_speed = 0.1;
this.angle_ear = 0;

These parameters decide the position and movement of the rabbit. To be more specific, angle_ear corresponds to the rotation state of the rabbit’s ears, cita corresponds to the position of the whole rabbit, angle_hand refers to its hands and oci refers to the vertical translation of its feet when touching the ground. All of them has their respective speeds.

 

if(this.angle_ear>0.3){this.angle_ear_speed*=-1;}
else if(this.angle_ear<-0.1){this.angle_ear_speed*=-1;}
this.angle_ear +=this.angle_ear_speed;

The method of updating the hand, ear and body states is similar to the ball bouncing against wall problem. When the parameters touch the thredshould, then change the signs of their speeds to be the opposite. 

 

 if(this.cita<=20){this.oci = map(this.cita,0,20,-1,2.5);}
else if(this.cita<=40){this.oci = map(this.cita,20,40,2.5,0);}
else if(this.cita > 160){this.oci = map(this.cita,160,180,-1,2.5);}
else if(this.cita > 140){this.oci = map(this.cita,140,160,2.5,0);}
else{this.oci = 0;}

This part is to make the rabbit’s feet shake once as it touches the ground. The method is quite straightforward—divide its position to be a few sections and use map() function to oscillate its feet during the close-to-ground sections.

 

 

Challenge/failure: I spent most time on drawing the rabbit and definitely met some obstacles. For example, the shapes of face and body is achieved by calling the beginShape() function, which make it extremely hard to fill with multiple colors. So the face is purely yellow, which I think need improvement in the future. But I did create a smaller white pattern covering some part of the body, so the body seemed to be yellow and white. I wonder if there’s any easier way to fill a shape with multiple colors.

 

Reflection:

This project deploys the method of object-oriented programming so that our rabbit can be combined into the Grand Dance Party more easily, or to be more specific, by simply copying the “class” into the program and calling it. This is a fruitful training as it’s my first experience of successfully using OOP, and I’m also quite satisfied by my drawing technique. Except the color part, another thing need future improvement is that the motion can be even more realistic by involving more movements—like the facial flesh shaking with his motion. 

Additional reflection:

1. Variable names are really nightmare. I have to say each global variable is a potential bomb as you may confuse it with others of similar functions. What’s more, you may have millions of variables in a huge projects, so the commonly used variable names like a, b, x, y can be soon exhausted. To avoid such inconvenience, OOP simply bind variables to their corresponding objects and they won’t appear outside the class. So you can assign a, b, c to lots of objects without intervening with each other. What’s more, it make division of work more efficient. Due to the modularization, each group member can just add a class they create to the program and they don’t need to worry if there maybe some coincided names.
2. Coincided names for variables or functions. And the code written by others can be quite hard to read without OOP. As you may see a function bark(), but which creature is barking? Then you need to check the function, which is a repetitive work. But with OOP, you may write dog.bark(). Then your teammate will better know which object this line is applying to.
3. Without OOP, if you want to write “white dog and yellow dog are barking”, then you need to define 2 functions: white_barking() and yellow_barking(). But they are actually of the same function except for aiming at different objects. OOP addresses such problem. The barking() method can apply to different objects: yellow and white dogs. I think modularity can allow you to define “method” merely based on its function, rather than also need to specify which object it’s applying to. So you don’t need to have 100 barking functions if you have 100 types of dogs. In the example of my rabbit, you can call lots of independent rabbits by using an array only store their original position, but without OOP, you need lots of arrays to store all sorts of information of different rabbits: angle_hand, angle_ear and so on. OOP definitely make my life easier! Thank you OOP.

 

Link to my work: https://sky-falling.github.io/cc-lab/myfirstwebsite/

 

Link to my code: https://editor.p5js.org/Sky-Falling/sketches/94ILyEatJ

 

Image:

 

Video: 

 

Worm Tree—A newly discovered creature on the red planet

This is an interactive painting where you can plant ‘Worm Trees’ or watch the explosion of meteorolite by clicking the screen. Worm Tree is a scientific creature which lives on a red planet—Crimson Land. While similar to the shape of trees and the texture of worms, they are dictinctive from any living things on earth due to their lack of organic structure like DNA and cell, which intrigues lots of scientists as they believe such lower organism resembles the biological features of early life in the formation of the earth. Thus, they built a rover and ultimately sent it to this red planet to better understand the creature and its surronding. Now, what you are seeing is from the camera of this rover and you can click the brown soil to grow more Worm Tree. While gentle wind blows across the Crimson sea, Worm Tree strives and the beautiful galaxy can be clearly seen on the ground at the day time, the environment become much harsher during night. After pressing 2, you can instead click the sky and see how meteorolite hits the atmosphere and explodes at night. The galaxy, the sea and the creature are all generated by code, revealing how much computer can do in the arts, which is long considered a privilege of human beings. The beauty of this creature and the sky also explain why human continously seek for life outside earth: they want to explore the unknown beauty, stand on an alien land and stare at a different sky.

 

Building Procedure:

Design and Composition

The reason this interactive painting becomes what it looks like now is a little bit dramatic. At the beginning, what I want to do is raindrops splashing on the surface of water with the rhythm of music. But during my attempt, I found I accidentally achieve an effect more like fireworks rather than raindrops, so I decided to just keep what I have done and added another character which is more suitable to become the creature—worm tree.

Consequently, I need to integrate them into the same story, so I made up a story about the alien planet—Crimson Land and meteoroite impact. To make the story more convincing, I also decided to add a galaxy at the sky on the painting.

 

Here’s the dramatic part again: I accidentally create a spiral pattern when experimenting about enhancing 3D effect by adding lines. By adjusting some parameters, I suddenly found this is exactly the galaxy I wanted. And the reflection of light on the sea also uses the same techique.

I really want to make the interaction as impressive as possible rather than just click, click and click. However, the obstacle is that the background shouldn’t be refreshed as worm trees are continously being drawn on the canvas, meaning no complicated movement or interaction can be achieved which often require the background to be refreshed every frame. This also leads to my decision of dividing the worm tree and meteorolite collision into 2 different scenes and use a ‘loading page’ as transition, so that I can refresh the page at the second scene and support some more complicated movements like meteorolite impact and floating cloud. Definitely I also alter the details of my story accordingly but still some audience argued it was not convincing enough. 

 

 

There’re still things I fail to achieve in the process. I previously wanted to make the galaxy rotate, stars twinkle and the reflection of light changes with time. But later I found to achieve that, the position and brightness of each dot need to be stored in array and refreshed every frame, which pose a high demand for the ability of CPU. So I ultimately quit this idea and turn them into static pattern. 

In conclusion, this project embraces the key concept of ‘interactive art’, which stress on explore new stuffs in the course of construction rather than set a fixed goal and move towards it without adding new things. My initial goal is to create raindrops splashing effect, but turns out to be something totally uncorrelated but more impressive and stunning. As you can see, almost all components of this painting are kind of by-products of different experiments. So what I have learned is we don’t need to spend too much effort on how to achieve a detail, but do some experiments first, focus more on the what we have achieved and explore if we can turn it into something interesting and intergrate it into the big framework of our projects. 

 

Technical

This complex painting is composed by the following components: Galaxy, star, sky texture and sun, sea and light reflection, land, worm trees, loading page, cloud and meteorolite explosion. Let’s break them down:

Galaxy:

galaxy_x = random(200, 400);
galaxy_y = 150 + random(-20, 20);
while (millis() < 1500) {
push();

translate(galaxy_x, galaxy_y);
brightness_sky -= 0.77;
rotate(radians(shape * (10 - density) * a));
Scale_sky = y / 400;
scale(Scale_sky);

strokeWeight(1.5);
stroke(240 + random(-50, 0), 221 + random(-50, 0), 224, brightness_sky);
line_modified(-25, y, 25, 15);

y += 10 - density;
a++;

pop();
}

The first 2 lines are to fix the position of the center of the galaxy. millis()<1500 is to restrict the size of the galaxy, but will also result in a delay. The logic of the following lines is: draw a small line, rotate the whole galaxy a little bit, then draw another slightly longer line, and rotate the whole a little bit, and repeat this process until 1.5 second pass. 2 additional things are the brightness will decrease with the distance to the center of the galaxy and the ‘line’ is my self-defined modified version which is at below.

function line_modified(x1, y1, x2, scale) {
let t = 1;
let x = x1;
while (x < x2) {
line(
x,
y1 + scale * noise(x * oci, y1),
x + t,
y1 + scale * noise((x + t) * oci, y1)
);
x = x + t;
}
}

 

You can see that they have ocillation by noise function.

 

Sky texture and sun:

noStroke();
let noiseScale = 0.01;
for (let i = 0; i < width; i += 2) {
for (let j = 0; j < height; j += 2) {
if (dist(i, j, 700, 100) > 50) {
noiseScale = 0.01;
} else {
noiseScale = 0.05;
}
const noiseVal = noise((i + width) * noiseScale, j * noiseScale);
const currentColor = map(noiseVal, 0, 1, 0, 1);

//fill('#FF0057');
//circle(700,100,100);
if (dist(i, j, 700, 100) > 50) {
fill(130, 130 * currentColor, 15 * currentColor, 180);
} else {
fill(
149 - 49 * currentColor,
136 * currentColor,
255 - 21 * currentColor
);
}

rect(i, j, 2, 2);
}
}

You can sea the sky are divided into 2 parts: sun part which will be filled with purple color and non-sun part(if (dist(i, j, 700, 100) > 50)) which will be filled with red color. To make them more realistic, I use noise function to make the color change continously with its position. 

 

Star part:

let star_color = [
color(255, 210, 125, 255),
color(166, 168, 255, 100),
color(95, 56, 129, 150),
color(255, 215, 215, 255),
];

noStroke();

for (let i = 0; i < 750; i = i + 1) {
let a = random(width);
let b = random(298);
let c = random(1, 3);
fill(star_color[floor(random(4))]);
if (dist(a, b, 700, 100) > 50) {
circle(a, b, c);
}
}

This part is to generate 750 points of random x-coordinate, random y-coordinate, random radius and random color(from the 4 colors) 

 

Sea and light reflection:

noStroke();
fill(0, 58, 73); //sea color
rect_modified(0, 300, 800, 200, 1); //draw see

function rect_modified(x, y, a, b, want_wave) {
colorMode(HSB);
strokeWeight(1);
for (let i = y; i <= y + b; i++) {
if (want_wave == 1) {
stroke(4, 67, 60 + (i - y) * 0.2);
} else {
stroke(45, 90, 20 + (i - y) * 0.1);
}
line(x, i, x + a, i);
}

if (want_wave == 1) {

for (let i = 380; i <= 1000; i += 7) {
let wave_brightness = map(i, 380, 550, 75, 100);
stroke(350, 25, wave_brightness);
push();
translate(galaxy_x, 275);
let new_y = i - 275;
let new_x = -2000;
Scale = new_y / 400;

scale(Scale);
while (new_x < 2000) {
oci = 0.2;
line_modified(new_x, new_y, new_x + random(7.5, 15), 1.7);
new_x += random(20, 140);
}
pop();
}
}
noStroke();
colorMode(RGB);
}

You will find I use rect-modified instead of rect(). rect-modified() will generate a rectangle of the given color, but the difference is that the brightness of color will decrease with the y-coordinate so that the brightness of the further part of the sea will be lower. Another difference is that there are some randomly generated modified-lines which will also be streched according to their position, and this will also enhance the 3D effect. 

 

Worm trees:

I will just briefly describe this part due to its complexity. 

push();
translate(x0, y0);

Scale = (y0 - 275) / 400;

scale(Scale);

fill(255);

This is to adjust the creature’s size according to the its position to have 3D effect. x0 and y0 is the point where a worm tree starts to grow. 

fill(255);
for (let i = 0; i < len; i++) {
t = millis() - t0;
radius = map(t, 0, time_limit, radius_max, radius_max * decay);
speed_oci = map(
radius,
radius_max,
radius_max * decay,
speed_oci_max,
speed_oci_max * decay
);
ocillation = map(t, 0, time_limit, oci_max, oci_max * decay);
brightness = map(t, 0, time_limit, 250, 200);
thickness = map(t, 0, time_limit, thickness_max, thickness_max * decay);

threshould = map(t, 0, time_limit, 1, deathrate_limit);

strokeWeight(thickness);
plant[i][0] += random(-ocillation, ocillation);

 

This part is to adjust some parameters of the currently growing creature according to time like radius, y coordinate speed and random left-right oscillation. 

 

grow(i);

You can see this function below. This function basically does the following things: 1) At the probability of (1-‘threshould’) which will decrease with time, the branch will stop growing. 2)At the probability of ‘threshould’ and the number of continously growing units for this branch without dividing or stop growing, this branch will proceed growing one more unit. 3)Otherwise, this branch will divide into 2 branches which is achieved by .push() and .splice(). Please notice that the 2 additional branches will have random offset on their x-coordinate speed.

 

if (t > time_limit || len > maxVal || len == 0) {
let location = 0;
if (
dist(mouseX, mouseY, 575, 500) < 240 ||
(mouseX > 600 && mouseX < 800 && mouseY < 500 && mouseY > 300)
) {
location = 1;
}
if (mouseIsPressed == 1 && location == 1 && mouseY >= 0) {
x0 = mouseX;
y0 = mouseY;
location_y_pre = mouseY;
tree_color = color(random(360), 100, 30);
plant = [[0, 0, 0, speed_max, tree_color, 0]];
len = 1;

t0 = millis();
}
}

 

This part is to check if the growth of the current branch is over, like the growth time have surpassed the time_max, all branches have stopped growing or the number of branches is over maxVal. If so, then it will repeatly detect if user click the land and grows another worm tree. 

 

Meteorolite explosion and loading page are both explained in my previous post about generative movement, and cloud is generated in the same way as sky texture. To be honest, I didn’t meet too many techinical problems but did spend lots of time on adjusting parameters, especially those about color, speed and death thredshould. I think probably the only way to figure out the right parameters is to repeatly experiment. And also, I had to abandon some initial ideas in the course of construction. For example, I initially want the land to have more complex colors and shapes. However, I later found that it’s hard to fill something as complicated as ellipse with ‘complicated color’ or achieve the following effect, and this is why the land had a boring color.

If time can be turned back for a week, I won’t build 2 scenes again as Professor Leon told me a way to avoid the refreshment problem. Actually, for some static parts like the galaxy, the sun and the sky texture, we don’t need to refresh them every frame but can instead draw a new canvas and cover it over the main canvas every frame, which won’t cost any calculation on CPU. And thus, I’ll be able to move the meteorolite part and cloud back and probably even make the star twinkle, which also won’t demand too much calculation considering the small number of stars. And I also discover a quite useful tool along the way: colorMode(). I found HSB mode is much better at coping with gradient effect.

 

Reflection and Future Development

Different from my classmates’ work which are mostly some games, my goal from the begining is to make a dynamic and interactive painting. And I also want to make the creature more automous, meaning user don’t have as much control over it as in games. As the name ‘generative’ creature have indicated, this creature must be able to grow, to eat and to die. I think the ‘grow’ part is quite perfect, as not only the thickness of branch will decrease, but the color will also be dimmer, which are quite in line with human’s aesthetics for tree-like stuffs. The ‘die’ and ‘eat’ part isn’t revealed in the painting but covered in my story about it. However, some audience suggested me reveal how the creatures die on the painting rather just by words and the story about extinction caused by meteorolite is not convincing enough. For the whole sense of this painting, some audience also argued that they even thought the above part and the lower part are two seperate scenes, showing the sea and the sky are too split from each other. Some other problems about details also attract my attention: some audience thought the texts on the land ruin the whole sense of the painting and should be moved to the corner, and others thought simply refresh the whole page when pressing 1 is too boring and should add a loading page instead. All in all, although finally reaching a different theme from my initial proposal—raindrop on water, what I’ve achieved now is still a satisfying painting. Worm Tree can grow on its own, consume minral substance and be killed by meteorlite, satisfying the conditions for generative creature. And all elements, like Crimson Sea, galaxy, sky, the sun and the meteorolite, are all in line with the theme of this painting—alien planet, giving it a sense of harmony but not boring, and these parts mostly come from the inspiration from my previous works. However, I also need to commit some mistakes I made. I agreed with most of the critiques others made, like the sense of wholeness and the unconvincing part of the story. I will employ the simliar method of integrating what I have made rather than spend too much effort on brand new stuffs. What’s more, this project only have 2 scenes, but I will add more in the future and ultimately turn it into a “planet adventure game”.

 

Credits & References

Professor Leon offered me some advice about how to change color mode and create an additional canvas. So I want to thank him for helping me.