genuary 31: pixel sorting

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

​

​

let circles=[]

let finished=[]

let panel

​

function preload(){

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

}

​

function setup() {

  createCanvas(400, 400); 

  shuffle(colors, true)

  pixelDensity(1)

  background('#f4f1de') 

  strokeCap(PROJECT)

  noStroke()

  poissonDiscSample(20)

  fit(20);

  let bgc=colors[colors.length-1]

  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)

  // text('1.24', 20, 380)  

  panel= get()

}

​

function draw() {

  panel.loadPixels();

  for (let i = 0; i < panel.width - 1; i++) {

    for (let j = 0; j < panel.height; j++) {

      if (hue(fGetPanelPixel(i, j)) > hue(fGetPanelPixel(i + 1, j))) {

        let hold = fGetPanelPixel(i + 1, j);

        fSetPanelPixel(i + 1, j, fGetPanelPixel(i, j));

        fSetPanelPixel(i, j, hold);

      }

    }

  }

  panel.updatePixels();

​

  background(0);

  image(panel, 0, 0);

  if(frameCount==350){

      textFont(font)

   fill(10)

  text('1.31', 20, 380)  

    noLoop()

  }

}

​

// fast pixel get function requires pixels loadPixels()

// returns an array for the color of the pixel as [r,g,b]

​

function fGetPanelPixel(x, y) {

  const index = 4 * (y * panel.width + x);

  return [panel.pixels[index], panel.pixels[index+1], panel.pixels[index+2]];

}

​

// fast pixel set function requires loadPixels()

// updates the [r,g,b] chanel of the pixel using the value c

// this function assumes that the pixelDensity is 1. For a method  

// using pixel densities, https://p5js.org/reference/#/p5/pixels

​

function fSetPanelPixel(x, y, c) {

  const index = 4 * (y * panel.width + x);

  panel.pixels[index] = c[0];

  panel.pixels[index+1] = c[1];

  panel.pixels[index+2] = c[2];

}

​

​

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, d), 0, 1, -pnd, pnd)

    let yoff= map(noise(x/50, y/10, d), 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)*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

}

​