Word Reveal

A snapshot of the revealing canvas after being run in the background for 30 mins

Inspiration

We were inspired by all the different art activities that were happened throughout the event. We reached our inner Bob Rosses to build something truly creative. We wanted to leverage the amazing API tools at our disposal and create a piece of contemporary art.

What it does

We built a piece of art that unveils itself as you talk to it. She's shy, but with a bit of communication she'll open up to you.

The webpage is initially all-black. As the user speaks, the Deepgram API recognises the text and reveals the underlying image with the words gradually.

The image behind the scene will eventually be fully exposed.

How we built it

Art Creation

Tunan made the initial artwork for the Draw an Octocat challenge from MLH. Tunan used a drawing program on his laptop and drew every stroke by hand to give it a smooth yet organic look, before adding colouring and shading and the finishing touches. He then compiled the end result into a GIF.

One of the frames of the GIF was taken and used for this artwork.

Coding

We start by adjusting the image's resolution and position and stack a layer of white canvas on top of it which fills the whole screen. Then we ask permission of the microphone and use Deepgram API to recognise the user's speech every ?? milliseconds.

We generate a random location for each word and display it with a dissolve-in animation so that it is easier for users to track the sequence of words. We modify the canvas transparent in places of the words by setting the type of compositing operation to destination-out and using canvas.getContext('2d').fillText().

Challenges we ran into

Stacking a canvas on top of the image
Scraping the canvas off with words to reveal the image

Accomplishments that we're proud of

We overcame the challenges of using HTML canvas for the first time
The end result looks quite artistic - even more artistic than the base artwork!

What we learned

That canvases are useful for animations and rendering of things on the webpage. They can be very versatile and useful for anything really. We learned that the APIs could be used in cool and creative ways and that thinking outside the box could result in interesting products.