Embedded Files
Introduction
Introduction
This exercise is to exchange self-portrait code and share a meaningful memory or dream with our partner, then create an interactive sketch that illustrates the memory or dream within the self-portrait. I'm exchanging the self-portrait with my friend Leyla:) This image was originally created by Leyla herself. After listening to her story of studying away in Madrid and being inspired by the moon she put as decoration, I animated the picture.
I divided her memory into night and daytime. During the night, the moon is rising and Leyla's eyes are closed. If you click the mouse, she would only say "bye" in Spanish because she's asleep. During the daytime, the sun is rising instead and Leyla would say "Good morning" with eyes open haha. (hope I didn't get the word wrong)
The feedback I gained from Leyla regarding my work was that she really likes the details. The rising moon and sun make a lot of sense. The eyes opening and the Spanish part are very interesting.
Demo/Visual Documentation (click the main pic to view video)
Demo/Visual Documentation (click the main pic to view video)
Coding
Coding
The moving moon and sun
The moving moon and sun
To make the moon and sun move, I utilized what we learned in class:
Basic steps for using variables: create, assign a value; update; use.
Using conditionals to achieve the effect that the sun and the moon start going down after reaching the highest point.
Putting the speed of the movement as a variable as well, otherwise, it will get stuck at the point I want it to change directions because the conditions keep changing.
I encountered some difficulties because I wanted the turning point to be in the middle which means I have to use x to measure the positions that also affect y. Jiapei and I looked into the problem together and finally altered it back on the right track.
let moonx = 0;
let moony = 180;
let smoonx = 0.8;
let smoony = -0.5;
let sunx = 0;
let suny = 160;
let ssunx = 0.8;
let ssuny = -0.5;
...
moonx = moonx + smoonx
if (moonx > 200) {
moony = moony - smoony
} else {
moony = moony + smoony
}
...
if (moonx>400){
fill(250, 167, 32)
circle(sunx + 10, suny, 60)
sunx = sunx+ssunx
if (sunx > 200) {
suny = suny - ssuny
} else {
suny = suny + ssuny
}
...
Different greetings
Different greetings
It's very useful and common to have conditionals inside conditionals. I put "bye" under the condition of night while "good morning" under the condition of daytime.
Besides the two conditions divided by the sun and the moon, I also added "mouseIsPressed" as a boolean to control the occurrence of the conversation bubble.
text(), textSize().
I noticed that the position of the text will be affected by the utilization of the display of mouse position.
if (mouseIsPressed == true){
fill(255);
noStroke();
ellipse(310, 100, 130, 90);
fill(255);
noStroke();
ellipse(295, 150, 30, 18);
fill(255);
noStroke();
ellipse(270,160, 15, 10);
fill(0);
textSize(25);
text(' Adiós~ ', 260,110);
}
...
if (mouseIsPressed == true){
fill(255);
noStroke();
ellipse(310, 100, 130, 90);
fill(255);
noStroke();
ellipse(295, 150, 30, 18);
fill(255);
noStroke();
ellipse(270,160, 15, 10);
fill(0);
textSize(25);
text('¡Buenas! ', 260,110);
}
Opening eyes
Opening eyes
This is also simply done by putting different images of eyes under different conditions: day and night.
I used arc() to demonstrate closed eyes.
if (moonx>400){
...
noStroke()
fill(255); // white of the eyes
ellipse(170, 180, 30, 20); // left eye
ellipse(230, 180, 30, 20); // right eye
fill(0); // pupils
ellipse(170, 180, 18, 20); // left pupil
ellipse(230, 180, 18, 20); // right pupil
fill(255); //eye dimension
ellipse(174, 174, 8, 8); //left eye shine
ellipse(235, 175, 8, 8); //right eye shine
//left eyelashes
stroke(0);
line(157, 175, 153, 172)
line(160, 172, 158, 169)
line(165, 170, 164, 168)
//right eyelashes
stroke(0)
line(244, 176, 248, 172)
line(240, 173, 242, 170)
line(236, 171, 237, 169)
...
Findings & Lesson Learned
Findings & Lesson Learned
After we started to learn variables, conditionals, booleans, etc., the logic of codes became a lot more essential and obvious. For me, it felt very helpful to go through the process in the order that the computer would conduct. It often takes a lot of patience and a "light bulb" moment but the logic is always very persuasive and always understandable. So I really like it.
I like how we are able to create interactions through the keyboard and mouse after learning conditionals. I tried it in the last recitation and it became clearer now after the systematic explanations towards the language of the keyboard and the mouse (keycode, etc).
Regarding the difficulty I encountered while trying to change the motion of the object, I realized that the conditions can change all the time and that might cause the object to jump between two instructions all the time. This is what I need to consider when making two related conditionals.
Instead of a lesson, it remains a question that I hope I'll be able to solve in the future: I don't like how the shape "bounces" back from the top which isn't the smooth motion I want.
Another concern is that without instructions, I believe it's hard for viewers to realize that they can make interactions through the mouse. But I didn't choose to add any instructions language wise because I prefer to leave the space for explorations haha.
Reflection Prompts
Reflection Prompts
- What have you learned throughout the process of using the setup and draw functions, as well as variables and conditionals?
Setup and draw are the two most basic functions. In setup, things run only once while in draw, things loop. It's essential to consider how we want one action to be carried out. Even just putting one instruction in different places could make the result entirely different. For example, when background is in setup, all the things that appeared once on the screen stay on the screen. However, when it's in draw, it keeps being updated and covers the previous patterns.
Setup and draw are the two most basic functions. In setup, things run only once while in draw, things loop. It's essential to consider how we want one action to be carried out. Even just putting one instruction in different places could make the result entirely different. For example, when background is in setup, all the things that appeared once on the screen stay on the screen. However, when it's in draw, it keeps being updated and covers the previous patterns.
Variables and conditionals provide more possibilities and flexibilities. I find them very easy to use but on the other hand a bit tricky because the numbers variables stored and the conditions keep changing. I learned to think like a computer in order to figure out why it chooses one specific action throughout the process of fixing the "accidents" I created with variables and conditionals.
Variables and conditionals provide more possibilities and flexibilities. I find them very easy to use but on the other hand a bit tricky because the numbers variables stored and the conditions keep changing. I learned to think like a computer in order to figure out why it chooses one specific action throughout the process of fixing the "accidents" I created with variables and conditionals.
- Reflect on the language your partner used to describe the memory/dream and your interpretation of it using code.
The memory Leyla described was her general life in Madrid when she was studying away at NYU Madrid. According to her description, she had a very healthy routine where she went to bed early and woke up early to enjoy the sunlight in Madrid. She also mentioned that being able to speak Spanish allowed her to experience as much as possible in Spain.
The memory Leyla described was her general life in Madrid when she was studying away at NYU Madrid. According to her description, she had a very healthy routine where she went to bed early and woke up early to enjoy the sunlight in Madrid. She also mentioned that being able to speak Spanish allowed her to experience as much as possible in Spain.
My interpretation was focused on the healthy schedule which was presented by the sun, the moon and her eyes as well as Spanish as a language she speaks.
My interpretation was focused on the healthy schedule which was presented by the sun, the moon and her eyes as well as Spanish as a language she speaks.
I think the oral description of the memory has a more narrative characteristic while the interpretation with code is more symbolic and flat. The key elements are emphasized through patterns more obviously but I don't think my code was as comprehensive as her oral description.
I think the oral description of the memory has a more narrative characteristic while the interpretation with code is more symbolic and flat. The key elements are emphasized through patterns more obviously but I don't think my code was as comprehensive as her oral description.
- What are your thoughts on digital interactions and real-world interactions? After using mouse and keyboard interaction, describe an interactive device — one that doesn’t exist yet — that could let you to recreate better the memory/dream in p5.js
I feel that digital interactions are more straightforward while real-world interactions have more underground information. Also, usually real-world interactions allow more free attempts but digital interactions, no matter how complicated, follow certain rules. However, there are many things only digital interactions can realise because they involve not only human and touchable objects but a more free-dimensional world.
I feel that digital interactions are more straightforward while real-world interactions have more underground information. Also, usually real-world interactions allow more free attempts but digital interactions, no matter how complicated, follow certain rules. However, there are many things only digital interactions can realise because they involve not only human and touchable objects but a more free-dimensional world.
To utilize the unreal effects digital interactions could achieve, I want a device that is not building interactions with "Leyla" directly but with the sun and the moon. What I have in mind is a sphere with a temperature sensor. When you warm it with your palms, it lights up and the sun appears on the screen, "Leyla" wakes up. When it cools down, the night comes instead. I'd really like to see how it could provide a sense of super power.
To utilize the unreal effects digital interactions could achieve, I want a device that is not building interactions with "Leyla" directly but with the sun and the moon. What I have in mind is a sphere with a temperature sensor. When you warm it with your palms, it lights up and the sun appears on the screen, "Leyla" wakes up. When it cools down, the night comes instead. I'd really like to see how it could provide a sense of super power.
Page updated
Report abuse