Joanne Chui – Abstract Clock – 06

sketch

/*
Joanne Chui
Section C 
Project 6
*/

function setup(){
    createCanvas(400,400);
}


function draw(){ 
    var s = second();
    var m = minute();
    var h = hour() % 12;

    background(255, 194, 38);

    stroke(150, 50, 40);
    fill(255, 212, 105);

    //second
    strokeWeight(15);
    noFill();
    stroke(255, 212, 105);
    arc(200, 200, 300, 300, -HALF_PI, TWO_PI * (s/60)-HALF_PI)
  		
  	//minute
  	for(i = 0; i < m; i++){
  		strokeWeight(1);
  		ellipse(200, 200, 300 - (i*5), 300 - (i*5));
  	}

  	//hour
  	strokeWeight(30);
    noFill();
    stroke(255, 225, 150);
    arc(200, 200, 350, 350, -HALF_PI, TWO_PI * (h/12)-HALF_PI)

}


I was interested in visually embedding the amount of time that had passed into the image so that the time was still readable. I was inspired by the various simplistic apple watch faces.

Ammar Hassonjee – Project 06 – Abstract Clock

sketch

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 06 - Abstract Clock
   */

function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0, 0, 30);
    // Time generation
    var h = hour();
    var m = minute();
    var s = second();
    var mappeds = map(s, 0, 59, 33, width - 33);
    var angle = 0;

    //Drawing the hour mountain that grows taller to represent the hour from 1 to 24
    stroke(0, 0, 60);
    strokeWeight(2);
    for (i = 1; i < 25; i++) {
        line(0, height - 15 * i, 480, height - 15 * i);
    }
    noStroke();
    fill(120);
    triangle(0, height, width / 4, (height - 15) - 15 * h, width / 2, height);

    // Drawing the minute stars
    var starx = 0;
    var stary = 0;
    var count = [];
    var arrayCount = 0;
    for (var i = 0; i < 60; i++) {
        count.push(i);
    }

    // For loop that generates 60 stars with minute star being highlighted
    for (let a = 0; a < 20; a += 2) {
        for (let i = 1; i < 7; i++) {
            if (arrayCount == m) {
                fill(255);
                ellipse(width / 2.3 + i * 40, a * 20 + 100, 20, 20);
            }
            else {
                fill(230, 233, 178);

            }
            if (i % 2 == 0 & arrayCount !== m) {
                ellipse(width / 2.3 + i * 40, a * 20 + 105, 10, 10);

              }
            else if (arrayCount !== m){
                ellipse(width / 2.3 + i * 40, a * 20 + 95, 10, 10);

              }
              arrayCount += 1;
                }
            }


    // Drawing the second shooting star at the top
    fill(240, 235, 190);
    var x = [mappeds, mappeds + 11, mappeds + 33, mappeds + 19, mappeds + 21, mappeds, mappeds - 21, mappeds - 19, mappeds - 33, mappeds - 11];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    beginShape();
    for (var i = 0; i < x.length; i++) {
        vertex(x[i], y[i]);
    }
    endShape();
    fill(190);
    // Drawing streaks that follow the star
    triangle(mappeds - 35, 45, mappeds - 30, 50, mappeds - 180, 53);
    triangle(mappeds - 35, 60, mappeds - 30, 65, mappeds - 180, 57);
}

My inspiration for this project came from my fondness for the stars and astronomy. I sought to represent my clock using elements of nature and the sky by using the mountain as an indicator for the hour. Then I used a series of small stars to indicate the minutes due to their repetitive nature, and then finally a shooting star to indicate seconds since its movement corresponds with time passing by.

Sean Meng-Project 06-Abstract Clock

hmeng-project 06

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-06-Abstract Clock

function setup() {
    createCanvas(500, 500);   
}

function draw() {
    background(214, 200, 224);
//define current time   
    var S = second();
    var M = minute();
    var H = hour();
    var round = 2 * PI;
    var angle = 0;
//convert time value to radian angles
    var ratioS = S / 60;
    var ratioM = M / 60;
    var start0 = 0;
    var start = PI + HALF_PI;
    var size1 = 200;
//diameters of the arc
    var D1 = 200;
    var D2 = 220;
    var D3 = 170;
    var D4 = 120;
    var D5 = 80;
    
    noStroke();
//Second plate graphics
    fill(255, 216, 224);  //Light pink
    ellipse(180, 180, size1 * ratioS, size1 * ratioS);
    fill(255, 186, 224);  //Pink
    ellipse(210, 150, 100 * ratioS, 100 * ratioS);
    fill(255, 136, 204);  //Dark pink
    ellipse(150, 220, 55 * ratioS, 55 * ratioS);
//Second inner ring
    stroke(200, 64, 150);  //Magenta
    strokeWeight(15 * ratioS);
    noFill();
    arc(180, 180, D1, D1, start, start + round * ratioS);
//Second outter ring
    stroke(255);
    strokeWeight(4 / 60 * S);
    arc(180, 180, D2, D2, start, start + round  * ratioS);
//Second starting line
    fill(255);
    rect(175, 0, 5, 90);

//Minute plate
    stroke(255, 242, 255);  //Light purple
    strokeWeight(5);
    noFill();    
//Minute ring1
    arc(350, 310, D3, D3, start0, round);
    stroke(255, 215, 85);  //Yellow
    strokeWeight(30 * ratioM);
    arc(350, 310, D4, D4, start0, round * ratioM);
//Minute ring2    
    stroke(255, 235, 135);  //Light yellow
    strokeWeight(10 * ratioM);
    arc(350, 310, D4, D4, start0, round * ratioM); 
//Minute starting line
    noStroke();
    fill(255, 242, 255);
    rect(425, 305, 100, 10);

//Hour plate
    fill(255);
    ellipse(200, 390, D5, D5);

//12 Hour operator
    if(H > 12) {
        for(var i = 0; i < H - 12; i += 1){
            fill(151, 59, 227);
            ellipse(200, 320 + i * 15, 10, 10);
        }
    } else {
        for(var i = 0; i < H; i += 1){
            fill(151, 59, 227);
            ellipse(200, 320 + i * 15, 10, 10);
        }
    }

}

In this project, I explores the representation and abstraction of the clock by engaging geometries and colors. And visualizing the variation of time in a more creative way.

Sean Meng-Looking Outwards-06

Vladimir Kanic’s filmmaking artwork
“Art concept that uses chaos theory and randomness to create structured art.”
Link: https://www.youtube.com/watch?v=Krgp_QwfEJo

Transmedia filmmaking artist Vladimir Kanic used chaos theory* as a filmmaking tool and explored how a film can be made by using randomness as its principal structural language. In order to perform the process, the artist and his team have devised a concept of the Magic box, designed to serve as a model system of randomness. Twelve boxes were given to randomly chosen art directors, and each one had to put a random number of objects inside, seal the box and not disclose the contents to anyone. A group of random people set the boxes into a completely unorganized stash, and the artist had to choose one and pick it up on a random day. Since the artist didn’t know what kind of a film is going to be created, its structural language and technique were decided by observing and measuring randomness that emanated from the objects concealed in the box. The project and methodology explores how randomness can be define in multiple dimensions and how to engage people to interact with randomness and how the final work that had been generated can be unpredictable at the beginning.

Kimberlyn Cho – Looking Outwards 06

Arcs04-01 by Marius Watz

The “Random Number Multiple” series by Marius Watz and Jer Thorp attempt to encourage artists to use old school fine art strategies to hand print their computational (any computer or software-based) art. As part of the “Random Numbers” exhibit in NYC, the series takes part in a platform curated by Christina Vassallo for artists to experiment with new techniques or mediums.

Marius Watz’s “Arc” series uses a somewhat random composition of radial shapes that are distorted by a 3d surface to imitate a sense of movement while maintaining a focal point. Jer Thorp took a more systematic approach than Watz by using the newspaper as his reference. He tracked the frequency of specific words in the New York Times in a twenty-year time period, which he then graphed using a randomized group of colors based on the theme of the artwork.

Hope/Crisis by Jer Thorp

I found the combinative nature of the design process of these artworks to be most interesting. Most artists seem to go about one specific way of producing their art, whether it be by hand or with a certain software. I found it innovative how Watz and Thorp use a software to produce the computational image they want and then incorporate a factor of randomness with either the colors or array of the shapes to portray the work with traditional techniques. The timeless incorporation of a variety of strategies leaves room for results that might’ve not been expected or accidental new elements to the creation that creates work that the artist can then learn from.

Taisei Manheim – 06 – Abstract Clock


sketch

For this project I show time by having multiple objects to rotate around the Earth, with the sun/moon representing the hour, clouds representing the minute and satellite representing the seconds.  As seen in the sketch below the numerical values are represented in a semicircle around the Earth with the left side representing 9am/pm and the right side representing 9pm/am.  For the minutes and seconds the left side represents 15/45 and the right side represents 45/15.  In addition the sky is darkest at 3am and lightest at 3pm with a gradient between those times.  I wanted to have a clock that was abstract but could still be used to read time if you understood how it worked.

At first I thought the rotation around the Earth would be fairly simple and be used simply by translating and rotating, but I realized that wouldn’t work how I wanted it to using the hour(), minutes(), and seconds() commands so I had to figure it out more mathematically.  I couldn’t get each object to move from the right to the left once it finished its rotation from the left side to the right side so I had two of each object (only one is visible on the screen at any given time).

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-06

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

function draw() {
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    //Reckon the current millisecond, 
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //sky color lightest at 3pm and darkest 3am with color changing between
    var skyColor = 22 * abs(15 - H);
    background(135 - skyColor, 206 - skyColor, 235 - skyColor);
    
    //Earth
    noStroke();
    fill(0,0,255);
    ellipse(width / 2, height, width / 4, width / 4);
    
    //North America
    fill(127,255,0);
    beginShape();
    vertex(width / 2 + 6, height - 51.5);
    vertex(width / 2 + 5, height - 52);
    vertex(width / 2 + 5, height - 52.7);
    vertex(width / 2 + 6, height - 54.5);
    vertex(width / 2 + 8, height - 56.3);
    vertex(width / 2 + 10, height - 57.5);
    vertex(width / 2 + 12, height - 58.5);
    vertex(width / 2 + 7, height - 59.5);
    vertex(width / 2, height - width / 8);
    vertex(width / 2 - 7, height - 59.5);
    vertex(width / 2 - 12, height - 58.5);
    vertex(width / 2 - 17, height - 57.5);
    vertex(width / 2 - 22, height - 55.5);
    vertex(width / 2 - 27, height - 53);
    vertex(width / 2 - 32, height - 50.5);
    vertex(width / 2 - 37, height - 47);
    vertex(width / 2 - 42, height - 42.5);
    vertex(width / 2 - 42 + 8, height - 42  + 4);
    vertex(width / 2 - 42 + 12, height - 42  + 9);
    vertex(width / 2 - 42 + 25, height - 42  + 35);
    vertex(width / 2 - 42 + 27, height - 42  + 38);
    vertex(width / 2 - 42 + 30, height - 42  + 40);
    vertex(width / 2 - 42 + 35, height);
    vertex(width / 2 + 5, height);
    vertex(width / 2 + 2, height - 2);
    vertex(width / 2 + 1, height - 3);
    vertex(width / 2 - 0.5, height - 5);
    vertex(width / 2 - 2, height - 8);
    vertex(width / 2 - 4, height - 12);
    vertex(width / 2 - 4, height - 14);
    vertex(width / 2 - 3, height - 15);
    vertex(width / 2 - 1, height - 16.5);
    vertex(width / 2 + 1, height - 17.3);
    vertex(width / 2 + 3, height - 18);
    vertex(width / 2 + 5, height - 18.5);
    vertex(width / 2 + 7, height - 18.5);
    vertex(width / 2 + 9, height - 18.2);
    vertex(width / 2 + 11, height - 17.7);
    vertex(width / 2 + 13, height - 17.2);
    vertex(width / 2 + 15, height - 16.5);
    vertex(width / 2 + 17, height - 15.7);
    vertex(width / 2 + 19, height - 15.4);
    vertex(width / 2 + 21, height - 15.4);
    vertex(width / 2 + 21.5, height - 15.7);
    vertex(width / 2 + 21.7, height - 16.3);
    vertex(width / 2 + 21.7, height - 17);
    vertex(width / 2 + 21.4, height - 17.5);
    vertex(width / 2 + 21, height - 18.5);
    vertex(width / 2 + 19.5, height - 19.8);
    vertex(width / 2 + 18.5, height - 20.5);
    vertex(width / 2 + 18, height - 21.5);
    vertex(width / 2 + 18, height - 23);
    vertex(width / 2 + 19.5, height - 28);
    vertex(width / 2 + 22.5, height - 33);
    vertex(width / 2 + 25.5, height - 36);
    vertex(width / 2 + 28.5, height - 40);
    vertex(width / 2 + 29.5, height - 42);
    vertex(width / 2 + 29.5, height - 44);
    vertex(width / 2 + 28.5, height - 45);
    vertex(width / 2 + 27, height - 46);
    endShape();

    //text
    fill(255);
    textSize(24);
    text(H + ":" + M + ":" + S, width / 2 - 30, 100);
    
    //remapping hour, second, minute values to use with cos and sin for circular motion
    var sec = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
    var min = map(minute() + map(second(), 0, 60, 0, 1), 0, 60, 0, TWO_PI) - HALF_PI;
    var hr = map(hour() + map(minute(), 0, 60, 0, 1), 0, 24, 0, TWO_PI * 2) - HALF_PI;

    //seconds
    //sattelite 1
    //wing 1
    fill(150);
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, (height + sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 10, height + sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 + cos(sec) * width / 2 * 0.75, height + sin(sec) * width / 2 * 0.75,
        width / 2 + cos(sec) * width / 2 * 0.75, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, (height + sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 + cos(sec) * width / 2 * 0.75) - 20, height + sin(sec) * width / 2 * 0.75);

    //sattelite 2
    //wing 1
    fill(150);
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) - 30,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    //wing 2
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, (height - sin(sec) * width / 2 * 0.75) + 20,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 10, height - sin(sec) * width / 2 * 0.75);
    fill(255);
    //body
    quad(width / 2 - cos(sec) * width / 2 * 0.75, height - sin(sec) * width / 2 * 0.75,
        width / 2 - cos(sec) * width / 2 * 0.75, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, (height - sin(sec) * width / 2 * 0.75) - 10,
        (width / 2 - cos(sec) * width / 2 * 0.75) - 20, height - sin(sec) * width / 2 * 0.75);
    
    //minutes
    //cloud1
    fill(255);
    ellipse(width / 2 + cos(min) * width / 2 * 0.5, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 10, height + sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) + 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 + cos(min) * width / 2 * 0.5) - 5, (height + sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ///cloud2
    ellipse(width / 2 - cos(min) * width / 2 * 0.5, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 10, height - sin(min) * width / 2 * 0.5, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) + 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) + 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    ellipse((width / 2 - cos(min) * width / 2 * 0.5) - 5, (height - sin(min) * width / 2 * 0.5) - 7, 15, 15);
    
    //hours
    //moon & sun 1
    fill(255,255,0);
    ellipse(width / 2 + cos(hr) * width / 2, height + sin(hr) * width / 2, 50, 50);
    //moon & sun 2
    fill(255,255,0);
    ellipse(width / 2 - cos(hr) * width / 2, height - sin(hr) * width / 2, 50, 50);
}

Ammar Hassonjee – Looking Outwards 06

Picture of Gerhard Richter’s “4900 Colors: Version II” displayed in the Serpentine Gallery

The artwork above is a project by Gerhard Richter called “4900 Colors, Version II” that is comprised of 196 panels that are a 5 x 5 square. Richter used a computer program to designate a random color to each square from a list of 25 colors. The algorithm used was a simple random function that assigned a color at random from the list, but the artwork itself is a beautiful composition as it does not look as random. Richter’s purpose in this artwork was to illustrate how even when randomness is the primary generation factor, patterns can still emerge as the probability of having a pattern of colors is not as low. I admire this projects use of a simple code structure to generate a seemingly complex image through multiple iterations and then the way in which these iterations are represented together.

Taisei Manheim – Looking Outward – 06

The project that I chose was a piece called Color-Wander by Matt DesLauriers, a generative artist and creative coder from Toronto.  Color-Wander is a high resolution generative artwork that shows lines that are randomly drawn and produces a different pattern of lines and colors every time that it is clicked.  This project combines Node.js and HTML Canvas because it does well at handling larger resolutions. In order to make the image more polished, Matt used photos of snails, flowers, architecture, geometry and more as distortion maps to drive the algorithm.  When choosing colors, rather than choosing colors by hand he sourced the top 200 palettes from an online design community forum.  I find this project to be interesting because each time you click everything changes about the image, such as the density of strokes, stroke type, and overall style of the image rather than just the colors changing.

link to project
Example of an image produced by clicking.

Timothy Liu — Looking Outwards — 06

Spectrum Colors Arranged by Chance I,” as created by Ellsworth Kelly in 1951. Kelly used colored squares and wove them into his tapestries.

For this week’s Looking Outwards, I observed Spectrum Colors Arranged by Chance I, a work by Ellsworth Kelly from 1951. At first glance, the piece seems playful yet confusing; it’s essentially a two-panel collage of coated and uncoated colored squares with no discernible pattern. But when you stop to break down Kelly’s genius, it’s clear that there isn’t meant to be any pattern. That’s why the piece is proclaimed to be “arranged by chance”: Kelly literally cut up individual colored squares and sorted them as randomly as possible based on the grid he defined underneath.

Kelly at the time was undergoing a stylistic shift in his art style, moving from figuration to abstraction. To Kelly, “abstraction” meant randomness, which is why he set about making this collage of cut-up pieces from his colored drawings. To the naked eye, he seems to have been immensely successful, as it’s almost impossible to pick out any color pattern in his work. However, it’s important to note that Kelly was human, which meant that his work could not have been truly random. According to the Philadelphia Museum of Art, Kelly simply placed the colored squares “quickly and intuitively” on the grid without much thought. That said, humans are inherently subject to cognitive influences that cause us to act in certain ways; it’s very likely that Kelly placed a few squares in spots he thought were random, but were actually influenced by the presence of other color squares.

Only a computer program can get close to pure randomness; many functions, including random(), allow a user to call a random value from a range. But even computers can’t be fully random, as they are built from human models of information and randomness! Unless we feed computers all of the information in the world to use as data, they’ll never be truly random. That said, this is slowly changing with the rise of AI/ML, and it’s likely much more possible now for a machine to draw a random work of art on its own. I would love to see a random, computerized version of “Spectrum Colors Arranged by Chance I.” It seems like it would be difficult to identify differences between Kelly’s work and a computer’s, but perhaps there’s an algorithm or program that could determine that too!

Sources:

https://www.philamuseum.org/collections/permanent/295539.html

Nawon Choi— Project 05 Wallpaper

nawon-05

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C

function setup() {
    createCanvas(440, 540);
    background("white");
    stroke("white");
    for (var y = 0; y < height + 20; y += 110) {
        for (var x = 0; x < width + 20; x += 110) {
            // background triangles
            fill(y/2, x/2, 200);
            triangle(x, y, x, y + 100, x + 50, y + 50);
            fill(y/2, x/2, 180);
            triangle(x, y, x + 100, y, x + 100, y + 100);
            // center circle
            fill(y/2, x/2, 250);
            ellipse(x + 50, y + 50, 25, 25);
            fill(y/2, x/2, 220);
            triangle(x, y + 100, x + 50, y + 50, x + 100, y + 100);
            fill("white");
            ellipse(x + 50, y + 25, 5, 5);
            // bottom triangles
            fill(y/2, x/2, 250);
            triangle(x + 50, y + 50, x, y + 100, x + 33, y + 100);
            fill(y / 3, x / 3, 150);
            triangle(x + 50, y + 50, x + 33, y + 100, x + 66, y + 100);
        }
    }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

For this project, I was inspired by geometric shapes, as well as the color gradient that we learned how to code during lab. I tried to create a small landscape image through the composition of my geometric elements. I like the way the that the gradient adds to the wallpaper by the way it alludes to a sunset or sunrise, and the way the colors of the sky change.

I sketched out a couple different ideas that I tested in p5.js, and ultimately decided on one that looked the best compositionally. I found that a lot of the other iterations had too many elements which was overwhelming to the eye.

Idea sketches