Zhengyang Wan

Introduction: Net art is a form of art that relies on the Internet as its primary medium of spreading. Compared to traditional computer art, such art depends and makes use of more on the functions and features of the websites. Another definition can be the form of art that concentrates on the emergence of the Internet and reflects its impact on human’s life.

The creation process was posting all the contents in the author’s computer into a public website which can be accessed by everyone. In other words, they share everything about their cyber life. The work was suspended in 2003, but thanks to Rhizome, at least the archive of this website can be checked now. 

The website is quite unconventional. To be exact, it doesn’t have a user-friendly interface but just a bunch of files which are hard to open without any CS knowledge. No background, no instruction, no beautiful images but only many links. When entering the website, the audience needs to repeatedly confirm the popup on the top and they will eventually see a sentence: “You are on my computer”, then they can see the content. 

The intention of this project is to test the state of “hypervisibility”, which refers to revealing everything to the public. Here the author expresses his concern for the inevitable and ubiquitous incursion for people’s online privacy, and government’s inspection on people’s daily life through the cyber world.

This art emerged in a day when github and other open source platforms hadn’t emerged, but websites had already become common. This is a push for “open source” as this whole work can be copied by everyone, which is the idea behind github and other platforms. But this work also stresses the importance of reasonable usage of the hypervisibility with good intentions, which means surveillance and commercial purposes are against the spirit of “open source”.

Discussion:

Lots of concepts from this artwork can be potentially applied to my own project. For example, “unusualness” is probably one of the most significant features of this work, as the idea it wants to reveal has never been tried before, thus can have a deep impact on the audience. In my future project, I will also avoid the commonplaces and pick some themes that can resonate with the audience. 

This project also embraces one essential concept from CCLab—innovation, which means we don’t need to be restricted to some fixed requirements like user friendliness and interaction, instead, what’s really important is the idea behind the project and all the features employed in the project are just a means.

Link to the project:  https://lifesharing.rhizome.org/

Project name: Swirling

Code: https://editor.p5js.org/Sky-Falling/sketches/ggdwmOlj7

Github:https://sky-falling.github.io/cc-lab/particleworld/

Description:  This is a testament to the irreplaceable utility of OOP and an interesting game as well. Player can click on the evil insects on the screen to kill them. If you luckily kill them all, then you will see a big congratulation line: “you win”. As known to all, lake is the main place to breed insects and you can control raindrop to strike them. Besides the fun of game, you can also enjoy the beautiful moment when raindrop collides with the surface of the lake. Worried about computer lag? Don’t worried, even you click your mouse super fast, the garbage collector method will still be able to limit the amount of computer calculation by constantly deleting unused instances.

Video Documentation:

Coding:

 isClicked() {
if (dist(mouseX, mouseY, this.x, this.y) < 15) {
this.life = false;
}

 for (let i = insect.length - 1; i >= 0; i--) {
let p = insect[i];
p.isClicked();
if (p.life == false) {
insect.splice(i, 1);
}
}

This is a method within the class “Insect” and it will turn a parameter “life” of the insect to be false if player is detected to click the insect. By doing so, the keyPressed() function can detect and delete the killed insects by method “splice()”. A key point here one should notice is that the for loop should start from the last index to make sure every instances inside the array can be examined.

for (let i = particles.length - 1; i > 0; i--) {
let p = particles[i];
p.update();
p.display();
if (p.brightness < 40) {
particles.splice(i, 1);
}
print(particles.length);
}

Besides updating the states of all ripples which is quite apparent, this part has another unique function: delete the ripples that are already too dim (below 40 in this case) to reduce calculation for the computer. Without this deletion process, the array will grow extremely large with user’s click time, largely reducing the framerate.

 this.x = startX;
this.y = startY;
this.growth_max = random(1, 6);
this.radius_max = random(50, 200);
this.radius = int(random(10, this.radius_max));
this.brightness = random(100, 255);
this.thickness = random(0.5, 1.5);
this.growth = random(this.growth_max);
this.start_radius = random(2 * PI);
this.arc = random(PI / 5, PI / 2);
this.start_radius_speed = random(0.05);
this.color1 = random(255);
this.color2 = this.color1 + random(-100, 100);
this.color3 = this.color1 + random(-100, 100);

You may wonder what do these parameters refer to respectively. Actually, x and y are the positions of the object, growth_max and radius_max determine the growth rate of its radius and its original radius, start_radius and arc determine the exact angle of this arc, and thickness is the stroke weight for the arc.

Failure and Success: The main obstacle is to find an appropriate balance between brightness and amount of calculation. If I increase the thredshould of brightness, then one ripple may disappear too soon, even before it turns dim. If it’s too low, then there will be too many instances at the same time and pose a huge burden on the computer. 

Reflection:

• What is Object-Oriented Programming (OOP), a Class and an Instance of the Class?

Answer: A class can be comprehended as a combination of several variables and functions. However, the variables and functions can be seen as only available within the class, which largely tidies and modulizes the code. In OOP, programmers employ “class” to achieve the desired effect rather than defining millions of global variables and functions. Such programming method focus on descirbing the desired effects inside the class constructor, and when he wants to call it, he can simply create some instances and use the corresponding methods to perform such effects. Instance can be understood as a copy of all the elements of the class, so after creating the instance, it will inherit all the methods and variables inside the class.

• Discuss the effectiveness of OOP. When is OOP useful? In what way can it be utilized?

Answer: OOP can make the code easier to read and maintain. As the methods and variable inside a class are only available on a specific kind of object, you don’t need to worry about the problem of repeated names of functions and variable. You can use the same name inside different classes. When the code becomes long and has a complex structure, OOP then is extremely useful under such case. You can first figure out which object needs to achieve what effects, then you can follow this framework and build a class. When you need to use it, you only need to create some instances.

• Describe the objects you have created. What properties and methods were implemented? What kind of behaviors did you create by manipulating them?

I have created 2 obejects: Particles and Insect. The Particles contains lots of properties, including radius, position of the arc, and speed of growing, which together determines a small segment of the ripple. Its method is update() and display(). Insect don’t have too many properties as its movement is relatively straightforward, only the insect’s position and its speed at different direction. Except for update() and display(), it has 2 additional methods named “isClicked” and “checkbound”. One is to detect whether it’s clicked or not and the other is to avoid it wandering off the canvas. So the behaviour of the insect is disappear when being clicked and the behaviour of the ripple is spreading out and becomes dimmer after being generated. 

• Please share it if there is any challenging and confusing aspect(s) in the OOP concepts and techniques

I wonder if we can create a method that can work on multiple classes which involves similar properties and movements. 

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. 

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.