Luke Nguyen – Assignment 3 – Rainbow Spikes

This generative artwork is essentially me implementing the concepts of arrays and class that we learned. I was thinking of creating something fun and colorful and demonstrate a chaotic pattern that can be generated when a user press the mouse. And while scrolling through Openprocessing.org to look for inspirations, I stumbled upon a generative artwork called “Noise Turbulence Doodles” by Raven Kwok (https://openprocessing.org/sketch/143842).

The idea is that a circle generated from a mouse click is followed by a chain of automatically generated circles decreasing in size that scatter in random directions. I set the color spectrum for the circles to be a rainbow spectrum (referencing this p5js example by aferriss: https://editor.p5js.org/aferriss/sketches/Bys1YDQx7), with the root circle taking a random color every time the mouse is pressed or held. The longer the mouse is pressed at one position on the canvas, the more rainbow “spikes” are generated starting from the root. If the user moves the cursor around, they will scatter the root while creating the spikes as well.

The artwork generated looks like sea urchins or something spiky in 3D. This illusion is created by randomizing the distance between each circle that are generated in the chain from the root.

Using class and array:

let particle = new Particles(
      mouseX,
      mouseY,
      30,
      random(-5, 5),
      random(-5, 5)
    );
    //     add each circle generated after the root circle to the array
    circlelst.push(particle);

Creating a move class:

move() {
    //     the x-coordinate the circles increase according to the x-direction
    this.posX += this.directionX;
    //     the y-coordinate the circles increase according to the y-direction
    this.posY += this.directionY;
    //     the radius of the circles decrease by a random float from 0 to 1
    this.radius -= random(0, 1);
    //     draw the chain of circles
    if (this.radius > 0) {
      circle(this.posX, this.posY, this.radius);
    }
  }

Embedded sketch (Please press the mouse (either short press or long press) and move the cursor around to play with the effects):

This is very fun to make. The hardest part is to figure out how to generate the chain of circles that decrease in size as they are generated and how to trigger the circles to move in random direction consisting of x-direction and y-direction. It essentially required me to figure out how to work with arrays.

As for future work or improvements, I want to make the circles blend with one another smoothly to create a shape instead of separate circles. That way it can look even more hallucinatory.