Drawing in p5.js

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

coordinates

Steps:

  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

screen-shot-2016-09-11-at-6-53-17-pm

Start breaking the elements into geometric shapes

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

screen-shot-2016-09-11-at-5-28-44-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:

screen-shot-2016-09-11-at-6-42-50-pm

#truethat

Link to the code:

https://alpha.editor.p5js.org/full/B1D82XQ2

Leave a Reply