Creating an Emoji on p5.js
This was my first time learning p5.js, here is the process of coming up with an emoji and making it through code.
Have you ever wondered if there was an emoji by combining 💎+ ❇️ + 🔹. I always did. That’s why I tried creating one.
If you are following along, this is the 2nd week of learning Data visualization from India In Pixels(specifically from Ashris). Just like last week’s post on the Week #1 assignment, this is for week #2. Where I went ahead with creating a custom emoji. That’s unique, doesn’t exist in a standard keyboard, and is coded on p5.js. This is the process of doing so.
Peeking into my right brain 🖍️
Before jumping to the code, I had to decide what emoji I would make. To make this process efficient, I decided to give myself some creative freedom by putting a constraint on brainstorming. The constraint was ‘NO FACES, NO SMILES’.
This left me with some selected options to go for, which are simple and ambiguous enough to qualify as an emoji.
At first, I started off by trying to come up with some box-type emoji (✳️, ❇️), which led to this diamond kind of shape.
I tried different dimensions and then came up with the right one from the following two, which had more breathing space and looked neat.
Making decisions 📋
Now the shape was clear but it lacked some character. (we are still in Figma)
After exploring different variations and colors of that shape, finally decided to go with the one which was very clean, symmetric, and minimal looking.
With that set, let us jump into the code 🛣️
Coding the diamond emoji 🧑💻
Let me make it clear, I had never coded with p5.js (nor did I know it existed :p). Before this, though I had dabbled with some web development with HTML, CSS, and some JS frameworks, I had no clue about p5.js (processing, etc).
But p5.js was simpler than I thought it to be. It was pretty straightforward and easy-looking (let’s see how it goes :xd)
For the coding part, once the basics were clear from week #2 sessions and reading the p5.js docs(references), I mostly referred to those and some youtube videos (found Coding train, a handy and fun yt channel for p5.js).
Making the emoji wasn’t so straightforward, I had to think through the shapes a lot.
This is where Figma helped to get the measurements and colors right.
Used the rect() function to make the box-shaped background and the shadow, and the beginShape() and endShape() functions for more complex forms i.e- the diamond.
The following image shows how I thought and implemented the diamond with simple 3 shapes using the beginShape() and endShape() functions.
The code for the diamond emoji
function setup() {
createCanvas(550, 550);
}function draw() {
background('#F4EBFF');
noStroke()
fill('#D8D6D6')
rect(70,70,422,422,65);//primary shape
fill (255)
rect(64,64,422,422,60);
//diamond
const w = width * 0.375;
const h = height * 0.1875;noStroke();
fill(40);
translate((width/2) - (w/2), height/2);
//left part
beginShape();
fill('#4CB5F5')
vertex(0, 0);
vertex(h, h);
vertex(w, 0);
vertex(h, -h);
endShape();//right part
beginShape();
fill('#23307A')
vertex(142, 0);
vertex(h, h);
vertex(w, 0);
vertex(h, -h);
endShape();
//Middle part
beginShape();
fill('#23307A5B')
vertex(62, 0);
vertex(h, h);
vertex(w, 0);
vertex(h, -h);
endShape();}
The reveal 🎉
Presenting you the Blue diamond emoji made with p5.js.
Most of my effort went into making it pixel-perfect with the design I made. And it turned out pretty neat, hope you I like it.
That’s all folks!
If you have any thoughts or just wanted to say a Hi 👋, feel free to ping me on Twitter @inSitesh.
This was me, making a custom emoji on p5.js. See you next week with the next challenge! 💫
(Stay tuned for something exciting coming up next week 🤞)
😆 Fun fact: This assignment took a total of 4 hours and 35 minutes to complete.
