let lines = []

let circles = []

let offsets = []

​

let divs, scl;

​

const PHI = 1.618033

let a, b, ip

​

function setup() {

    l = max(min(windowWidth, windowHeight), 790)

    createCanvas(w = l, h = l)

    bg = createGraphics(w, h)

    r = random

    divs = round(0.038 * l)

    divs = 7

    ip = random(100)

​

    ws = w/5 //white space

​

    // const rWidth = w/pal.length

    bg.blendMode(ADD) // BLEND, ADD, DIFFERENCE, MULTIPLY, OVERLAY

    for (let i = 0; i < l * 0.12345; i++) {

        // const x = r(ws, w-ws)

        // const y = r(ws, h-ws)

        let theta = random(TAU)

        let radius = random(w / 2)

        const x = w / 2 + radius * cos(theta)

        const y = h / 2 + radius * sin(theta)

​

        let area = r(40, 160)

        let amount = r(3, 6) * area

        let weight = r(0.05, 0.15) * l

        spotlight(bg, x, y, area, amount, weight)

    }

    let len = l - 2 * ws

    let yStep = len / pal.length

    let unit = len / divs

    for (let j = 0; j < pal.length; j++) {

        let tmp = []

        for (let i = 0; i < divs; i++) {

            const circle = {

                cx: ws + unit / 2 + i * unit,

                cy: ws + yStep / 2 + j * yStep,

                rmin: random(20, 50),

                offset: j * 0.1

            }       

            tmp.push(circle)

        }

        circles.push(tmp)

    }

    a = random(TAU); b = random(TAU); 

    // for (let i = 0; i < pal.length; i++) {

    //  const v1 = createVector(ws,ws + i * yStep)

    //  const v2 = createVector(ws + len, ws + i * yStep)

    //  // let ln = new lline(v1, v2, 120, color(pal[i]), color(pal[(i+1) % pal.length]), true)

    //  let ln = new lline(v1, v2, r([120, 40, 20]), color(pal[i]), color(pal[i]), true)

    //  ln.compute()

    //  lines.push(ln)

    // }

​

    // noLoop()

    // Wave parameter object data structure

    // for (let i = 0; i < pal.length; i++) {

    //     const waveObj = {

    //         a1 : random(TAU),

    //         b1 : random(TAU),

    //         a2 : random(TAU),

    //         b2 : random(TAU),

    //         // incr: [random(l / 157600, l / 19700), random(l / 157600, l / 19700), random(l / 157600, l / 19700), random(l / 157600, l / 19700)],

    //         incr: [r(0.05, 0.1), r(0.05, 0.1), r(0.05, 0.1), r(0.05, 0.1)],

    //         off: [0, 0, 0, 0],

    //         stat: false

    //     }

    //     waves.push(waveObj)

    // }

   scl = 0.019 * l

}

​

function draw() {

    background(41)

    image(bg, 0, 0) // Draw the background

​

    let len = l - 2 * ws

    let yStep = len / pal.length

    // for (let i = 0; i < pal.length; i++) {

        // stroke(pal[i])

        // strokeWeight(floor(l * 0.061728))

        // let ln = lines[i]

        // ln.draw()

        // line(ws,ws + i * yStep, ws + len, ws + i * yStep)

        // Experiment

        // let w = waves[i]

        // drawWave({ x : ws, y: yStep / 2 + ws + i * yStep }, len, w.a1 + w.off[0], w.b1 + w.off[1], w.a2 + w.off[2], w.b2 + w.off[3], pal[i], w.stat)

        // More

      // }

      for (let j = 0; j < pal.length; j++) {

          for (let i = 0; i < divs; i++) {

              let c = circles[j][i]

              let diam = f(ip + c.offset, a, b) * scl

              circle(c.cx, c.cy, diam)

              c.offset += 0.01

          }

      }

}

​

const pal = ["#FBF04C", "#4688CB", "#F76321", "#44B649",

             "#ECB220", "#ED2526", "#A4DBE7"]

const pal2 = ["#EB8B32", "#99210A", "#F9E05C", "#4F97B2", "#1C1726"]

​

const pal3 = ["#47096f", "#0a1328", "#df952a", "#b8160d", "#570007", "#380371", "slateblue"]

​

​

function drawWave(v1, len, a1, b1, a2, b2, col, isStat) {

    push()

    let unit = len / divs

    translate(v1.x, v1.y)

    let x = unit / 2

    // stroke(col)

    // strokeWeight(l/40)

    fill(col)

    noStroke()

    for (let i = 0; i < divs; i++) {

        let y1 = f(x, a1, b1) * scl

        let y2 = f(x, a2, b2) * scl

        // line(x, y1, x, y2)

        let cy = lerp(y1, y2, 0.5)

        let len = max(dist(x, y1, x, y2), 10)

        circle(x, cy, len)

        if (isStat) circle(x, cy, 30)

        x += unit

    }

    pop()

}

​

let D = (x1, y1, x2, y2) => {

    return (((x2 - x1)**2 + (y2 - y2)**2)**0.5)

}

​

let f = (x, a, b) => {

    return sin(2 * sin(PHI * x + b) + a)

}

function spotlight(buff, posX, posY, area, amount, weight) {

    // stroke(random(pal))

    let offset = weight / 4

    buff.noStroke()

    let col = random(pal3)

    for (let i=0;i<amount;i++) {

        buff.strokeWeight(weight)

        const x = randomGaussian(posX, area)

        const y = randomGaussian(posY, area)

        const randomWeight = weight + r([-1, 1]) * r(offset)

        const alpha = 1

        buff.fill(red(col), green(col), blue(col), alpha)

        buff.circle(x, y, randomWeight)

    }

}

​

​

// class lline {

//   constructor(a, b, step, col1, col2, mix) {

//     this.a = createVector(a.x, a.y)

//     this.b = createVector(b.x, b.y)

//     this.c = createVector(a.x, a.y)

//     this.step = step

//     this.m = 1

//     this.col1 = col1

//     this.col2 = col2

//     this.mix = mix

//     this.cols = []

//     this.pos = []

//   }

​

//   compute() { 

//     this.a.sub(this.b)

//     this.m = this.a.mag()

//     this.a.normalize()

//     this.a.mult(this.step)

//     const lerpStep = 1.0/this.m

//     let dir

//     if (this.mix) {

//       if(r()<0.5) dir = 0

//       else dir = 1

//     }

//     else dir = 1

//     for(let i=0;i<this.m;i+=this.step) {

//       let col

//       // colorMode(RGB)

//       if(dir) col = lerpColor(this.col1, this.col2, lerpStep*i)

//       else col = lerpColor(this.col2, this.col1, lerpStep*i)

​

//       if (i%this.step==0) {

//         this.cols.push(color(col))

//         this.pos.push(createVector(this.c.x, this.c.y))

//       }

//       this.c.sub(this.a)

//     }

//     // adding reversed array of colors to achieve continues color loop

//     let temp = []

//     temp.push(...this.cols)

//     temp.reverse()

//     temp = temp.slice(1, temp.length-1) //removing first and last entry to prevent duplicates of colors 

//     let c = 'Black'

//     while (c === 'Black') c = (r(pal)) // don't use Black as accent color

//     c = color(c)

​

//     this.cols.push(c) //adding accent dot

//     this.cols.push(...temp)

//   }

//   draw() {

//     for (let i=0;i<this.pos.length; i++) {

//      stroke(this.cols[int(i%this.cols.length)])

//          strokeWeight(random(width/20))

//      point(this.pos[i].x, this.pos[i].y)

//     }

//   }

// }

​

// Utility

function randi(low, high) {

  return floor(random(low, high + 1))

}