Drawing in p5.js

Ok so I started with an aim to make this in p5:



  1. Break the entire thing down in geometric shapes
  2. Find out the coordinates of each of the shape
  3. Put everything in p5
  4. Done, simple!

Breaking down the drawing into geometric shapes, time for Sketch!

Choose the exact size of canvas and composition you want. I took a 5×5 baseline grid


Start breaking the elements into geometric shapes

Tracing the logo   screen-shot-2016-09-11-at-5-20-24-pm


The whole graphic got broken into 55 geometric shapes.

Next, move to p5 editor

Make a grid

making a grid without loops

This is definitely a dumb way to make a grid


This is much better, thanks loops!

This is much better, thanks loops!

Once the grid is in place get the coordinates of each element from sketch and add the element in p5 editor

screen-shot-2016-09-11-at-6-14-31-pm   screen-shot-2016-09-11-at-6-09-25-pm

Final Sketch after adding color:



Link to the code:


Leave a Reply