p5js Drawing Machine
One of my first experiences with JavaScript was within p5.js and playing with the code in an abstract way. Once I got used to the code, I decided to give some function to it by using it to create a drawing machine. This was initially a school project that I later expanded on. The project’s task was to create a ‘drawing machine’ that uses mouse or keyboard inputs to affect the visuals and motion on the screen. My first concepts were along the more abstract vein, however I decided to take the task more literally and created a simulated pixel art application.
This was created by pushing out a certain number of white boxes (or grid tiles) and changing their color on click. The color change is dictated by which of the ‘paint globs’ the user clicks on at the bottom. The drawing can then be erased by pressing any key on the keyboard.
As this was my first ever project after being introduced to JavaScript and p5, I am the most proud of this. Feel free to play around with it yourself. I would love to see any creations you make!