Experiment 1 Final Prototype | Shiloh Light-Barnes

Shiloh Light-Barnes – 3162824 – Adam Tindale – DIGF – 2004 – 001

Track Tiles

Track Tiles is a one-week game jam that I created for our class prototype assignment. I wrote the game in C# using the Unity3D game engine and designed the art assets in Illustrator CC. The game is an endless runner themed, single tap mobile game that takes place over an infinity long span of train tracks. Once the game begins, squares of these tracks spawn in a predetermined path along the screen. However, the track pieces are rotated randomly – leaving it up to the player to keep the train from crashing. As the game progresses the player must tap on track pieces to rotate them in such a way that the train will continue to ride forward. As of now, players can collect stars along the way and notice their score increase. In the future, I would hope to add additional track types, power-ups, more obstacles, and cosmetic items.

In terms of context, my assignment was very much a solo venture. The Idea came to me while I was thinking of a game that is complex enough to keep the player stimulated yet simple enough that It can be played with a single tap. Track Tiles was also inspired by a previous (nameless) game that I have in development. Some of the code was actually directly used – the ninety-degree turn mechanic and tap detection code mainly. However, a majority of Track Tiles was inspired by my own thoughts and ideas, and online forums that helped me move past some difficult aspects of the project – All of which I have linked below.

I decided to work in Unity 3D over any other environment both because of my previous experience in the program, as well as the type of project I had decided on. I knew a mid-tier 2D game could be made much easier in Unity than in p5 or javascript, and I already had the understanding of the program interface and the C# programming language. This decision also opened up the possibility that I could actually publish the game to the App store or Google Play if it ended up playing well.

Post Presentation Thoughts:

After showing the project to the class, first impressions were mostly positive. Many players found the game much too hard at the beginning, and never saw a score that they were proud of. However, almost everyone that played immediately hit the “retry” button. This was interesting because I’ve made and demoed games before, but never received this behavior so strongly. I believe the higher difficulty actually drew the player in, rather than repelling them. Interesting as that may be, I will be lowering the difficulty of the game at the beginning, and then increasing train speed and adding double tracks later on. Overall, I’m very happy with how the project turned out and I will surely continue to work on it into the future.

Link To Github Project:







screen-shot-2018-09-27-at-9-05-46-am screen-shot-2018-09-27-at-9-05-58-am screen-shot-2018-09-27-at-9-06-11-am screen-shot-2018-09-27-at-9-06-38-am screen-shot-2018-09-27-at-9-06-44-am screen-shot-2018-09-27-at-9-48-08-am screen-shot-2018-09-27-at-9-48-19-am

Atelier (Discovery): Colour Tracking Audio Visualizer

By Madelaine Fischer-Bernhut

Github: https://github.com/MaddieFish/Atelier–Discovery—Assignment-1

Programming Language: JavaScript(p5.js and tracking.js)

For this project, I decided to stick with p5.js as we had been learning about its capabilities within Atelier this past couple of weeks. Javascript, in general, is the language I have the most experience in and furthermore, p5.js is a library I am most familiar with (I have used processing a lot in the past). Still, I wanted to challenge myself by integrating another library alongside p5.js into my work, so I decided I wanted to try adding a computer vision library to my project. I have always been fascinated with computer vision, so exploring it was something I was excited to do. I found and decided to use the computer vision library tracking.js. The library allows the user to colour track, motion track, face track, and more. I decided to focus on colour tracking.

Project Description:

The project I created is a colour tracking audio visualizer. The program takes the pixel information of a webcam/computers camera to track the presence of specific colours (magenta, cyan, and yellow). The tracking information/data (which includes x and y coordinates, tracked colour, and dimensions of the coloured object) is stored in an array as values. Within the script, I was able to call those values to create parameters for the representative ellipses and sounds for the tracked colours. I used p5.js’s capabilities in oscillation to create a sound output. The tracked cyan colour controls the oscillator’s frequency and the tracked yellow colour controls the amplitude.  The magenta colour adds a Bandpass filter over the sound and controls the filter’s resonance and frequency.

The coloured objects I used for tracking.
The coloured objects I used for tracking.

Note: In the future, I would like to create a glove of sorts with colourful fingers instead of individual objects. I think it would be easier for the user to create more controlled and finesse sounds. For example, one would only have to hold a finger down if they do not want to track a particular colour, instead of having to completely put it down while juggling the objects for other colours.

My goal for this project was to create something that was fun to interact with. I wanted to go beyond simple mouse events and into an interactivity that went beyond just a gesture of your fingers. Because I decide to use colour tracking and computer vision, the user can interact with the program without even touching the computer. All they need is colour to control the sound and visuals of the project.

I have always been fascinated with the installations and projects that use technology to track the movements of the human body to create generative works of art or immersive experiences.  My use of colour tracking in my project is just a stripped down way of implementing movement analysis within p5.js.  Originally, I thought of using a Kinect, like many other of the projects I’ve seen, for its built-in motion tracking abilities, but I decided against it. Instead of using the form of the human body I wanted to use colour because I felt it would be easier to implement with my present skills.

Continue reading “Atelier (Discovery): Colour Tracking Audio Visualizer”

Experiment 1: Digital Rain


For this project, I wanted to emulate the digital rain from the Matrix. The Matrix is one of my favourite movies, and the iconography associated with it is the falling green code. The code is a way of representing the virtual activity inside the Matrix – a simulated world – on screen. For my interface, I used the p5.js programming language and recreated the same effect with my own spin on it. I wanted to show that the user could directly affect the code and its state. The falling green code is associated with uniformity and equilibrium. However, if the mouse veers off to the right of the screen, the code turns red and begins wandering off in many directions. Thus, symbolizing the code’s corruption. In conclusion, I used the idea of digital rain and turned it into a visual association of a programmer (the user) encountering code with/without errors. P5.js was perhaps the best language for this project because of my previous knowledge of JavaScript and Processing. P5.js is essentially a sketchbook for your browser and is accessible for artists and designers.

My father and I are movie buffs, and the Matrix has stood the test of time as one of our shared picks. I’ve always linked the movie to computer programming, and now that I’m learning it in school I wanted to explore the possibility of emulating something from it. When I began to learn p5, I instantly sought out ways to recreate the digital rain. I came across a tutorial on YouTube that showed you exactly how to do it. Actually, it was on The Coding Train, a channel I am quite familiar with. But before that, I wanted to create as much of it as I could on my own. I ended up creating the Symbol class on my own, using the String fromCharCode() method and displayed one symbol on the screen. From there I populated the screen with symbols using an array, with much dissatisfaction. After that, it became increasingly more difficult, even with my knowledge and some help from a friend. I ended up referencing the tutorial but – including the code corruption aspect – most the final code is original. One aspect I wish I improved on was making the canvas full screen.



Figure 1. One symbol centered on the canvas


Figure 2. A stream of symbols cantered on the canvas falling from above


Figure 3. Version 1.0: Green symbols populating the screen and falling from above




Figure 4abc. Version 2.5: MouseX is incorporated; affects the fill colour and symbols’ x-value




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 )

Experiment 1: Smiley Happy Boi – James

The program listens to the sound heard from the devices microphone and displays it on screen in the form of a rainbow coloured smiley face. The farther out a beam is, the loud the room is. The program only creates a visualization of the sound while the user holds down the left mouse button, allowing the user to decide when to start and stop. Additionally, the user can press the space bar to change the direction, and hit the ‘A’ key on their keyboard in order to restart it. All of these controllers are displayed on screen so the user can easily figure out how to use it.

Link to GitHub of project:  https://github.com/JamesLR/Smiley-Sound-Boi

I decided to use P5.js for the project, as processing is efficient and simple to use for this particular idea. It was given a smiley face and bright, rainbow colours in order to make the user happy while using. Everyone can use a little extra happiness in their lives, and little things like a happy, rainbow coloured face can go a long way. Combine with that the fun of testing out sound levels and such, the project serves to brighten the user’s day. 99designs.ca even wrote an article how colors can effect people’s emotions, which you can find linked here: https://99designs.ca/blog/tips/how-color-impacts-emotions-and-behaviors/

Having a variety of bright colours appear when playing around with the program can really help someone’s attitude, and so can seeing a smile, even if just in a small little program. Although if more time was had, there would have been multiple faces for the little smiley face, such as shock or being tired. I actually did try to achieve this originally, but shifting between the expressions proved to be problematic, and the feature was eventually cut last minute.

(Also google hates microphones and asks for permission every time but that is kinda out of my control so…)

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.

Hello world!

Welcome to OCAD University Blogs. This is your first post. Edit or delete it, then start blogging! There are tons of great themes available for you to choose from. Please explore all of the options available to you by exploring the Admin Toolbar (when logged in) at the top of the page, which will take you to the powerful blog administration interface (Dashboard), which only you have access to.

Have fun blogging!