Project Title
sketch 1: Universe 🪐
sketch 2: Mondrian 🟥🟨🟦
sketch 3: Generative Plants 🌱
Links to the projects
Brief Description
Sketch 1: This project is a collection of simple motions with the theme of the night sky and the universe. You can observe one celestial body revolving around another, pause the motion of shooting stars and induce subtle movements in other celestial bodies through interaction. What’s more, the colors of the largest celestial body undergo subtle changes corresponding to its motion positions.
Sketch 2: The inspiration for the second sketch comes from the works of Mondrian, where it automatically generates rectangles of varying sizes in primary colors or white.
Sketch 3: The third project simulates the growth process of plants using simple graphics, with colors and growth directions also randomly changing.
Visual Documentation
Sketch 1
Sketch 2
Sketch 3
Coding
Sketch 1 🪐
Sketch 1 seems to be more of an integration of the foundation learned in the first two weeks with a touch of the content from the third week. In addition to creating the effects of reappearing and random movements, I employed sine/cosine functions to make the circle move along an elliptical trajectory, simulating the rotation of celestial bodies. Additionally, I attempted to use Perlin Noise to generate subtle variations in color with changes in coordinates, causing the largest planet to have slightly different colors while in motion.
Some code snippets:
(1) Sine/cosine and rotate
let x = a * cos(radians(angle1));
let y = b * sin(radians(angle1));
let circleX = width / 2 + bigcircleRadius * cos(radians(angle2));
let circleY = height / 2 + bigcircleRadius * sin(radians(angle2));
strokeWeight(3);
stroke(255,15)
noFill();
circle(width / 2, height / 2, 2 * bigcircleRadius);
circle(circleX, circleY, dia);
translate(circleX, circleY);
fill(77, 77, 255);
circle(x, y, 30);
angle1 += 1;
angle2 += 0.5;
In this project, I created two non-linear motions, which are circular and elliptical rotation. I need to apply mathematical formulas for some basic calculations to represent different coordinates, while distinguishing between the two types of rotations. Overall, due to the numerous variables involved in this part, I need to be very careful to differentiate them and avoid confusion. 🤔
(2) Perlin noise: generative colors
let noiseValue = noise(x * 0.01, y * 0.01, frameCount * 0.01);
let hue = map(noiseValue, 0, 1, 110, 270);
strokeWeight(0);
fill(hue, 180, 255); // perlin noise generative colors
circle(circleX, circleY, dia);
I referred to the examples on the slide: extra Noise to try to achieve the effect. I also used map() function to map noiseValue to certain range of number. I adjusted the starting and ending values in the map function to increase the range of color variation so that the changes would look more obvious.
Ps. One thing I want to improve but haven’t found the way: I hope that when the celestial body rotates behind the largest planet, it can be obscured (i.e., not appear on the screen). I tried to use an if statement to constrain it, but it didn’t work.
Sketch 2 🟥🟨🟦
This project was inspired by Mondrian’s grid paintings with primary colors. When I saw an example in the slides demonstrating random generation of size and color, I suddenly remembered the artworks I had seen before. I came out with an idea of creating randomly generated rectangles in white, red, yellow, and blue of various sizes. The motion in this piece is relatively straightforward, primarily utilizing the random() function to generate different sizes, colors, and stroke weights. Besides, this project is my first attempt at using for-loop. 🙂
Some code snippets:
(1) Randomly generate one color of four
let colorIndex = int(random(4));
if (colorIndex === 0) {
rectColor = color(255); // white
} else if (colorIndex === 1) {
rectColor = color(255, 0, 0); // red
} else if (colorIndex === 2) {
rectColor = color(255, 255, 0); // yellow
} else {
rectColor = color(0, 0, 255); // blue
}
I name a variable colorIndex and limit it within four options. Then I employed if statements to fill the rectangles with different colors.
(2) For-loop: Generating rectangles in a loop
for (let i = 0; i < rectangles.length; i++) {
fill(rectangles[i].fillColor);
strokeWeight(random(1, 3));
rect(
rectangles[i].x,
rectangles[i].y,
rectangles[i].width,
rectangles[i].height
);
}
I tried to create an array to store information about rectangles, including their position, size, and color. Using for-loop( let i = 0; i < rectangles.length; i++ ), I attempted to let the loop start from the first element of the array and iterate until the last element of the array.
Sketch 3 🌱
This project took the longest among the three, filled with trials and errors.😢 At first, I wanted to depict the growth of plants due to the theme of creating a generative creature for Project A. However, I had no idea how to start, so I searched for a piece in the p5.js examples to use as reference and learning(here’s the link). Gradually, I built my own sketch. The motion in this artwork are just simple linear movements, incorporating random colors and growth directions, while I think it would be useful for Project A.
Some code snippets:
(1) Create a gradient effect with colors changing along with the movement of the circle
if (cycle===0){
fill(250 - c * 5, 255, 230); // changing color of blue
}else if(cycle ===1){
fill(250-c*5,250-c*5,255); //changing color of purple
}else if (cycle===2){
fill(255,180-c*4,255); //changing color of pink
}else{
fill(160-c*3,255,210-c*2);//changing color of green
}
c = (c + 1) % 40; // period
I set a variable ‘c’ to control the color and used modulo calculation to constrain ‘c’ within a range. I placed ‘c’ within the fill color so that the color could change accordingly. I had been wanting to achieve a gradient effect before, and this time was a new attempt.
Ps. Errors I’ve made: I wanted to maintain color consistency within a loop but randomly select one color palette from blue/purple/pink/green for each iteration. Initially, I wrote code similar to my sketch 2: introducing an index for color and using if statements. However, the result was that the color of each generated circle was random, resulting in a inconsistent color scheme for the same plant. Later, I specified the colors to be used in each iteration by limiting the loop count(when cycle>=4, loop stops). However, I feel that the effect is not as good as random generation, and I haven’t found a solution yet.
About Project A
In Mini Project #3, I explored various sketches and motions, with one of my experiments centered around the combination of gradient color and linear motion (sketch 3). This particular motion involves cyclically growing leaves and flowers with a simultaneous gradient effect, which is one of the motions I would like to apply in Project A since I want to simulate the growing process of a plant.
The generative creature I want to focus on is a growing plant. I haven’t decided on the specific appearance of this plant yet, but it will have preferences for factors like light and humidity in its growth conditions. I want to create a game-like experience where users can create different growth environments for the plant through certain interactions, such as watering it.
To present the effect, the visual output will showcase the plant’s growth over time, influenced by user interactions and environmental factors accordingly. This project aims to evoke a sense of wonder and exploration as users discover the unique characteristics and responses of their virtual plant companion.
Reflection
In summary, I’ve learned to make use of different motions to create some effects and figured out how to use for-loops on my own. Along the way, I faced a bunch of issues, but I didn’t give up—I found better ways to solve problems, even if they’re not perfect. Overall, it’s a process of trying things out, making mistakes, and finding solutions.
Link to presentation: slides
Leave a Reply