xxxxxxxxxx
98
/*
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();
}