EMOJIFIED
Concept
In this project I wanted to portray myself not just through my physical appearance, but also by showcasing my personality, hobbies, and interests. To achieve this, I initially explored various methods of conveying this information, experimenting with different visual structures. However, I found that nothing captured it better than emojis. I carefully selected emojis that resonated with me and then experimented with their placement on a canvas.
I wanted to convey the idea that there’s a lot happening in my mind, even though it might not be apparent from the outside. To achieve this, I initially tried placing these emojis in a small container that resembled a portal to my thoughts, but it didn’t feel right. Then, I considered stationary placements around my image, but that didn’t quite capture what I was aiming for. Finally, I decided to position the emojis behind my portrait and give them random motion, which better represented my inner thoughts and emotions.
Creating the facial features was another journey of exploration. I stumbled upon the Bezier shape, which, although initially confusing and requiring precise coordination, presented a unique opportunity. To simplify its usage, I developed a function that assisted me in determining the mouse’s location on the screen, significantly saving me time in the process. As a final touch to enhance the project, I chose to replicate the effect of concert lights in the backdrop. Thus, when you click, dynamic lights can be observed moving behind my portrait which were also created using 3 different colored hearts.
Code that i’m proud of
Mouse coordinate function:
//mouse coordinates
textSize(18);
fill(255, 50, 30);
text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);
The face
//shirt noStroke(); fill(201, 73, 73); ellipse(189+9, 410+70, 460, 372) //collar fill(135, 43, 43); ellipse(189 +9, 260+70, 221, 138); //neck fill(215, 183, 150); ellipse(189+9, 250+70, 191, 115); //neck height fill(215, 183, 150); rect(94+9, 167+70, 190, 88); //ear R fill(215, 183, 150); ellipse(318, 170, 40, 69); //ear L fill(215, 183, 150); ellipse(72, 170, 40, 69); //Hair rear fill(0); rect(72.5, 10, 245, 170); //head noStroke(); fill(215, 183, 150); rect(79, 10+35, 232, 186); //jaw noStroke(); fill(215, 183, 150); ellipse(195, 200+30, 232, 179); //right eye noStroke(); fill(255); ellipse(250, 135, 79, 41); // white eye noStroke(); fill(66, 33, 11); ellipse(250, 135, 40, 40); //pupil brown noStroke(); fill(0); ellipse(250, 135, 22, 22); //pupil black //left eye noStroke(); fill(255); ellipse(132, 135, 79, 41); //white eye noStroke(); fill(66, 33, 11); ellipse(132, 135, 40, 40);//pupil brown noStroke(); fill(0); ellipse(132, 135, 22, 22); //pupil black //beard noStroke(); let x = 12; let y = -120; fill(184, 156, 128); beginShape(); vertex(79, 178); bezierVertex(79, 178, 178, 261, 311, 178); bezierVertex(311, 243, 323, 325, 195, 325); bezierVertex(78, 325, 75, 257, 79, 178); endShape(); //Nose Arc noFill(); stroke(171, 123, 76); strokeWeight(7) strokeCap(ROUND); bezier(159, 195, 181, 218, 208, 218, 230, 195); //Nose Tri noStroke(); fill(171, 123, 76); triangle(194, 115, 194, 216, 230, 200); noStroke() fill(188, 75, 102); ellipse(196, 253, 94, 34); //Lip Line noFill() strokeCap(ROUND); stroke(133, 53, 72); bezier(147, 246, 147, 246, 187, 266, 242, 246); //Eyebrow R noFill(); stroke(0); strokeWeight(17); bezier(90, 110, 105, 94, 142, 87, 166, 94); //Eyebrow L stroke(0); strokeWeight(17); bezier(222, 93, 247, 86, 283, 95, 298, 112);
Sketch
Reflection and improvements:
In the future, I’d like to incorporate more interactive features. One idea is to make the eyes on the portrait move along with your mouse. I’m also thinking about adding different feelings or vibes that can change how everything looks – the background and the emojis – to make the project more interesting and more fun to interact with.