Experiment 1 : Playable Piano – Ermar Tanglao


Github link: https://github.com/ErmarTanglao/atilierAssignment1


What I created was a playable piano within p5.js. I got my inspiration from Liszt – La Campanella which shows notes falling onto as Synthesia and in the video as you pressed the note a spark of small particles fly off and I thought that I was a really nice visualization so I tried to attempt it. Also I wanted to try the opposite of what the video did which showed the notes falling and made it so that when you click the notes a note would spawn and the size would depend on the duration you held the note down. For example https://vimeo.com/190474651.

Notes with different variables

How I started this project was I first looked at the song example on p5.js and tried to replicate its way of making the keys play the note. As I created the code I ran into a couple of problems when playing the notes. When the notes were played at the same time or in rapid succession the note won’t fully play. So to solve that the notes had to be created with different variables. For the keys itself  I mapped it to the keyboard and showed the letters that corresponded to the keys on the piano.

So then after that I started to work on the particle system at first I started by having some particles spawn randomly near the note then I wanted to have it shoot out into a cone. Video of the piano and particle system (https://www.youtube.com/watch?v=c0Y9VgjQCVA). At first I just made the particles to just keep on bouncing within the canvas, but after some feedback I changed it to  have them go off screen.

So from here problems started to occur when I tried to work on the note spawning system. It was a difficult task to do because I needed to find a way to make the note growth = the duration the note was held for and release it going off screen. I got the note spawning idea to somewhat work (https://www.youtube.com/watch?v=tFAufhJ3axg) but then another problem occurred which was that when I clicked another note after it had spawned the previous note stopped and kept growing. After many attempts of trying to fix the problem I just scraped that idea due to how much time I had left to do the project.

Finished product and me playing Bohemian Rhapsody (https://www.youtube.com/watch?v=M6nBF-DIVOQ )

Scott Pilgrim Vs The World Animation


Samantha Sylvester


Atelier 1: Discovery 001

Adam Tindale

September 28th, 2018


GitHub link: https://github.com/SuckerPunchQueen/Assignment-Prototype-Final

Scott Pilgrim vs The World Intro Sequence

I recreated the opening intro sequence to one of my favourite movies, Scott Pilgrim vs The World. My goal was to reimagine the original opening sequence as the comic book/graphic novel and 8-bit style arcade game made for the PlayStation 3 and Xbox 360. I love the aesthetic look as well as the 8-bit music used. I did my best to recreate that experience through animation in Processing. I created two versions, one with the 8-bit gifs, and one without. The gifs do not belong to me, I have provided a works cited page to show a list of the codes and images I used. This project was literally the embodiment of “if there’s a will, there’s a way”. Trying to get the gifs to work was like trying to pull teeth from a thing that doesn’t have teeth. I thought that maybe my computer was having issues, maybe my version of processing was broken, but in the end, I managed to figure it out. The gif animation library wasn’t something that processing could import from the processing menu. I had to research how to use gifs in processing online and eventually came across this amazing soul who developed the gif animation library to be usable in later versions of processing. Getting to that point was a struggle, as there were multiple clones of the same type of gif library made by different people all of which never worked for me. It became a matter of trial and error and frustratingly downloading unknown things from the internet in hopes of making my vision a reality. I was running out of time so I did the sketch without the gifs as a backup to submit just in case.

I chose Processing for a few reasons, one being I have more of a background and better understanding of processing thanks to our art and code class last semester. Two, its similar enough to p5 that I can apply what I learned in class to this project, i.e. arrays, movement, clickable things and so on. Three, I had a rough idea of how I would put things together in processing to get the desired aesthetic feel that I wanted. 

I chose Scott Pilgrim vs The World because of its unique style of storytelling. The movie, the game, and the graphic novel all give the experiencer an experience in a similar way even though the mediums and method of experience are different. My goal was to add on to that and give the experiencer one more method of experiencing through coding. The way the story is told through pop culture references, video games and comics, I feel, fits my age group really nicely (#relatable). What better pop culture franchise to use than Scott Pilgrim? I am also looking at game design and storytelling as a possible career path and outcome from the university. Scott Pilgrim has a perfect mix of both of those things and works really well in many other aspects and courses here at OCADU. To reference the article “Scott Pilgrim vs the World: How to Tell a Story on Multiple Platforms Through Style?”, chapter two talks about remediation and how the creators of Scott Pilgrim keep it consistent throughout mediums but still deliver an experience nonetheless.

“This essay will focus on outlining what exactly stylistic remediation is and how, in the case of Scott Pilgrims graphic novels, film, and video games, separate media creators utilize the translation of style to take customers beyond the film (Drew Morton).”

Despite the medium that is experienced, whether it be through film, comic, or video game, delivers a similar sense of accomplishment upon completion which is also a self-aware nod to its own existence.


Scott_gifs sketch:


  • Trying to figure out gifs, didn’t know what code to use. There was no example code for gifs.


The first scene progressed from this:


to this:


The gifs were giving me trouble, so I took them out and it became this with text moving up the screen:


eventually, it became this with static text that changed when the mouse clicked:


  • I ended up forgoing the line separation in the frequency analyzer in the final sketch because I liked the cleanness of it. With the lines, it became too busy.

Then, I added the gifs back in once I figured out how to use them:


The second animation:


  • Is just one for loop. It creates an infinite pattern of lines on your computer screen similar to tv static.
  • for (int i = 0; i < (width * height); i ++) {

set(i / height, i % height,

      i * i / (f + 1));



Animation 3:

Pac man + bezier animation


  • I liked the bezier curves a lot but didn’t think it was enough so I threw in a Pac-man for good measure. (Scott Pilgrim references Pac-man a few times in the movie, I thought it was only fitting).
  • I added a Knives Chau gif a little later in animation 2. I was testing different styles and placements of Gifs.
  • I couldn’t find a text that matched the font they used from the movie, so I tried my best to compromise and use a text I thought worked well.
  • I liked the rain effect in the background because it gives an otherworldly, almost space, “stranger things upside down” vibe to it while also looking quite mechanical and retro. Like something you might see on an old arcade machine.

Works Cited/Resources


Video of it working:



Rain:  https://www.openprocessing.org/sketch/9299

FFT: https://processing.org/reference/libraries/sound/FFT.html

Gifs library: https://github.com/extrapixel/gif-animation/blob/master/README.md



Experiment 1: Eidolon — Melissa

Project Description

Project on GitHub

ezgif-com-optimizeEidolon is a looped animation of two snakes with geometric form rotating around a planet-like sphere. I used p5.js to model the snakes, apply transformations, create the environment/scene, and render the animation. The reason I used p5.js, besides the fact that is a beginner-friendly program, is that it is the only program I am comfortable with. While I have used Processing in the past, I have no experience with languages besides Javascript, HTML, and CSS, and my skills in Processing are limited. I took advantage of the fact that we were taught p5.js in class, and though I occasionally applied methods I knew from Processing, I ultimately relied on p5.js to create this sketch.

This project began as a tattoo design. A friend of mine, who over the years has owned approximately nine snakes and six other reptiles, wanted a tattoo of a small ball python around her ankle. To design this tattoo was my original intent, but due to the limitations on drawing that exist when coding rather than using traditional materials, I took the theme of snakes, and went in a different direction.

The role snakes play in mythology peaked my interest while I was researching types of snakes. Due to their ability to shed their skin, they were often associated with immortality and healing, which has carried on to this day, at least to the extent that entwined serpents are the symbol for medicine/physicians. Snakes are often representative of the underworld, as well, and the mythical. From dragons to Medusa, snakes play a key role in monsters, magic, and ethereality. These are the themes that became the foundation for the project, Eidolon, which itself means an apparition or ideal.

Continue reading “Experiment 1: Eidolon — Melissa”

Experiment 1 – Tyra & Ola




For our game, we wanted to make the game Snake out of p5.js only. Our final (current) version achieves this, as you move the player with the arrow keys, avoiding touching the walls and yourself, as you collect points in the form of cats. The game was made mostly to challenge ourselves to use this new program and try out things we had not done before.

After making most of the code, we found a snake demo from p5.js, but the coding methods were completely different, so we simply used it to ensure we had the core elements of the game. (https://p5js.org/examples/interaction-snake-game.html)

https://www.google.com/search?q=snake – an example of Snake, via a Google built-in game

https://www.youtube.com/watch?v=XINAniQCh8Y – more examples of Snake

The final cat for the game
The final cat for the game
some inspiration

Aesthetically, we wanted something very cute and soft, so all the edges are rounded, and the colours are very pastel and muted. This was inspired by the Pusheen emotes, seen in applications such                        as FaceBook messenger.

These different emotes also played a role in why we chose cats as the point system.

more inspiration

We used the concepts we learned in this class and previous classes to build the code from nothing. Concepts such as collision detection, movement, sound, and random spawning locations for the cat were from this class. However, we did find a video that helped us stay organized and understand the code as we made the game. (Coding Challenge #3: The Snake Game) In the end, we called upon the CSS code we learned in Intro to Computer Science to tie the browser together aesthetically.

If the enemy spritewe had more time, we would add levels or difficulty, such as adding enemies (in the form of bees) and faster speeds. We also discussed changing the spawn parameters for the cats so they stay entirely on canvas, via a grid system of sorts. Other possible wants would be to add a restart or pause button, as mentioned                                                        during critique.