Week 2: Interactive Memories and Dreams
Partner: Sean Hu
His self-portrait:
His memory: He remembered that the first time he was invited to a birthday party in college, he put on a pair of sun glasses, danced with music and had a great time.
My interpretation: He loves the vibe of a party, and loves dancing with the crowd.
Feedback: “It’s very cool! The movement is interesting and fits my memory quite well. It’s crazy!”
My project link:https://editor.p5js.org/jx2494/sketches/tkOTkXhGi
My Reflections:
Throughout the process of using the setup and draw functions, I learn to fully use the differences between these two features. For example, the background can be drawn in setup if things are motionless, but when Something interactive is being drawn, it’s better to draw background in draw function to avoid unwanted traces. Here are two examples when the background is not updated in real time:
I link the mouse position to control the size of circles in the background to express the music rhythm in a party, and used push, translate and pop to imitate his dancing in the party. His move changes over time.
When the mouse is clicking on the text on the top, the party starts. He puts on a pair of sunglasses and the moving speed is increased from 2 to 15. This is how I had done the process:
background(187, 255, 255);
fill(map(mouseX, 0, width, 0, 255), 255 - map(mouseX, 0, width, 0, 255), 100);
noStroke();
ellipse(0, 0, map(mouseX, 0, 300, 0, width / 2));
ellipse(600, 0, map(mouseX, 0, 300, 0, width / 2));
ellipse(0, 600, map(mouseX, 0, 300, 0, width / 2));
ellipse(600, 600, map(mouseX, 0, 300, 0, width / 2));
push();
translate(x - 300, -50);
/*his portrait*/
fill(0);
if (mouseIsPressed && mouseX > 240 && mouseY <= 30) {
fill(187, 255, 255);
rect(200, 0, 200, 30);
textSize(30);
fill(random(100, 255), random(100, 255), random(100, 255));
text("PARTY!", width / 2 - 60, 30);
fill(random(100, 255), random(100, 255), random(100, 255), 80);
rect(0, 0, width, height);
}
fill(255);
rect(170, 480, 40, 10);
rect(210, 490, 10, 10);
rect(160, 490, 10, 30);
rect(170, 520, 40, 10);
rect(210, 530, 10, 30);
rect(170, 560, 40, 10);
rect(160, 550, 10, 10);
rect(240, 520, 10, 40);
rect(250, 560, 30, 10);
rect(280, 550, 10, 10);
rect(250, 530, 40, 10);
rect(250, 510, 30, 10);
rect(280, 520, 10, 10);
rect(310, 540, 10, 20);
rect(320, 560, 30, 10);
rect(320, 530, 30, 10);
rect(350, 520, 10, 50);
rect(320, 510, 30, 10);
rect(380, 510, 10, 60);
rect(390, 510, 30, 10);
rect(420, 520, 10, 50);
}
If there is a better device that can help me recreate better the memory or dream in p5.js, I think that device should enable us to translate drawings to codes, because drawing curves and shapes that has a definite rotation in p5.js is very hard for starters, and then edit the drawings to make them interactive. It should also enable us to highlight which part a specific part of code takes place in the canvas, so we can modify them more easily.