Project Title: Starry Night
We learned how to define variables and use them to create moving objects using random functions. The following artwork combines various motions from three sources I had in terms of experiments: the movement of the moon, falling meteors, and sparkling stars in the night sky.
Click here to see the result: https://editor.p5js.org/GwangunKim/sketches/-08BheYxM
Progress
The first motion I created was the flapping wings of a bird. I implemented the movement of the wings by changing the y-axis positions of a rectangle, enabling the wings to move up and down. However, when attempting to apply the “flapping wings” effect to a shape that moves freely in the coordinates, I encountered difficulties in implementing two motions(flapping wings and a shape moving freely shares a common y-axis variable) with a single variable. Therefore, I decided to focus on the source code for the shape’s movement in up and down. Thus, I took this source to the movement of the moon.
Link:https://editor.p5js.org/GwangunKim/sketches/rjACRQng6
The second motion I created is a single ellipse moving from a random position and changing its direction and color when it reaches the canvas boundaries. I adjusted the position and speed of the shape using the random() function and ensured that the shape could move within the canvas boundaries by using conditionals.
Link:https://editor.p5js.org/GwangunKim/sketches/ITKiNG-pC
The final motion was an advancement of the second motion, where I created a butterfly-shaped figure that rotates and increases in size when reaching the canvas boundaries. I used the rotate statement to make the shape rotate. While creating this motion, I envisioned falling meteors in the sky, and I incorporated this idea into the final project as a single source code.
Link:https://editor.p5js.org/GwangunKim/sketches/sIa-5-LI4
When observing “Starry Nights,” it’s noticeable that the falling meteors don’t follow a fixed pattern but instead have slight variations in their positions, falling randomly. The stars also twinkle from random positions, and the moon gradually transitions from a crescent to a full moon. Among these interesting sources, the one that I look forward to developing further in Project A is the falling meteor motion. In Project A, I want to create a creature resembling a snake with wings, inspired by the motion of falling meteors. The way meteors fall gives the impression of a snake’s movement.
let x,y;
let sx,sy;
function setup() {
createCanvas(400, 400);
x = random(0,width);
y = random(0,height);
sx = random(-2, 2);
sy = random(-2, 2);
circlecolor= color(10,10,10)
}
function draw() {
background(255,5);
fill(circlecolor);
noStroke()
circle(x, y, 25);
let randomChangeX = random(-1, 1);
let randomChangeY = random(-1, 1);
x=x+sx+randomChangeX;
y=y+sy+randomChangeY;
if(x> width || x<0){
sx = -sx;
circlecolor=color(random(0,255),random(0,255),random(0,255));
}
if(y> height || y<0){
sy = -sy;
circlecolor=color(random(0,255),random(0,255),random(0,255));
}
}