Project title: Trisha’s Floating Dream
Link to the project:https://editor.p5js.org/N-A-E-S/sketches/N5_MncvSk
Description: This P5js work is based on the selfie from Trisha, who depicted her dream of everything around her floating and changing color. According to her description, I added some animation to her selfie and produced this work.
Visual Documentation:
Coding:
To achieve the animation of floating, I decided to introduce a variable to count the time. The reason why I didn’t choose frameCount is that this number increases too fast to control the movement, and decreasing the frameset would influence the tracking to the mouse position. Thus I introduced a variable t that increased 0.01 each frame. To limit the movement of all triangles, I decided to times a sin() function or cos() function after the Y axis of triangles.
noStroke(); fill(154, 205*cos(t), 155*sin(t)); triangle(200, 100+15*sin(t), 200, 200+15*sin(t), 350, 100+15*sin(t)); fill(255, 225*cos(t), 75*sin(t)); triangle(40, 100+15*cos(t), 200, 25+15*cos(t), 100, 150+15*cos(t)); fill(255*sin(t), 50, 175); triangle(400, 150-5*sin(t), 300, 50-5*sin(t), 380, 10-5*sin(t)); fill(154, 212, 54); triangle(0, 70, 150, 0, 0, 0); fill(126*cos(t), 235*sin(t), 184*cos(t)); triangle(0, 100+15*sin(t), 50, 200+15*sin(t), 100, 200+15*sin(t)); fill(126, 270, 184); triangle(200, 50+15*cos(t), 260, 10+15*cos(t), 250, 70+15*cos(t));
with the triangle functions, these triangles will slowly move around within 30 pixels, acting as if they are floating.
Also, I used the same method to achieve the switching of color
Then I expected to achieve the function of keeping the eyes looking at the mouse, so I used a module function to control the distance, which eventually caused the consent shaking of the eyeballs. At first, I decided to use the map() function to replace but I found it quite funny so I just kept it.
// eyes strokeWeight(1) fill(0); ellipse(140,240,30); fill(255); ellipse(140+(mouseX-140)%10, 240+(mouseY-240)%10, 10); strokeWeight(1) fill(0); ellipse(270,240,30); fill(255); ellipse(270+(mouseX-270)%10, 240+(mouseY-240)%10, 10);
As for the switching hair color part, I just declare key “s” to be the key that changes the color. Every press would lead to a random color.
Entire Coding:
function setup() { createCanvas(400, 400); background(255, 234, 124); } let t=0; let r=70; let g=100; let b=255; // add your code here! function draw() { background(255, 234, 124); t+=0.01; // hair // noStroke(); if(keyIsPressed) if(key=='s') { r=random(255); g=random(255); b=random(255); } fill(r,g,b); rect(25, 200, 350, 200); noStroke(); fill(r,g,b); rect(25, 160, 350, 50); fill(250, 250, 250); strokeWeight(1) ellipse(200, 200, 300, 350); fill(r,g,b); arc(width/2, height/2.3, 350, 320, PI, PI*2, CHORD); arc(50, 90, 400, 250, 0, HALF_PI); ellipse(266, 130, 180); // curves noFill() strokeWeight(5) arc(200, 250, 50, 90, PI*0, PI, CHORD); // eyes strokeWeight(1) fill(0); ellipse(140,240,30); fill(255); ellipse(140+(mouseX-140)%10, 240+(mouseY-240)%10, 10); strokeWeight(1) fill(0); ellipse(270,240,30); fill(255); ellipse(270+(mouseX-270)%10, 240+(mouseY-240)%10, 10); // curves on the left noFill(); stroke(600); strokeWeight(5); bezier(0, 250, 0, 100, 100, 0, 200, 0, 0, 0, 100, 0); noFill(); strokeWeight(5); bezier(0, 100, 0, 100, 50, 0, 100, 0, 0, 0, 100, 0); noFill(); strokeWeight(5); bezier(0, 40, 0, 15, 30, 0, 40, 0, 0, 0, 50, 0); // curve on the right noFill(); stroke(600); strokeWeight(5); bezier(400, 0, 10, 0, 400, 0, 400, 160, 50, 0, 0, 0); noFill(); strokeWeight(5); bezier(400, 0, 160, 0, 400, 0, 400, 105, 50, 0, 0, 0); noFill(); strokeWeight(5); bezier(400, 0, 270, 0, 400, 0, 400, 40, 50, 0, 0, 0); // abstract design noStroke(); fill(154, 205*cos(t), 155*sin(t)); triangle(200, 100+15*sin(t), 200, 200+15*sin(t), 350, 100+15*sin(t)); fill(255, 225*cos(t), 75*sin(t)); triangle(40, 100+15*cos(t), 200, 25+15*cos(t), 100, 150+15*cos(t)); fill(255*sin(t), 50, 175); triangle(400, 150-5*sin(t), 300, 50-5*sin(t), 380, 10-5*sin(t)); fill(154, 212, 54); triangle(0, 70, 150, 0, 0, 0); fill(126*cos(t), 235*sin(t), 184*cos(t)); triangle(0, 100+15*sin(t), 50, 200+15*sin(t), 100, 200+15*sin(t)); fill(126, 270, 184); triangle(200, 50+15*cos(t), 260, 10+15*cos(t), 250, 70+15*cos(t)); // mouth noStroke(); fill(230, 130, 0); square(170, 300, 35, 9); // earrings fill(255, 245, 94); ellipse(50, 290, 50, 60); fill(r,g,b); ellipse(50, 290, 20, 40); fill(255,245,94); ellipse(340, 290, 50, 60); fill(r,g,b); ellipse(340, 290, 20, 40); if (keyIsPressed) if(key=='s') { print(key) } //save("sketch.png"); }
Reflection: The use of maths functions could provide a much easier way to the goal.
Partner comment: The eyeballs moving part is quite funny though the hair changing is a bit too fast.