Emoji Canvas

Website

Date

July 2020

Tools

HTML/CSS/JS, Node.js, p5.js, Websocket.io

Description

Originally created as a web socket test, Emoji Canvas is a space where anyone can use emojis to paint, together and in real-time.

Hosted on Glitch, so be prepared to wait for the project to boot up (sorry about that).

Emoji Canvas Illustration is by Helen Nichols.

Seeking creativity in isolation

This past Spring I started playing around with websocket.io, I was three months into social distancing due to COVID-19 and started thinking of ways I typically connect with others through the internet.

At the time I was working on a 10 week UX project with a group of three other people, one of which was in a timezone with an 11 hour time difference. Our project was entirely formed through Zoom calls, Figma documents, and Google slides.

I was really inspired by the way Figma used web sockets to make collaboration seem like everyone was working on the same digital table. I decided I wanted to replicate that with a more light-hearted purpose to it.

I knew I wanted it to seem like a large canvas where anyone could contribute their ideas, however, I didn't want the palette to be merely different colors. I eventually thought of using a group of emojis from Apple's emoji set since they're culturally iconic and naturally playful. Thus, Emoji Canvas was born!

Technical setbacks

At first, progress was being made extremely naturally: I thought of a good idea, came up with a way to implement it, and it worked on the first few tries. At the time I was very comfortable with p5.js and starting to gain a holistic understanding of Node.js. However, as soon as I decided to transfer my half-finished projected from my local server to a Glitch repo, things started to fall apart.

I was extremely new to websocket.io and WebSockets in general, and realized that with the number of messages I was sending from the client to the server and back to the client for verification, the server would overload after a minute of drawing. In addition, my un-boosted Glitch repo was not necessarily the fastest node server, so it also started having trouble keeping track of who has connected and who has disconnected.

I had to rewrite exactly how each message was sent to not overload the Glitch server. In addition, I had to set precautions to handle the long loading times Glitch sometimes brings.

After many hours of fixing bugs and learning to clean my sloppy Node code, I accomplished exactly what I set out to create. My goal was to make something that people in isolation would actually like to use and have some kind of fun experience. Whether it be for a couple of minutes just trying out the functionality or an hour of having fun painting weird images with old or new friends, Emoji Canvas is supposed to be for everyone and anyone.

Feel free to email or DM me on any of my socials. Lets make something happen :-)

hey@ndrewgood.com

Website made with ❤️... and code. more info here.

Feel free to email or DM me on any of my socials. Lets make something happen :-)

hey@ndrewgood.com

Website made with ❤️... and code. more info here.