# 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();
}
}
```
```

No Comment