-
Notifications
You must be signed in to change notification settings - Fork 0
/
colour-field.js
99 lines (87 loc) · 2.64 KB
/
colour-field.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
* Based on animated-grid by Matt DesLauriers (@mattdesl)
* https://github.com/mattdesl/canvas-sketch/blob/master/examples/animated-grid.js
*/
const canvasSketch = require('canvas-sketch');
const lerp = require('lerp');
const SimplexNoise = require('simplex-noise');
const chroma = require('chroma-js');
const { heading, calcVec, normalize } = require('./math');
const simplex = new SimplexNoise('81234n32478320');
const settings = {
animate: true,
duration: 6,
// dimensions: [1600, 1600],
dimensions: [660, 320],
scaleToView: true,
// playbackRate: 'throttle',
// fps: 24,
};
const clrs = {
red: '#da3900',
blue: '#e1e9ee',
gray: ['#262626', '#757575', '#e9e9e9'],
white: '#ffffff',
};
const colourScale = chroma
.scale([clrs.gray[1], clrs.blue, clrs.red])
.domain([-1, 1]);
canvasSketch(() => {
let z = 0;
return ({ context, frame, width, height, playhead }) => {
context.clearRect(0, 0, width, height);
context.fillStyle = clrs.gray[0];
context.fillRect(0, 0, width, height);
const gridSize = [30, 12];
const padding = height * 0.15;
const tileSize = (width - padding * 2) / gridSize[0];
const length = tileSize * 0.65;
const thickness = 2; //tileSize * 0.1;
const time = Math.sin(playhead * 2 * Math.PI);
z = z + 0.01;
for (let x = 0; x < gridSize[0]; x++) {
for (let y = 0; y < gridSize[1]; y++) {
// get a 0..1 UV coordinate
const u = gridSize[0] <= 1 ? 0.5 : x / (gridSize[0] - 1);
const v = gridSize[1] <= 1 ? 0.5 : y / (gridSize[1] - 1);
// scale to dimensions with a border padding
const t = {
x: lerp(padding, width - padding, u),
y: lerp(padding, height - padding, v),
};
// Draw
context.save();
const clr = simplex.noise3D(
x / (gridSize[0] * 2) + 10000,
y / (gridSize[1] * 2) + 10000,
time
);
context.fillStyle = colourScale(clr);
const rotation =
simplex.noise3D(x / gridSize[0], y / gridSize[1], time) * Math.PI;
const l =
length / 2 +
(normalize(
simplex.noise3D(
x / (gridSize[0] * 2) + 10000,
y / (gridSize[1] * 2) + 10000,
time
),
-1,
1,
-0.5,
1
) *
length) /
2;
// Rotate in place
context.translate(t.x, t.y);
context.rotate(rotation);
context.translate(-t.x, -t.y);
// Draw the line
context.fillRect(t.x, t.y - thickness, length, thickness);
context.restore();
}
}
};
}, settings);