/
lara-shapes2d.js
65 lines (56 loc) · 1.56 KB
/
lara-shapes2d.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
const canvasSketch = require("canvas-sketch");
const settings = {
dimensions: [2048, 2048],
};
const background = "rgb(131,213,187)";
const GRID_NOISE = 400;
const GRID_SPACING = 350;
const colors = [
"rgb(130 68 127)", // purple
"rgb(175 121 83)", // gold
"rgb(242 162 159)", // pink
"rgb(228 197 155 )", // yellow
];
const randomColor = () => {
return colors[Math.floor(colors.length * Math.random())];
};
const sketch = ({}) => {
return ({ context, width, height }) => {
const drawShape = (x, y, w, h, rotation) => {
const slope = h / 2;
context.save();
context.beginPath();
context.translate(x, y);
context.rotate(rotation);
context.moveTo(0, 0);
context.lineTo(w, 0);
context.lineTo(w + slope, h);
context.lineTo(slope, h);
context.fill();
context.restore();
};
context.fillStyle = background;
context.fillRect(0, 0, width, height);
for (x = -GRID_SPACING; x < width + GRID_SPACING; x += GRID_SPACING) {
for (
var y = -GRID_SPACING;
y < height + GRID_SPACING;
y += GRID_SPACING
) {
const h = Math.random() * 450 + 100;
const w = Math.random() * 450 + 100;
context.fillStyle = randomColor();
const randX = GRID_NOISE * Math.random() - GRID_NOISE / 2;
const randY = GRID_NOISE * Math.random() - GRID_NOISE / 2;
drawShape(
x + randX,
y + randY,
w,
h,
Math.random() > 0.5 ? 0 : Math.PI / 3
);
}
}
};
};
canvasSketch(sketch, settings);