by Shams Mosowi


the visual element of the design was inspired by the work of design firm Büro North on Auburn Hospital's direction signs While the computational process behind the animation is based on a variation on Conway's Game Of Life (GOF) to which a mutation probability variable was introduced so as to prevent homoeostasis, deviating from the rules underpinning GOF. Lastly the addition of a 'purgatory state' for cells enhances the design aesthetics by creating a greater variation of the drawn shapes.

difficulties && Challenges

Initially all animations where managed using 'Ani' (an animation external library), however upon realising the library was incompatible with P5.js I incorporated some of the library's easing functions into my program modifying the program to achieve its original functionality. Unfortunately due to this introduction placing variables in their correct order became a significant challenge, setting off a seeming never ending chain of unpredictable behaviours. These problems were solved by separating the components and running them separately for debugging (as display bellow).

  • Show Sketch
/** @peep sketchcode */  
float d = 400;//diameter
float cd = 0;// current diameter
float duration = 1; //in seconds
float frames = 30*duration;
float FrameAdjuster = 0;
float ft = 0;//time passed since the begining of the animation(in frames)
boolean state = true;
void setup() {
  size(500, 500);
void draw() {
  if (frameCount%frames==1) {
    FrameAdjuster = frameCount;
    state = !state;
  ft = frameCount-FrameAdjuster;
  if (state) {
    cd = expoEaseOut(ft, 0, d, frames);
  } else {
    cd = expoEaseIn(ft, d, -d, frames);
  ellipse(width/2, height/2, cd, cd);
float expoEaseIn(float t, float b, float c, float d) {
  return (t == d) ? b + c : c * (-(float) Math.pow(2, -5 * t / d) + 1) + b;
float expoEaseOut(float t, float b, float c, float d) {
  return (t == d) ? b + c : c * (-(float) Math.pow(2, -5 * t / d) + 1) + b;

Scalability: the use of different fonts in the logo, prevents it from being easily scaled by simply changing the font size. This issue was overcome through creating a separate class for the label and relating the scale value calculation to width or height.

pictures of different sizes are attached bellow.


Rather than creating separate versions of the sketch for non-interactive and interactive uses this design utilises non-destructive interaction elements such as the minimal hamburger menu in the bottom right corner of the sketch, which can slide to allow change in colour scheme, another non-destructive interaction is the resurrection of dead cells through mouse presses on the grid.

The sketch fulfils the design brief through its non-repetitive continuously animated generative logo. Furthermore it maintains the DesignLab aesthetic not altering the text after it is revealed, whilst animating the background with visually compelling version of Conway's Game of Life, leading to an improved interactional experience.

As Peep kept breaking the code into segments, I have uploaded as a zip file containing the processing code at various stages.


    Shams Mosowi a few years ago
    Last Updated: 3-Jun-2016 6:51 PM