Online drawing and first steps with p5.js

Take Processing and Javascript, put those in bowl, add some HTML5 and CSS, mix them, and here you have a shiny new tool for creating easy-to-interact shapes, text, video, sound, and a myriad of other online objects.

In an attempt to put onto use the very elementary functions of P5.js that I have learned in the past week, I sat down and built an half-ever-moving drawing formed of text and lines. I was well inspired by Picasso’s minimalist portraiture.

drawingsxdrawings, Francesco Imola

I made use of a Javascript array to initialise the words to be displayed and added 4 Random functions, each one receiving the array as input and outputting the words in a different order, following the frameRate fps to set the speed. The rest of the code consists of the actual drawing of lines and positioning of the text.

It can be viewed here

The P5.js script used to build all of drawingsxdrawings

Francesco Imola is a London-based musician, weekend photographer, and current Sound Design student at the University of Greenwich.