Starting my journey to explore computing domain!
Course Content: p5.js
Time: 2020/09/08 - 2020/12/08
Instructor: Mimi Yin
In-class activities & Reference
One Perfect Cube
Q & A
-How computing applies to my interests?
After starting my study in ITP, I rethink about the meaning or the function of computing toward my work. At last class, our tutor Mimi asked us is coding just a tool? In most people’s minds, it relates to mathematics, logic thinking and has no connection with art and aesthetic. In some way, it is a tool. Like other self-expression ways (whether it’s softwares, drawings or writings), coding provides a method for us to make our ideas and imagination come true. In this point, computing is the basic means to create interactive or digitized artwork.
On the other hand, while I programming by myself, I find a sense of achievement after I wrote long codes and translated to a simple doodle (Talking about my self-portrait XD). That makes me remember, someone told me it’s fascinating to be able to create beauty and organic art with numbers. I think the interest about algorithms is the translation from numbers and codes to images, sounds, interactions,etc. It’s the combination of sense and sensibility, the fusion of practice and creativity.
How computing applies to my interests? Maybe one day my interest will be coding.
-What projects do I imagine making this term?
Personally, I prefer including different factors in my work. The project could mainly consist of graphs, but I hope it can add other elements, such as sounds or mouse interaction.
-What projects do I love?
One of the reasons I want to join ITP is I was moved by TeamLab’s works. I once went to Singapore and watched their show. Although the exhibition was indoors, the projection of the natural pattern and interactive installations created a magical atmosphere that made me feel like playing outside. The exhibition center is literally an amusement park.
Photos of TeamLab
Self-portrait
I want to add some interative elements of the work. While I looking though the p5.js reference, I discovered this interesting command named mouseIsPressed.
Therefore, if someone press their mouse, just like poke my face, the emotion will change.
Final work presentation
Nomal Stage
Mouse Press
Problems & Solutions
- arc()
The original mode of arc is CENTER. It's unnecessary to reset.
- push() & pop() & translate()
My biggest problem is translate(). Translate() help us to replace the coordinate of original point. Also, it's cumulative and apply to everything that happens after and subsequent calls, which cause inconvenience sometimes. To sovle this problem, we can use push() before the teanslate() to start a new stage and record original stage, and use pop() after translate() to restore the original stage. Therefore, the following codes won't effect by translate(), and we can still take (0,0) counted as original point.
- mouseIsPressed()
Using if{} else{} syntax for the interaction.
-rotate()
rotate() default (0,0) / origin as the center of rotate. To let the object rotate based on its central point, we should reset the origin by translate(). ATTENTION! The coordinate of object will also change.
-fill()
If we don't set the color at first, the system will default the filling color of objects is white. The first command of fill() will also effect the object before.(IS THAT RIGHT?)
Reference Roam Mark something I can't understand yet :)
- translate
function draw()
{
background(200);
rectMode(CENTER);
translate(width / 2, height / 2);
translate(p5.Vector.fromAngle(millis() / 1000, 40));
rect(0, 0, 20, 20);
}
Variable
-windowWidth, windowHeight
-mouseX, mouseY
-pmouseX, pmouseY
-frameCount
-console.log: To print massage to consle, useful to affirm variable number
Monocular
I was inspired by the image once shown in D.Shiffman’s video: A white circle with a black background.
It caught my imagination: a little monster with its eye closed. So I create this shy and sleepy monocular monster.
Final work presentation
Interaction & Problems
For the mouse interaction, when the code first runs, the circle which represents the monster’s eye will avoid the mouse. I implement this through map() and mouseX/Y. A minor flaw is that while the mouse moves from the center to the edge, the circle will follow the mouse, even though I use if() to limit its movement. I think the reason is the use of map().
When the mouse is first pressed, the monster will open its eyes and show its real body color.
The automatic movement is, after the first mouse click, the eye of the monster will open and close, making people feel like the monster is sleepy. If the people try to press the mouse again, the eye of the monster will immediately open.
About the random part, the color of the monster is changeable. I picked 4 main characters from “Monster College”, and took their eyes’ color as reference. Every time when the program runs, the random() will generate the corresponding characters' color.
I also tried different versions of the works, such as the eye will close after the first click, or there is an eyeliner when first pressing the mouse. Finally, I picked the one which matches my idea best.
Eyeliner version link: https://editor.p5js.org/Lea-0821/sketches/FNb7YJ-BS
Other proposal and the difficulties of it
My idea about Puddle
My very first idea is a project named “puddle”. I want to imitate the rain, and when the mouse is clicked, there will be a puddle showing up.
Problems
There are several problems that I cannot solve yet.
-
How to repeat the animation of each “rain” with time difference?
-
How to make the density of the rain differently and at the same time the animation still plays?
I have written the rain’s animation code and the random density of rain. But, it’s hard to put two codes together, because in the rain’s animation, the background() have to be placed in the function drew(), while the density command has to put the background() in the function setup(). My roommate suggested that I can use array, but I haven’t learned it yet, so maybe I can achieve this idea later.
Random density link: https://editor.p5js.org/Lea-0821/sketches/3oQAmULum
Rain animation link: https://editor.p5js.org/Lea-0821/sketches/exJGK0bXX
Responsive rectangle
GUI Interfaces
Example
- Drag: https://editor.p5js.org/icm/sketches/B13wH5T3
Using 2 boolean variables:
var dragging = false; // Is the object being dragged? --> change rect location
var rollover = false; // Is the mouse over the ellipse? --> change color
Using 2 functions: dragging & rollover
mousePressed():To change dragging state, rectangle's x & y coordinate
mouseReleased(): To change rollover status
Using 2 main variables:
x, y, offsetx, offsety
- Knob: https://editor.p5js.org/icm/sketches/HkfFHcp2
Using atan2() to rotate line
Question:
Line 57-79 is to display the degree number, what's the meaning of line 71-79, "count ==" & "count ===" ?
- Slider: https://editor.p5js.org/icm/sketches/H1LXU9ah
Using boolean variable:
let dragging = false; // Is the slider being dragged? --> change slider location & rect color
Using constrain():
To limite rect's location between the slider's line.
Zoom room
Nowadays, zoom become an important tool for people to communicate remotely. For this week's teamwork, Nick and I decided to build our zoom room, using boolean variables to control the buttons.
Final work
Leave the light on
1. Using 2 boolean variable
link: https://editor.p5js.org/Lea-0821/sketches/iZOC4dqLs
let on = false; --> if on is true, draw the red rect
let hasleft = true; --> change the "on"'s status
--> If mouse inside the rect & hasleft = true, change the on and turn the "hasleft" to false
If mouse outside the rect, "hasleft" turn to true.
2. Using function mouseMoved()
link: https://editor.p5js.org/Lea-0821/sketches/CMJZ0WyTU
Using 2 variable:
var on = false;
// the last location of the mouse, 0 represent it out side the box
var exlocation = 0;
If change the sequence of if(), it will be the same as the first method.
Bouncing ball
Ocean - Perlin Noise 1D
Inspiration: 1D Perlin Noise Function
By learning Perlin noise() function, I extended the basic example to create the visual effect of ocean cut surface and wave water flow.
Basic Example
Ocean
Link: https://editor.p5js.org/Lea-0821/sketches/LH3BYmLyw
Interaction: Slowly move the mouse to create different wave, press the mouse to reset a new ocean.
Perlin Noise 2D
Link: https://editor.p5js.org/Lea-0821/sketches/p13nE7s9K
By using two-dimension Perlin noise, I make a personally customized profile picture. For the next step, maybe the program can allow people input their name by the keyboard.
Column worksheet
! Reduce the steps of program running
Put the highlighted part up to the first for() loop. As a result, if mouseX<... && mouseX>... are true in the first loop, the second loop doesn't have to execute every time.
Light spot (Example)
Link:
https://www.openprocessing.org/sketch/816935
Using two for loop to make a gradual changable function. If change the program a little bit and make the function portable, there will be many possibilities.
Rain
Interaction
Slowly move the mouse to create different wave, press the mouse to reset a new ocean.
Code & Logic
By using class and array, I complete the idea from week 2.
Test code #1 - moving rain: https://editor.p5js.org/Lea-0821/sketches/exJGK0bXX
Test code #2 - random rains: https://editor.p5js.org/Lea-0821/sketches/3oQAmULum
Bouncing ball worksheet
Portable bouncing function: Why using return?
"Whenever you pass a primitive value to a function, you do not actually pass the value itself, but a copy of that variable."
----<Learning Processing> by Daniel Shiffman
By useing return, the globle variable / the variable in draw() xspeed or yspeed will be changed with user-customized function.
Code link: https://editor.p5js.org/Lea-0821/sketches/rm1Qi1Xxt
Pond
My idea about Puddle
I want to create a pond full of lotus leaves. The mouse can create the ripple in the pond. As the wave moves, the lotus leaves will float.
Interaction & Animation
-
Ripple
The ripple is following the move of the mouse. The ripple’s range is limited, which is 200 pixels.
-
Lotus leaf
When the ripple reaches the leaves, the leaves will float.
I only limit the number of leaves, which is 4-5.The arrangement of lotus leaves, the shape and color of each leaf is created randomly by program.
-
wave / light point on the water surface
I use the noise() function to imitate the light point on the pond surface.
Coding & Logic
-
Ripple
I use if() & else() to make a ripple animation loop.
With a boolean variable “move” and mouseMoved() function, I make ripple animation to start at the beginning when the mouse moves.
2. Object communication
Class leaf - float() function : change the direction of leaf
Class leaf - move() function: move
3. Test code
#1 (float): https://editor.p5js.org/Lea-0821/sketches/mv3EbqyOx
#2 (leaf): https://editor.p5js.org/Lea-0821/sketches/are7c1Pph
#3 (ripple): https://editor.p5js.org/Lea-0821/sketches/HJMlldlRt
#4 (ripple2): https://editor.p5js.org/Lea-0821/sketches/daW5Uslyn
Final work
Web/API/Element/animate Reference
HTML Element Reference
Rainy window
Link
https://editor.p5js.org/Lea-0821/sketches/7UbAHbfSR
Reference
https://www.openprocessing.org/sketch/711666
Our idea about rainy window
Sihan and I want to manipulating an image about Shanghai street scene, and create a sense of the rainy window. The photo is blurry at first, when rain drops on the window, the path of the rain on the window should be clear. Also, it should show a fish-eye-like scene in the raindrops。
Final work
Sound playing buttom
Problem
I wanted to load 10 music pieces in the p5.js and link 10 buttons with each of them. I used a for loop with buttons[i].mousePressed(), toggle(i) function and an argument to convey the index of the song. But the problem is when I run the program, all the music play at the beginning. Maybe the reason is the argument in the toggle function, but I don’t know why.
Here is the code:
https://editor.p5js.org/Lea-0821/sketches/Ip0PHZLDW
Answer
https://discourse.itp.io/t/question-about-sound-playing-button/193
* callback function define
buttons[i].mousePressed( function() { toggle(i); } );
* var & let
for(let i=0;i<10;i++)
Bubble -- Ambient music
Our idea about Bubble
Our assignment this week is creating a Sihan and I are inspired by a Youtube video, which used p5.js and SuperCollider(a sound-making program base on C++) to create ambient music with mouse interaction.
This circle image made us remember the bouncing balls project we have made. Therefore, we decided to make ambient music base on the random movement of bouncing balls.
Final work
Link: https://editor.p5js.org/Lea-0821/sketches/-dz8RtY0ck
The imagination of the sound:
Like you sink in the ocean slowly. When you try to breathe, the bubbles come from your mouth. The only thing you can see is the bubble float away from you. You continually sinking, like the water want to bring you somewhere.
Process & Problems
-Music design
We create background music to set the tone of the piece. We use the "Random Diatonic Chords" example from the last week, and the frameCount to set the interval between two notes.
When bubbles overlapping with each other, it will play a random sound effect, which we found on the Internet. Since the impact of the ball is random, the music generated by the program is unique every time we play it.
-Toggle balls & music
In this piece, we use the same logic as the toggle balls. If we don't use this logic, the sound effect will be played repeatedly when the balls cross, and the final music will be very harsh.
-Visual Effect
For the visual effect, we used the code created by Sayama, and change some parameters.
Reference link: https://www.openprocessing.org/sketch/875086
Future plan
To create the image according to the imagination of the sound.