# 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
* @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
* @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
* @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
{"ft_lang_label":"__label__en","ft_lang_prob":0.6087308,"math_prob":0.97786987,"size":6108,"snap":"2023-40-2023-50","text_gpt3_token_len":1951,"char_repetition_ratio":0.11959371,"word_repetition_ratio":0.37332138,"special_character_ratio":0.36820564,"punctuation_ratio":0.23001508,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9924041,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2023-12-05T14:19:36Z\",\"WARC-Record-ID\":\"<urn:uuid:a886e23b-fa7d-4df5-9780-c3055cc18b2f>\",\"Content-Length\":\"99375\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:6633f37d-7af1-48b7-bf34-80bb6bba44e4>\",\"WARC-Concurrent-To\":\"<urn:uuid:34c7511a-d503-413f-aa71-6e9f614e8d87>\",\"WARC-IP-Address\":\"142.250.31.121\",\"WARC-Target-URI\":\"https://www.deconbatch.com/2022/08/color-study-sort.html\",\"WARC-Payload-Digest\":\"sha1:LABJULG2FWT53GZ626CHQYI76NKXEY6M\",\"WARC-Block-Digest\":\"sha1:IZCQMAJ4BXAKVDH2ABWXTFIPHMBXWR3P\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2023/CC-MAIN-2023-50/CC-MAIN-2023-50_segments_1700679100551.2_warc_CC-MAIN-20231205140836-20231205170836-00759.warc.gz\"}"}