https://adamherst.art/current_projects/interaction_of_colour/04_the_relativity_of_colour/index.html

To begin the study of how colour deceives and how to make use of this the first exercise is to make one and the same colour look different.

​

As a practical study we ask that 2 small rectangles of the same colour and the same size be placed on large grounds of very different colour.

based on Josef Albers' Interaction of Color.

*/

​

'use strict'

​

// declare the variables for the dimensions of the sketch

let canvas = {}, content = {};

let colours = [];

let leftColour = "", rightColour = "", innerColour = "";

let sketchName = "";

​

function setup() {

  sketchName = "interaction_of_colour/04_the_relativity_of_colour";

  canvas = createCanvas(windowWidth,windowHeight);

  // centerCanvas();

  rectMode(CENTER);

  content = createGraphics(canvas.width*7.5/8.5,canvas.height*9.5/11);

​

  // Fill the colours array with colour strings

  // The Sixteen Named Colors--All Codes https://www.december.com/html/spec/color16codes.html

  colours = ['black', 'gray', 'silver', 'white', 'maroon', 'red', 'olive',

  'yellow', 'green', 'lime', 'teal', 'aqua', 'navy', 'blue',   'purple', 'fuchsia'];

  // Safe Hexadecimal Color Codes https://www.december.com/html/spec/colorsafe.html

  let l = 0;

  for (let i = 0x0; i <= 0xff; i += 0x33) {

    for (let j = 0x0; j<= 0xff; j+= 0x33) {

      for (let k = 0x0; k<=0xff; k += 0x33) {

        colours[l] =("#" + ("0"+i.toString(16)).slice(-2) + ("0"+j.toString(16)).slice(-2) + ("0"+k.toString(16)).slice(-2));

        l++;

      }

    }

  }

  leftColour = 'white';

  rightColour = 'white';

  innerColour = 'white';

  rectMode(CENTER);

  textAlign(CENTER,CENTER);

  textSize(12);

}

​

function draw() {

  background('white');

  noStroke();

​

  // choose different colours

  innerColour = colours[int(random(colours.length))];

  do {leftColour = colours[int(random(colours.length))]} while (leftColour === innerColour) ;

  do {rightColour = colours[int(random(colours.length))]} while (rightColour === innerColour || rightColour === leftColour);

​

  // centre the origin on the screen

  push();

  translate(width/2,height/2);

​

  // draw the left side

  push();

  translate(-content.width/4,0);

  fill(leftColour);

  rect(0,0,content.width/2,content.height);

  fill(innerColour);

  rect(0,0,content.width/2/4,content.height/4);

  translate(0,content.height/2);

  pop();

​

  // draw the right side

  push();

  translate(content.width/4,0);

  fill(rightColour);

  rect(0,0,content.width/2,content.height);

  fill(innerColour);

  rect(0,0,content.width/2/4,content.height/4);

  pop();

​

  // print the colour values

  push();

  translate(0,height/2-textSize());

  text(innerColour,0,0);

​

  push();

  translate(-content.width/4,0)

  text(leftColour, 0, 0);

  pop();

​

  push();

  translate(content.width/4,0);

  text(rightColour,0,0);

  pop();

​

  pop();

​

  // wait for a mouse click

  noLoop();

}

​