Drawing with p5js

In the first week of our class, we looked into the possibilities of computational media and some inspiring artists that created their artpieces with codes and algorithms. Some of which are Sol LeWitt’s Interaction of Colors, Vera Molnar’s Hypertransformation of 20 Concentric Squares, and John Cage’s Williams Mix. We were introduced with p5.js, a javascript library that will be use as the main tool for this semester.


Our take home work was to do a screen drawing through p5js. I start off with a quick sketch before coding. The process was basically trial and error, guessing placements for all the primitive shapes. Despite the simplicity of my drawing, it was time consuming. I was wondering if there is a simpler way where they could import SVG into p5js, that will be a time-saver. Also, I feel like the lines and shapes I drew out with code is not as smooth and freely as compared with my sketch.

Full Code Here:

Interest & Experience:

I never thought I would want to start coding. Working as UI designer, I deliver wireframes and visuals to developers; watch them turn those pages to interactive sites. Often times, we would have a couple communications before they could grasp the big picture and begin to get everything right. I believe it would be a lot easier for designer to know a bit of programming, that way we can think like the developer and minimize the language barrier.

By the end of this term, I wish to be able to visualize data through programming and to build a full-interactive site. I imagined the experience would be more like giving birth of a child on your own rather than having doctor assists you.

1. Does p5js support SVG?
2. How to comment multiple lines of code?