Genuary 24: Geometric art

let colors=["#fdfaf3","#fcb67b","#c96f2e","#32c2f9","#0278a1","#014256","#102a39"]

let circles=[]

let finished=[]

let bgc

​

function preload(){

font= loadFont('FamiljenGrotesk-VariableFont_wght.ttf')

}

​

function setup() {

  createCanvas(400, 400); 

  background('#f4f1de') 

  strokeCap(PROJECT)

  noStroke()

  poissonDiscSample(20)

  fit(20);

  bgc=colors[colors.length-1]

}

​

function draw(){

background('#f4f1de') 

  fill(bgc)

  rect(0, 0, 400, 400)

  for(let c of circles){

    deepCircle(c.x, c.y, c.z*0.66)

  }

  fill('#f4f1de')

  noStroke()

  rect(0, 0, width, 60)

  rect(0, 0, 60, height)

  rect(340, 0, 60, height)

  rect(0, 340, width, 60)

​

  textFont(font)

   fill(100)

  noStroke()

  text('1.24', 20, 380)  

}

​

​

function deepCircle(x, y, d){

  push()

  translate(x, y)

  for(let i=1; i<=50; i++){

    let nd= map(i, 1, 50, d, d/10)

    let pnd= map(i, 1, 50, 0, d*0.66)

    let xoff= map(noise(x/10, y/50, frameCount/100), 0, 1, -pnd, pnd)

    let yoff= map(noise(x/50, y/10, frameCount/100), 0, 1,  -pnd, pnd)

    fill(colorMixer(x, y,d, nd, colors))

    circle(xoff, yoff, nd)

  }

  pop()

}

​

function colorMixer(x, y, d, nd, colorArray) {

  let cr = noise(x/10, y/10, frameCount/100)*2

  let c= map(nd, d, 0, cr, colorArray.length-1)

  let c1 = floor(c)

  let c2 = floor(c + 1) % colorArray.length

  let color1 = colorArray[c1]

  let color2 = colorArray[c2]

  let mix = fract(c)

  let coloring = spectral.mix(color1, color2, mix)

  return coloring

}

​

​