Creative Coding

Spring 2024


Interactive Design: Creative Coding


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.


Coding experimentation and exploration

View Full Case Study →
Where it all began


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 →
Drawing using sliders

Sldiers controlling the size of the shapes

A gif that shows the code and drawing using sliders to adjust the fill and sizes of the squares in the p5.js code.
Drawing using cursor

Mouse cursor controlling the size of the shapes

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.

A screenshot of the code used for drawing with motion in p5.js

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

View Full Case Study →