Interactive square animation using p5.js

Hey everyone, I’m finally back after an uncalculated hiatus. Fall 2022 was crazy busy for me. However, we’re in the middle of the winter break and I have more time on my hands now to do something fun and exciting. For now, Creative coding seems like a really fun thing to get started into.

Before we begin, I’d like to explain what creative coding is in my own words, “Creative coding is all about using computer programming to make cool stuff! It’s a way for artists and designers to use their technical skills to bring their creative ideas to life. It’s a really fun and exciting way to mix art and technology”.

I’ve been using p5.js lately, which is a creative coding library built in JavaScript. This is a really fun and easy library to use and is in fact kind of a successor to the Processing language, another popular language to do creative coding before p5.js existed.

I have actually found the documentation of p5.js along with the book Generative Design: Visualize, Program, and Create with JavaScript in p5.js really helpful in guiding me in my creative journey. I’ve been able to create an interactive square animation using these resources, and I’d like to share the code and the process behind it in this article.

Samples from the interactive animation

This animation has a very simple mechanism using the mouse movement of the user. Moving from top to bottom changes the hue of both squares(the squares will have contrasting colors) and increases the breadth of the inner rectangle while moving from left to right increases the length of the inner rectangle.

I’ll move on now to explain the code behind this animation. The way p5.js works is that you have to define a couple of functions to get things moving.

the first function usually is the setup() function, this function contains the things that don’t have to be loaded repeatedly for the animation to work. The majority of the syntax is pretty self-explanatory but I’ll try to explain things in a simple way regardless.

function setup() {
    // this creates a canvas of size 720 X 720 pixels
    createCanvas(720, 720); 
    // by default the color mode is RGB, but it can be changed to HSB
    colorMode(HSB, 360, 100, 100);
    // this makes sure that the cursor is in the center of the rectangle
    rectMode(CENTER);
    // to makes sure that the cursor isn't visible
    noCursor();
    // to remove the stroke of the rectangles
    noStroke();
}

After defining the setup of the animation we can then move on to the draw() function, which basically controls the drawing part of our code.

function draw() {
  // varying hue background based on mouse's Y position
  background(mouseY / 2, 200, 50);
  // fill colors objects, background sets canvas color
  fill(360 - mouseY / 2, 100, 100); 
  // rectangle follows and changes with mouse position
  rect(mouseX, mouseY, mouseX, mouseY);   
}

This should pretty much sum up all the code and the work behind the animation. I highly encourage you to check this simple yet cool animation by clicking on the web editor link below. However, one last and important thing to say:

WARNING: This animation may potentially trigger seizures for people with photosensitive epilepsy. Viewer discretion is advised.

p5.js Web Editor