• Github
  • Instagram
  • Email

© 2020 by Maria Aguilar

INTERACTIVE CHRISTMAS CARD

CREATIVE CODING

Tools

P5.JS

Adobe Illustrator

Methods

Ideation Workshop, Prototyping

Context

Individual Project

Creative Coding Class - Fall 2018

4 weeks

THE CHALLENGE

Create a creative interactive experience using at least one library from p5.js. 

THE SOLUTION

My favorite season of the year is Christmas! This is why I decided to make an interactive Christmas card. It has different bubbles floating around and once they are popped, different elements are shown in the screen. A christmas tree will appear, then snow will come down, a snowman and christmas music will be played. I also wanted this game to be interactive for kids to enjoy it, so at the end of the game, the player will clap and see some surprise fireworks. Furthermore, I added a gingerbread cookie to give instructions as he were talking and showing some fun messages to the player. I also liked this idea because my niece (5 years old) loved it!

PROCESS
Ideation Workshop

In class, we performed an Ideation Workshop (a technique developed by Zannah Marsh & Marina Zurkow) where we all shared our ideas for our final project and we exchanged opinions. This technique helped us to get form a shred of an idea, intuition or hunch to be able to articulate specific forms, context, content, and technologies to explore and expand our ideas.  

 

We ended up with enough hints at specifics to be able to experiment and develop our ideas. The goal was to get us out of our head, encourage us to jump in, start making, stop fretting and start having fun!

Sketching

After hashing out some ideas, I draw a sketch of how I wanted my project to look like. I wanted bubbles floating, interactive points for kids and include a Christmas theme. Then, after exploring the examples of p5.js add-on libraries I had a better understanding of what was possible to develop. ​

Development

I started the coding process defining my inputs, outputs, and target audience. Then I decided to use two p5.js libraries: p5.sound and p5.play and I started making the magic in Atom.io. I also used Illustrator to design the assets.

I finally developed my Interactive Christmas Card:

 

  • The inputs: The player will touch the screen with their fingers to pop up the bubbles. At the end of the game, the player will have to clap to see fireworks on the screen. 

  • The outputs: When a bubble is touched, it will disappear and a new element will be shown in the card. The letter "T" will show a tree, the letter "M" will play music, the letter "S" will show snow falling down, the letter "P" will show presents in the tree, and the letter "L" will change the night background and turn on the lights in the house and the tree. To make my card funnier, when the letter "M" is touched and the music begins, some little gingerbread cookies will appear on the sides dancing. In the end, an instruction will appear for the player to clap, it will track the intensity of the sound, and at one specific intensity, it will show fireworks in the sky. When the fireworks start, the snow will stop in order to not overload the screen with animations.

  • The audience: Kids from 5 to 10 years old. However, when I showed my project in class, some classmates told me that they would enjoy this short game as well, thus, this interactive card might be enjoyed by people of all ages!

  • Display: The game could be displayed in big screens from stores or shopping malls. When parents are buying, kids could be playing this simple game and have fun.

Wanna take a look? Turn your volume and mic on and click below!

See more projects