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


Leave a Reply