Creative coding color study : SORTING / SEQUENCES
If I wanted my creative coding works to look beautiful as artwork, they should have a suitable arrangement of colors.
But it's not easy.
I can't make sense of the colors. I always have difficulty choosing the colors. I think I have no color sense.
Then, all I can do are study and train!
So I decided to study using the essay by Mr. Tyler Hobbs 'COLOR ARRANGEMENT IN GENERATIVE ART'
I'll work on the theme 'SORTING / SEQUENCES' this time. I'll write codes with the 'p5.js'.
Sort colors with three elements of HSB
RGB color mode seems to be difficult to sort. So I used HSB color mode. And I sorted by Hue, Saturation, and Brightness.
Here is the example code of sorting.
/**
* Color Study : SORTING
* @author @deconbatch
* @license CC0 https://creativecommons.org/publicdomain/zero/1.0/
* @version 0.1
* p5.js 1.1.3
* created 2022.08.14
*/
const w = 640;
const h = 480;
const margin = h * 0.05;
const lineCnt = 40;
const colorAry = new Array(lineCnt);
function setup() {
createCanvas(w, h);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
// set random colors
for (let l = 0; l < lineCnt; l++) {
colorAry[l] = createVector(
random(240, 360), // hue
random(30, 80), // sat
random(50, 90) // bri
);
}
/* sort colors by hue
colorAry.sort(function (a, b) {
return a.x - b.x;
});
*/
// background gray
background(0, 0, 90, 100);
// draw lines
translate(0, margin);
noFill();
strokeWeight(h * 0.005);
for (let l = 0; l < lineCnt; l++) {
let lRatio = l / lineCnt;
let lY = (h - margin * 2) * lRatio;
let lC = colorAry[l];
push();
translate(0, lY);
stroke(lC.x % 360, lC.y, lC.z);
drawWave(PI * lRatio, 5 * (1 + lRatio));
pop();
}
}
function drawWave(_phase, _cycle) {
const amp = h * 0.02;
beginShape();
for (let x = 0; x < width; x++) {
let xRatio = x / width;
let y = amp * xRatio * sin(_phase + PI * _cycle * xRatio);
vertex(x, y);
}
endShape();
}
Set the HSB values randomly.
random(240, 360), // hue
random(30, 80), // sat
random(50, 90) // bri
This is the example result of no sorting.
Sort by hue value
I tried to draw from up to down with the sorted colors by hue value.
// sort colors by hue
colorAry.sort(function (a, b) {
return a.x - b.x;
});
The result of sorting by hue value looks simple and can realize 'It's color sorting' easily.
The random saturation and brightness make some taste, I think.
Sort by saturation value
// sort colors by sat
colorAry.sort(function (a, b) {
return a.y - b.y;
});
As the saturation value increases, the line looks lively.
Sort by brightness value
I sorted by brightness value descending this time.
// sort colors by bri
colorAry.sort(function (a, b) {
return b.z - a.z;
});
As go down, it gets dark. I tried to express the heavyness.
It ain't gradations of colors?
I wrote a code sorting by the HSB elements. The sorted results looked like color gradation results.
I can't make sense of the difference between sorting and the gradations of colors.
How about a color scheme that orders the color palette?
The next theme is 'SEQUENCES'. I interpreted this as arranging colors in a sequence. I'll use HSB mode here too.
Here is the example code of sequences and the result.
/**
* Color Study : SEQUENCES
* @author @deconbatch
* @license CC0 https://creativecommons.org/publicdomain/zero/1.0/
* @version 0.1
* p5.js 1.1.3
* created 2022.08.14
*/
const w = 480;
const h = 640;
const margin = h * 0.05;
const lineCnt = 20;
const colorAry = new Array(lineCnt);
function setup() {
createCanvas(w, h);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
// set sequential colors
let hueVal = 0;
for (let l = 0; l < lineCnt; l++) {
if (l % 4 == 0) {
hueVal = random(240);
}
colorAry[l] = createVector(
hueVal, // hue
60, // sat
80 // bri
);
}
/* set random colors
for (let l = 0; l < lineCnt; l++) {
colorAry[l] = createVector(
random(240), // hue
60, // sat
80 // bri
);
}
*/
// background gray
background(0, 0, 90, 100);
// draw lines
translate(0, margin);
noStroke();
for (let l = 0; l < lineCnt; l++) {
let lRatio = l / lineCnt;
let lY = (h - margin * 2) * lRatio;
let lC = colorAry[l];
push();
translate(0, lY);
fill(lC.x % 360, lC.y, lC.z);
drawWave(PI * lRatio, 2 * (1 + lRatio));
pop();
}
}
function drawWave(_phase, _cycle) {
const amp = h * 0.025;
beginShape();
for (let x = 0; x < width; x++) {
let xRatio = x / width;
let y = amp * xRatio * sin(_phase + PI * _cycle * xRatio);
vertex(x, y);
}
endShape();
}
And here is the example result of a random color scheme.
I feel the random color scheme is not so bad. I'm afraid 'SEQUENCES' does not ring my bell. I wonder if my trial were not enough or if I misunderstood.
Conclusion
I tried to write a code of the color scheme by the theme 'SORTING / SEQUENCES', not in my ordinal way. I felt I got more things to think about the color.
I wrote a code taking advantage of what I learned.
/**
* Color Study : example work
* @author @deconbatch
* @license CC0 https://creativecommons.org/publicdomain/zero/1.0/
* @version 0.1
* p5.js 1.1.3
* created 2022.08.14
*/
const w = 480;
const h = 640;
const margin = h * 0.05;
const lineCnt = 8;
function setup() {
createCanvas(w, h);
colorMode(HSB, 360, 100, 100, 100);
const wave = new Wave();
// background gray
background(0, 0, 90, 100);
// draw lines
translate(0, margin);
for (let l = 0; l < lineCnt; l++) {
let lRatio = l / lineCnt;
let lY = h * lRatio;
push();
translate(0, lY);
wave.drawWave(PI * lRatio, 3 * (1 + lRatio), lRatio);
pop();
}
}
class Wave {
constructor() {
this.colorCnt = 3;
this.colorIdx = 0;
this.colorAry = new Array(this.colorCnt);
for (let i = 0; i < this.colorCnt; i++) {
this.colorAry[i] = createVector(
random(360), // hue
random(30, 50), // sat
90.0 // bri
);
}
}
drawWave(_phase, _cycle, _lRatio) {
const amp = h * 0.05;
let sign = 1;
noStroke();
beginShape();
for (let x = 0; x < width; x+=2) {
let xRatio = x / width;
let y = amp * (sin(_phase + _cycle * xRatio));
if (sign * y < 0) {
// change color
this.colorIdx++;
sign *= -1;
endShape();
beginShape();
}
let lC = this.colorAry[this.colorIdx % this.colorCnt];
fill(lC.x % 360, lC.y, lC.z * (1.0 - _lRatio * 0.5));
vertex(x, y);
}
endShape();
}
}
deconbatch
To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.
