NoC (W05): Waves (Oscillation)

Fly Me to the Moon

* You are welcome to Listen to this music while reading this blog 😉

p5js Link: Fly Me to the Moon (p5js.org)

Idea: Explore Further

As my last mini-project is about space and gravity, I decided to explore the theme further. The waves are suitable for making the flames of a rocket engine. Also, the rocket is not only an exploration of my project but also the exploration of human beings. We use the rocket to explore the unknown deep “sky”.

Coding 01: We Never Miss the Stars

Stars always bring the sign of the human imagination of space. In this project that is hugely related to human’s significant information, the stars are the indispensable part.

However, since the deployment procedure is quite similar to my last project, you can visit this link to find out more details about how to code for the shining stars.

Coding 02: The Rocket, Elegant Simplicity

The design of the rocket is according to my own imagination of the shape of a rocket. The head should be streamlined to lower the air friction. The body should be long and thin in order to have a higher capacity for fuel. The wings are located at the bottom part which makes the rocket controllable.

Then the prototype for a rocket occurred on the canvas:

Using some user-defined shapes, I finish the coding of the rocket:

function boat(x, y) {
push();
translate(x + 32, y - 170);
noStroke();
fill(50);
triangle(0, 280, 40, 280, 20, 240);
stroke(0);
for (let i = 0; i < 4; i++) {
line(3 + 2 * i, 276 - 4 * i, 37 - 2 * i, 276 - 4 * i);
}

noStroke();
fill(200);
rect(0, 0, 40, 260);
beginShape();
curveVertex(0, 0);
curveVertex(0, 0);
curveVertex(5, -30);
curveVertex(20, -50);
curveVertex(35, -30);
curveVertex(40, 0);
curveVertex(40, 0);
endShape();

fill(120);
beginShape();
vertex(-10, 210);
vertex(5, 200);
vertex(5, 250);
vertex(-10, 260);
vertex(-10, 220);
endShape();

beginShape();
vertex(50, 210);
vertex(35, 200);
vertex(35, 250);
vertex(50, 260);
vertex(50, 220);
endShape();

pop();
}

Coding 03: Our Main Character: Flames

Simulating the flame of a rocket engine isn’t a simple thing. After viewing a lot of videos of the launching rocket, I have the following observation:

• The width is unstable
• The color of the flame is from red to blue
• The farther, the wider
• There are Mach rings

In this case, the first thing that we need to simulate is the width movement of the flame. I adapt the wave function that receives 3 parameters that can control its position and speed.

for (let i = 0; i <= 2; i++) {
 wave(ui.x - 180, ui.y + 180, 20 + i * 40);
}

function wave(x, y, spd) {
push();
translate(x + 30, y + 90, spd);
for (let i = 0; i <= height; i++) {
let sinValue =
(cos((-i * spd) / 10000 + frameCount * 0.1) -
1.2 * cos(frameCount * 0.1)) *
ui.power;
let x = 20 + sinValue;
stroke(400 - i * 2, 100 + i, i * 3, (ui.power * 9 - i)/2);
strokeWeight(1);
line(x - i / (44 - ui.power), i, x * 1.1 + i / (44 - ui.power), i);
scale(-1, 1);
translate(-42, 0);
line(x - i / (44 - ui.power), i, x * 1.1 + i / (44 - ui.power), i);
// line(-x-1, y, -x-1, height);
}
pop();
}

The flame consists of two small flames and each small flame consists of three lines which can make the flame more complex and real. Since they have different inputs of speed, the length of each cycle is different. In this case, It can have a charming effect. As for the “the farther, the wider” feature of the rocket, I make the width of the flame related to the height position. Also, I’ve assigned a power variable to the flame that can make its scale controlled by the user.

As for the color, I made it dependent on the distance to the bottom of the rocket on the RGB index(which is also related to the y-position) and make the transparency according to the distance and the power variable too. In this case, the higher the power is, the longer the flame will be.

Small flame:

Coding 04: GUI, You Tell the Rules

In this project, I use the dat.GUI Libraries for the first time. To adapt this library, we need to add the following code in the index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.js"></script>