• Elvin Ou

Attempt to draw

Updated: Sep 26, 2018

p5.js web editor

An exploration in creating a screen drawing through p5.js web editor using 2D primitive shapes: arc(), curve(), ellipse(), background(), colorMode(), fill(), noFill(), noStroke(), stroke() etc.


The practice started with sketches of the screen drawing with some major problems listed to be explored and solved with the p5.js web editor. After the sketches, I looked for some color palette that I would like to use for this screen drawing, and eventually picked the color scheme.

When I was creating the first shape in the p5.js web editor, I felt lots of disconnection in placing where I wanted the shapes to be. My unfamiliarity of the editor, of how the coordination works required to just test it out more.

After multiple attempts, I finally created the first rectangle that I wanted as the face of the avatar, and went on and on creating more shapes, locating them, and adding with different strokes, fill colors and weights.

However, during the process, there are still some problems that I was not able to solve: Orders affect overlays, is it possible to have certain codes set on specific task that has its own "end" instead of affecting all the later codes? (for example: rotating one shape instead of rotating all the shapes that is after the rotate command) After multiple attempts, I still could not figure out how to make the original sketch, so I started playing around with opacity, arcs and so on

In conclusion, this practice was really helpful in the way that I understood the concept of Algorithm, syntax and all that. I am very excited to explore more of the editor and being able to create something more intriguing.