(  _ \(  )/ ___)(  __)(  _ \/ ___)(__ \ 

    )   / )( \___ \ ) _)  )   /\___ \ (__/ 

   (__\_)(__)(____/(____)(__\_)(____/ (_)  

   A quick experiment vaguely based on OG blank VHS tape art.

   https://flashbak.com/blank-vhs-cassette-packaging-design-trends-art-402545/

*/

​

const risers = [] // declare variable "risers"

                  // assigning to it an empty array

​

function setup () {  // runs once, at the start

​

    createCanvas (400, 400) // creating a canvas

                            // 400 pixels wide &

                            // 400 pixels tall

}

​

function draw () {  // loops, after setup has run

​

    background ('purple')  // fills the canvas in purple

​

    // IF frame count is a multiple of 25

    // AND there are fewer than 8 elements

    // in the array assigned to the variable "risers"

    if (frameCount % 25 == 0 && risers.length < 8) { 

​

        // add to the "risers" array

        // a new Riser object (see class in riser.js)

        // with a height of 40, a period of 200,

        // and the colour, tomato

        risers.push (new Riser (40, 200, color('tomato')))

    }

​

    // for each object in the "risers" array

    // call the `increment ()` method

    risers.forEach (r => r.increment ())

​

    // for each object in the "risers" array

    // call the `show ()` method

    risers.forEach (r => r.show ()) 

    // the risers, drawn above, are in the background

    // the code below draws the worm-type thing

​

    // storing a third of the width

    // in a variable called "third"

    const third = width / 3 

​

    const half  = width / 2 // stores half the width

                            // in a variable called "half"

​

    for (let i = 0; i < 256; i++) { // loop 256 times

​

        // create variable "period"

        // as i goes from 0 to 255

        // period goes from 0 to 1

        const period = i / 255                        

​

        // create variable "y_pos"

        // as period goes from 0 to 1

        // y_pos goes from one third 

        // to two thirds

        const y_pos = third + third * period  

​

        // make an angle that increments both 

        // through the for loop, ie. with period

        // and through time, ie. with frameCount

        // slow the increment through time down

        // by dividing frameCount by 255

        // add the two together, and multiply by two pi

        // store the value in the variable "angle"

        const angle = (period + (frameCount / 255)) * PI * 2

​

        // make an x position by starting 

        // at the halfway mark

        // and adding the sine of 

        // the angle calculated previously

        // multiplied by a third of the width

        // new range: [ half - third, half + third ]

        const x_pos =  half + third * sin (angle)

​

        fill (i) // make the fill colour a shade of grey

                 // equal to i

                 // range: [ 0, 255 ]

​

        noStroke () // no outline

​

        // draw a circle at (x_pos, y_pos)

        // with a diameter of width / 3

        ellipse (x_pos, y_pos, third)

    }

​

}

​