Creative Coding

Alwin Thomas
4 min readApr 28, 2023

--

All of the examples discussed in this article demonstrate the power and versatility of the p5.js library and its ability to create interactive and visually stunning art pieces.

Generative Art

Controlled generative art

Drawing using mouse/trackpad cursor

Drawing through tracking your mouth

Drawing based on phone motion and rotation

P5.js is a JavaScript library that allows users to create interactive graphics and animations in a web browser. For my creative coding course, with Jenny Kowalski, as my professor, I was tasked with writing a code that generated unique art every time it ran using the same principle. In my code, I focused on having a base code that randomized the size and color based on the parameters I gave in a grid style with a limited framerate. It served as a foundation for my final project experimentation, which dives into motion, tracking, and interactivity-based drawings.

This is a gif made out of outputs from the code as it ran 64 times, each producing a different result every time.

The original code was inspired by Morse code and generative art examples. Some of my struggles with this set of codes were color mixing issues and the code was too long in how I wrote it. That problem was solved using the let statements and Math.floor() functions, which helped me set parameters to randomly pick color palettes from the given set every time and use randomization to choose between fill or stroke for the rectangles well as the size.

For the controlled generative art

it uses the same base code but with a modification of adding sliders to let the users control the size of the rectangle and choose between shapes with fill vs. strokes.

The first slider controls the size, and the second controls the fill or stroke function within the code while the code continues to run in a grid format.

It was made possible using the CreateSlider function with initial values and canvas height.

Drawing using the mouse cursor

Made using tracking the mouse pointer’s current location (mouseX and mouseY)as a modification to the original. For this experimental version, I am letting the code use all the colors from the listed palette to create a stronger visual interaction with the user. Naturally, you could pair this version of the code with the slider to give more control over how the shapes and sizes play out in the art you are making using the mouse cursor as a drawing tool.

mouseX and mouseY instead of the X,Y locations

The facial recognition

This one was far trickier since it involves machine learning, and incorporating ml5 into p5.js was challenging in not knowing what I was doing wrong. With the help of chatGPT and cross-referencing multiple machine learning-based source codes from the p5.js community, I figured it out and made it work. The amusing thing about this experimental version was that it did not use ml5 at all in my code, and somehow it still works, but this is also the most glitchy one since it uses tracking, which is not as accurate as one would want it to be.

Do note that if you are interested in ml5, there are multiple ways to incorporate machine learning into your creative coding.

Please note that spliced code from Kerryrodden.
// Starting point: https://editor.p5js.org/kylemcdonald/sketches/BJOcyD9hm

Motion-based drawing

It is designed to resize the canvas based on the user's screen size. The size of the rectangle is set, and its position is mapped to the device’s rotation coordinates. Tapping the screen is meant to clear the screen of the drawing in case anyone would like to restart their drawing attempts.

The map function paired with the RotationX and RotationY is how you achieve the base required to draw based on the rotation from your device. The main problem with this code is that it only works on Android devices, not IOS devices, due to their security and system settings.

Please note that some of these codes are not mine and are taken from other community members to resolve the issues I came across.

--

--