Starfish Generator



Samantha Sylvester, 3165592

Michael Shefer, 3155884

Rosh Leynes, 3163231

Assignment 1

Nick Puckett

Atelier II

Thursday, January 24th, 2019


Google Drive:


Our goal was to create a UI based starfish creator. Starfish come in many different shapes and sizes as we learned from our book. There are tons of different species, each with their own unique traits such as colour, shape, and texture. Starfish are found in mainly tropical places but are not limited to them, they can be found as deep as 6’000ft. To simulate the variety of starfish and what makes them unique we developed an interactive system that constructs a starfish based on the choices made by different users. Additionally, a scientific name would accompany each attribute such as texture, colour, and shape and would result in a name for the starfish upon creation.


I had a lot of fun doing this project, I learned so many new things. Working with a variety of software and different logics that I’ve never used before to form a final product was really challenging yet rewarding. Illustrator was interesting to use, it’s amazing how quickly you can learn something when under pressure and a time limit. I find myself thinking in illustrator now when I need to design something quickly. Making the starfish bodies and shapes was really cool! I was a little confused about how svg filetypes work but we made it work in the end. I also originally wanted to have ocean pictures in the end but the layering of the code and issues with masks and colours prevented us from figuring that out in time. It would also have been nice to incorporate sound into it too. 

Another idea I had for this project was based on something I learned from our starfish book. When a starfish loses a limb, it has a regenerative ability that allows it to grow back. So I thought what better animal to play tug of war with, then a starfish? Five screens, one for each arm with one person per a screen pulling the starfish in five different directions. (Poor starfish)

Something to improve on:

  • Design aesthetic, Adobe Illustrator has never been my strong suit

Something to add:

    • The scenery, or ocean backgrounds


    • Trying to figure out masking and the layering of images within the code.
    • Browser windows seem to be getting confused and aren’t updating


As we were working with ideas, our original set environment to work in was Unity. Although it was new to us, we were interested to explore its potential to create an interactive system based off choices and reactions. As we further developed our concept we settled on working in P5 as it was more familiar to us and basic inputs from a variety of choices were more simple to translate to a final screen with cell arrays.

To construct the actual generated starfish, we had to create the assets such as the shape and textures ourselves. Implementing all the assets together as an image with a mask proved difficult especially in a system that was based off a variety of choices. Since image masking only works by calling which particular image it is supposed to overlay, we struggled with working around it before settling on the solution of creating many if statements that contained more than one condition. Although the final result of the code proved to be convoluted and made debugging complicated, the front-end displayed well and even updated in real-time without the need to constantly refresh.


When we started this project I was completely open-minded to whichever approach we took. Preferably, a challenge always. Once we settled on p5js, I was really into the idea of doing the back end logic/programming. It was a bit selfish of me to take on a lot of this responsibility but it was a great learning opportunity.

My portion of the project began with drawing out the workflow of the program. By using barebones sketches and annotations, I devised a way for three interfaces to send messages to a listener, and have a choice selected from a database. To be honest we limited the number of options to save programming on us. After a very poorly done version was made to work on one device, we imported PubNub and brought our project online. The program made to operate on one device was then turned into four separate scripts, and with some refining, this became our final piece.

Sketches and Brainstorming:

plan-1 plan-2


Scott Pilgrim Vs The World Animation


Samantha Sylvester


Atelier 1: Discovery 001

Adam Tindale

September 28th, 2018


GitHub link:

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:





Gifs library: