Mini Project 2: Interactive Memories and Dreams

Link to Project: ❀

Intro to Project:

I remember seeing Echo's project in the gallery known as "Project 2!" and thinking it was beautiful, so I felt quite honored to work on it for this project. Our task was to add basic animation to someone else’s character from the first project, which was inspired by a dream. Echo often dreams of singing on top of a bus. Since I’m a beginner, I found this a bit challenging at first. We talked about her passions, like music and photography, which I thought also reflected dream-like qualities. I added sparkles and bubbles to enhance the dream like atmosphere, and now, when you click on the camera, it flashes, the screen turns white, and her face shows a shocked expression. In terms of feedback from my partner, we agreed that I am not as green in real life as my project presents me to be.

CODE

let x = 0;

let flashRadius = 0;

let isFlashing = false;

// Bubbles floating around

let bubbles = [

{ x: 30, y: 380, size: 150, dx: 1, dy: 0.5 },

{ x: 100, y: 600, size: 400, dx: 0.7, dy: -0.3 },

{ x: 600, y: 600, size: 400, dx: -0.6, dy: -0.8 },

{ x: 420, y: 450, size: 100, dx: 0.4, dy: 0.4 },

{ x: 570, y: 320, size: 90, dx: -0.5, dy: 0.6 },

{ x: -10, y: 800, size: 600, dx: 1.2, dy: -0.7 },

{ x: 550, y: 800, size: 500, dx: -0.8, dy: -1 },

];

function setup() {

createCanvas(600, 600);

}

function draw() {

background(2, 79, 156);

// stars

noStroke();

// star 1

fill(255, 231, 122);

ellipse(80, 100, 40 + x, 90 + x);

fill(2, 79, 156);

ellipse(60, 55, 40 + x, 90 + x);

ellipse(100, 145, 40 + x, 90 + x);

ellipse(100, 55, 40 + x, 90 + x);

ellipse(60, 145, 40 + x, 90 + x);

// star 2

x = 3 * sin(frameCount * 0.1) + 2;

fill(255, 231, 122);

ellipse(50, 180, 20 + x, 40 + x);

fill(2, 79, 156);

ellipse(40, 160, 20 + x, 40 + x);

ellipse(60, 160, 20 + x, 40 + x);

ellipse(40, 200, 20 + x, 40 + x);

ellipse(60, 200, 20 + x, 40 + x);

// stars 3

fill(255, 231, 122);

ellipse(490, 240, 40 + x, 60 + x);

fill(2, 79, 156);

ellipse(470, 210, 40 + x, 60 + x);

ellipse(510, 270, 40 + x, 60 + x);

ellipse(470, 270, 40 + x, 60 + x);

ellipse(510, 210, 40 + x, 60 + x);

// moon

fill(255, 231, 122);

ellipse(500, 90, 140);

fill(2, 79, 156);

ellipse(490, 86, 138);

// bubbles

fill(255, 25);

for (let bubble of bubbles) {

ellipse(bubble.x, bubble.y, bubble.size);

bubble.x += bubble.dx;

bubble.y += bubble.dy;

if (bubble.x < 0 || bubble.x > width) {

bubble.dx *= -1;

}

if (bubble.y < 0 || bubble.y > height) {

bubble.dy *= -1;

}

// music notes

push();

rotate(-PI / 9);

fill(255, 231, 122);

noStroke();

rect(313, 610, 5, 40);

ellipse(300, 630, 30, 20);

arc(335, 595, 40, 10, PI / 2, PI);

pop();

// note 2

push();

rotate(0.6);

fill(255, 231, 122);

noStroke();

ellipse(310, 310, 20, 14);

ellipse(350, 310, 20, 14);

rect(318, 288, 5, 40);

rect(358, 288, 5, 40);

rect(338, 271, 40, 5);

rect(338, 280, 40, 3);

pop();

// hair color and shape

noStroke();

fill(219, 116, 26);

arc(300, 300, 370, 400, PI * 4 / 5, PI / 5);

// body part

fill(0);

noStroke();

arc(300, 600, 350, 400, PI, 0);

// face color & shape

fill(219, 186, 149);

arc(300, 300, 300, 300, 0, PI);

// earphones wear

fill(0);

arc(300, 300, 310, 310, PI, 0);

fill(219, 116, 26);

arc(300, 325, 296, 310, PI, 0);

// earphone hearing part

stroke(130, 0, 0);

strokeWeight(6);

fill(0);

ellipse(150, 330, 40, 70);

ellipse(450, 330, 40, 70);

// shocked from flash!

if (isFlashing) {

// scared eyes

fill(255, 255, 255);

stroke(0);

strokeWeight(10);

ellipse(240, 305, 100, 140); // Left eye open

ellipse(360, 305, 100, 140); // Right eye open

ellipse(240, 305, 10, 10); // Left eye open

ellipse(360, 305, 10, 10); // Right eye open

// Mouth turns into a circle

noStroke();

fill(209, 151, 151);

ellipse(300, 405, 40, 40); // Mouth as a circle

} else {

// Regular eyes (half arcs)

noFill();

stroke(0);

strokeWeight(10);

arc(240, 305, 100, 140, PI / 3, PI * 3 / 4); // Left eye

arc(360, 305, 100, 140, PI / 4, PI * 2 / 3); // Right eye

// Normal smiling mouth

strokeWeight(6);

arc(300, 405, 50, 30, PI / 9, PI * 8 / 9); // Smiling mouth

}

// camera part

rectMode(CENTER);

fill(50);

stroke(209, 209, 209);

strokeWeight(3);

rect(300, 550, 130, 80, 10, 10, 10, 10);

fill(0);

stroke(242, 242, 242);

strokeWeight(5);

ellipse(320, 550, 60);

// hands

fill(219, 186, 149);

noStroke();

rotate(-PI / 20);

ellipse(170, 540, 70, 40);

rotate(PI / 20);

ellipse(375, 550, 40, 70);

// Camera Flash effect

if (isFlashing) {

fill(255, 255, 255, 200);

ellipse(320, 550, flashRadius);

flashRadius += 10;

if (flashRadius > width * 2) {

isFlashing = false;

flashRadius = 0;

}

function mousePressed() {

let d = dist(mouseX, mouseY, 320, 550);

if (d < 60) {

isFlashing = true;

}

//hooray!!

Echo's Original Project 2

After: