p5.js

Creative Coding

Spring 2024

Class

Interactive Design: Creative Coding

Instructor

Jenny Kowalski

What is p5.js? It's a JavaScript library that allows users to create interactive graphics and animations in a web browser. Project goal was to write a code that generated unique art every time it ran using the same principle. A base code that randomized the size and color based on the parameters I gave in a grid style with a limited frame-rate. It served as a foundation for my final project experimentation, which dives into motion, tracking, and interactivity-based drawings.

Deliverables

Coding experimentation and exploration

View Full Case Study →

Where it all began

/Inspo

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.

The most important thing about this code is that it generates a pattern of rectangles on a canvas. The rectangles are filled with colors chosen from a set of color palettes. The size and position of each rectangle are determined randomly. The canvas is redrawn every time the pattern reaches the edge of the canvas. This creates a continuous pattern that changes colors and sizes as it progresses across the canvas.

Try it out →

Motion-based drawing

/Drawing with your phone

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.

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