Genuary 16: Generative palette.

let message = false

let messageCount = 40

let colors=[]

let hexColors=[]

​

​

function preload(){

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

}

​

function setup() {

  createCanvas(400, 400); 

  background('#f4f1de') 

  makeColors()

}

​

function draw(){

background('#f4f1de') 

  let spacing= 320/colors.length

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

    noStroke()

    fill(hexColors[i])

    rect(40, 40+(i*spacing), 320, spacing)

  }

  noFill()

  noStroke()

  textFont(font)

   fill(100)

  strokeWeight(1)

  stroke(100)

  text('1.16', 20, 380)

  text('space to regenerate, click to copy color array to clipboard', 55, 30)

  if (message) {

    messageCount--

    push()

    blendMode(DIFFERENCE)

    let offset = -40 + (messageCount)

    fill(255, 255 + offset * 5)

​

    text('array copied', mouseX - offset / 5, mouseY + offset)

    pop()

    if (messageCount < 0) {

      message = false

    }

  }

}

​

function mousePressed() {

    let colorClip = hexColors

    let stringedArray = JSON.stringify(colorClip);

    copyToClipboard(stringedArray)

​

    //these reset some variables for the 'array copied' message

    messageCount = 40

    message = true

}

​

​

// I did not write this function, but copied it from user Greg Lowe on Stack Overflow

​

function copyToClipboard(text) {

  if (window.clipboardData && window.clipboardData.setData) {

    // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.

    return window.clipboardData.setData("Text", text);

​

  } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {

    var textarea = document.createElement("textarea");

    textarea.textContent = text;

    textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge.

    document.body.appendChild(textarea);

    textarea.select();

    try {

      return document.execCommand("copy"); // Security exception may be thrown by some browsers.

    } catch (ex) {

      console.warn("Copy to clipboard failed.", ex);

      return prompt("Copy to clipboard: Ctrl+C, Enter", text);

    } finally {

      document.body.removeChild(textarea);

    }

  }

}

​

function colorMixer(x, colorArray) {

  let c = noise(x) * colorArray.length

  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

}

​

function makeColors(){

  let c1= [random(150, 250), random(150, 250), random(150, 250)]

  let r2= 255-c1[0]+random(-20, 20)

  let g2= 255-c1[1]+random(-20, 20)

  let b2= 255-c1[2]+random(-20, 20)

  let c2= [r2, g2, b2]

​

  let r3= c1[0]-random(75, 120)

  let g3= c1[1]-random(75, 120)

  let b3= c1[3]-random(75, 120)

  let c3= [r3, g3, b3]

  let c3brightness= c3[0]+c3[1]+c3[2]

  let c4brightness=765-c3brightness

  if(abs(c4brightness-c3brightness)<30){

    c4brightness+=random(30, 60)

  }

  let r4= c2[0]+random(25, 30)

  let g4= c2[1]+random(25, 30)

  let b4= c2[3]+random(25, 30)

  let c4=[r4, g4, b4]

  let r5= (c1[0]+c2[0])*0.5 + random(-30, 30)

  let g5= (c1[1]+c2[1])*0.5 + random(-30, 30)

  let b5= (c1[2]+c2[2])*0.5 + random(-30, 30)

  let c5= [r5, g5, b5]

  colors.push(c3)

  colors.push(c1)

  colors.push(c5)

  colors.push(c4)

  colors.push(c2)

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

  let c= colors[i]

  let hexed= rgbToHex(c[0], c[1], c2[2])  

  hexColors.push(hexed)

  }

}

​

function rgbToHex(r, g, b) {

  return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);

}

​

document.body.onkeyup = function(e) {

  if (e.key == " " ||

      e.code == "Space" ||      

      e.keyCode == 32      

  ) {

let message = false

let messageCount = 40

colors=[]

hexColors=[]

setup()

  }

}

​