Project Link:
https://editor.p5js.org/Sky-Falling/sketches/ACk7mpoXz
Partner: Shuer Gu
Her dream: Her dream is not that detailed so I add some my own intepretation. It’s about herself floating on the sea. Floating on sea is long associated with sorrow or loneliness and in the original sketch there also appears an owl. So the time setting of this project is at sunset when she was floating on sea without anything within her sight else than seawater. But an owl appeard, moving forward and backward to keep her company.
Her reflection: She’s generally satisfied with my work especially the 3D effect it has shown. But she also mentioned that the owl was not so in coordinate with other parts.
Brief Description: In this project, which is actually a simple game, you can play as a girl trapped on sea under the sunset and you can control her boat to change speed and moving closer or further. What’s more, to be more in line with the atmosphere, you can change the weather to be raining and there will be a owl following the cursor at which the girl is staring. In order to make it look real, the scale of boat and girl will also alter in accordance with their location. For the production part, I first alter the coordinate of the portrait so that she can be “on the boat”, then, I add several parameters like the coordinate of their center and scale to control their location and size. To add interactivity, I also create some “game mechanism” like controlling the speed and distance with keyboard. As there’s an owl on the original painting, so I also enable player to move it with the cursor to make the girl not so lonely. If you pay attention to details, then you will also find that the eyes of the girl will move towards the owl, which is inspired by someone’s work. The colors of the sky, sea and boat create a very immersive environment in line with the feeling of “floating on the sea”.
Visual Documentation:
Code:
Scale = (y - 300) / 300; //calculate scale based on position
if (keyIsPressed == true) {
if (key == "w" && y > 360) {
y = y - 1.5 * Scale ** 1.5;
}
if (key == "s") {
y = y + 1.5 * Scale ** 1.5;
}
if (key == "a") {
acc = -0.2;
}
if (key == "d" && speed < -0.3) {
acc = 0.3;
}
if (key == "1") {
weather = "rain";
}
if (key == "2") {
weather = "sun";
}
} //determine your movement by pressing keyboard
speed = speed + acc;
acc = 0;
if (x > 0) {
x = x + speed * Scale;
} else {
x = 800;
} //move the boat and ensure it's within canvas
This part is to calculate the movement and the scale of the objects based on how you press the keyboard. I paid special attention to the boundary to avoid objects exiting the canvas. And what you can change is acceleration because it can ensure smooth movement.
if (weather == "sun") {
noStroke();
fill("red");
arc(800, 0, 300, 300, PI / 2, PI);
} //sun
if (weather == "rain") {
for (let i = 1; i < 30; i++) {
rain_x = random(800);
rain_y = random(800);
Scale_rain = random(0.5, 1);
rain(rain_x, rain_y, Scale_rain);
}
} //rain
strokeWeight(1);
This part use if statement to control the weather which is quite interesting.
fill("#837A28");
stroke("black");
strokeWeight(1 * Scale);
beginShape();
vertex(x, y - 120 * Scale);
vertex(x + 70 * Scale, y - 120 * Scale);
vertex(x + 50 * Scale, y - 95 * Scale);
vertex(x + 70 * Scale, y - 70 * Scale);
vertex(x, y - 70 * Scale);
endShape();
strokeWeight(7 * Scale);
stroke("black");
line(x, y - 40 * Scale, x, y - 120 * Scale);
strokeWeight(1 * Scale); //first draw the flag
person(x, y); // then person
fill(120, 20, 20);
strokeWeight(1 * Scale);
stroke("black");
beginShape();
curveVertex(x - 110 * Scale, y - 50 * Scale);
curveVertex(x - 110 * Scale, y - 50 * Scale);
curveVertex(x - 90 * Scale, y - 40 * Scale);
curveVertex(x - 70 * Scale, y + 30 * Scale);
curveVertex(x + 70 * Scale, y + 30 * Scale);
curveVertex(x + 70 * Scale, y - 30 * Scale);
curveVertex(x + 70 * Scale, y - 30 * Scale);
endShape(); //finally the body of the boat
This is how I draw the boat. The sequence of which to draw first really matters unless you want the girl to be squeezed out of the ship.
How I achieve it: Before actually working on the portrait part, I first do some experiment to explore how to achieve such effect that the boat is floating on the sea. After drawing the simple boat, I realize I can add a “scale” factor to control the size of boat according to the postion to create 3D effect. Everything worked well by now then my nightmare came. I soon realized the real difficulties is how to change the coordinate of the portrait so that she can be on the boat. It took me so much time to adjust all coordinates and this process is quite tedious. My last task was to build the mechanism of the movement of the boat. I applied what I have learned on class like acceleration, deceleration and if-else statement, but my case was worth particular attention on how to create the 3D effect. So I do lots of adjustment until finally finding the reasonable proportion. To make it more like a game, I also add a weather system and the owl to increase interactivity.
Reflection: 1) This work make me realize unlike traditional drawing on paper, the unique benefit of computer drawing is you can always erase what you have drawn. So never be afraid of doing experiment on your ideas because something they can be one important source of inspiration. For example, I didn’t plan to create weather system at first until I tried to add waves to the sea but accidentally found that they looked more like rain than waves. Although this story is somehow funny, it did make me realize you could always gain new inspiration and ideas in the course of your creation, so you don’t need to have already planned everything before you actually work on it.
2) Another advantage of computer art is the interactivity. If you want to create something interactive in real life, it’s always so time consuming, but using computer can save a lot of work. Just adding several parameters is enough to make the objects move at your will. And we should consider how to let user interact with what you have created at the very beginning so that you don’t need to adjust all parameters at the end, which will be quite suffering. Anyway, interactive works are a more vivid form of art, so just make full use of what computer is really good at.
Additional questions 1) I have already learned some basic computer language in interaction lab and applied it to control some equipments. But for computer drawing, I need to seek elaborate use of these language. After created this project, I learned how to create 3D effect by stretching the objects according to their postions. What’s more, I also realized the importance of the sequence of the objects that you draw, because the later drawn objects can cover the previous ones.
2)Actually my partner didn’t give me any detail about her dream, so this project is mostly my own interpretation. Coding other’s dream is like visualizing a story. The way I interpreted it was to recap the atmosphere of the scene using appropriate colors and visualize the plot.
3) The main difference is real-world interaction is 3D but digital one can only happen on a plane. In this sense, real-world one embodies more possibility and is more immersive by nature. Even the best VR glass cannot be more “realistic” than the real world. However, real-world interaction is restricted by Newton’s laws and other physical law, which means there’re some crazy things you can’t do. But digital interaction almost allow you to achieve anything, and it’s also more friendly in price, easier to duplicate and also many other unique advantages. If I can have the opportunity to experience something hasn’t been invented, I will choose a super developped “VR” glass. The difference with the existing one is that current glasses only involves sight. But human has 5 senses, so the non-existing VR can let you recall the smell of sea and the sound of blowing sea wind. I believe it can lead to a better recreation.
Leave a Reply