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.