Skip to content

Commit d669c69

Browse files
lorossilorossi
committed
Added animation
1 parent 68dd630 commit d669c69

7 files changed

Lines changed: 274 additions & 0 deletions

File tree

‎animations/smooth-grid/css/style.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
overflow: hidden;
5+
}
6+
7+
body {
8+
background-color: rgb(240, 240, 240);
9+
}
10+
11+
.container {
12+
width: 100vw;
13+
height: 100vh;
14+
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
#sketch {
21+
height: 90vh;
22+
width: 90vh;
23+
aspect-ratio: 1;
24+
25+
touch-action: none;
26+
}
27+
28+
@media only screen and (max-width: 600px) {
29+
#sketch {
30+
height: 90vw;
31+
width: 90vw;
32+
}
33+
}

‎animations/smooth-grid/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta name="description" content="SMOOTH-GRID" />
5+
<meta charset="utf-8" />
6+
<title>SMOOTH-GRID</title>
7+
<meta
8+
name="viewport"
9+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
10+
/>
11+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
12+
<meta name="author" content="Lorenzo Rossi" />
13+
<link
14+
rel="icon"
15+
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧈</text></svg>"
16+
/>
17+
18+
<link rel="stylesheet" href="css/style.css" />
19+
<script type="module" src="js/main.js"></script>
20+
</head>
21+
22+
<body>
23+
<div class="container">
24+
<canvas id="sketch" width="1000" height="1000"></canvas>
25+
</div>
26+
</body>
27+
</html>

‎animations/smooth-grid/js/grid.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { SimplexNoise, XOR128, Utils } from "./lib.js";
2+
3+
class Grid {
4+
constructor(size, cols, rows, seed, palette) {
5+
this._size = size;
6+
this._cols = cols;
7+
this._rows = rows;
8+
this._seed = seed;
9+
this._palette = palette;
10+
11+
this._xor128 = new XOR128(seed);
12+
this._noise = new SimplexNoise(this._xor128.random_int(2e32));
13+
14+
this._noise_scl = 0.0025;
15+
this._grid_scl = 0.5;
16+
17+
this._column_widths = new Array(cols).fill(0);
18+
this._row_heights = new Array(rows).fill(0);
19+
}
20+
21+
_generate_size_array(length, total_size, tx, ty, seed) {
22+
let widths = new Array(length).fill(0).map((_, i) => {
23+
const n = this._noise.noise(i * this._grid_scl, tx, ty, seed);
24+
return Utils.remap(n, -1, 1, 0.1, 1);
25+
});
26+
27+
const sum = widths.reduce((a, b) => a + b, 0);
28+
return widths.map((w) => (w / sum) * total_size);
29+
}
30+
31+
update(tx, ty) {
32+
this._column_widths = this._generate_size_array(
33+
this._cols,
34+
this._size,
35+
tx,
36+
ty,
37+
2000,
38+
);
39+
this._row_heights = this._generate_size_array(
40+
this._rows,
41+
this._size,
42+
tx,
43+
ty,
44+
3000,
45+
);
46+
}
47+
48+
show(ctx) {
49+
ctx.save();
50+
51+
let x = 0;
52+
for (let i = 0; i < this._cols; i++) {
53+
let y = 0;
54+
for (let j = 0; j < this._rows; j++) {
55+
const n = this._noise.noise(
56+
x * this._noise_scl,
57+
y * this._noise_scl,
58+
1000,
59+
);
60+
const k = Utils.remap(n, -1, 1, 0, 1);
61+
const c = this._palette.getSmoothColor(k, Utils.ease_in_out_exp);
62+
63+
ctx.fillStyle = c.rgba;
64+
ctx.strokeStyle = c.rgba;
65+
66+
ctx.beginPath();
67+
ctx.rect(x, y, this._column_widths[i], this._row_heights[j]);
68+
ctx.fill();
69+
ctx.stroke();
70+
71+
y += this._row_heights[j];
72+
}
73+
x += this._column_widths[i];
74+
}
75+
76+
ctx.restore();
77+
}
78+
}
79+
80+
export { Grid };

‎animations/smooth-grid/js/lib.js‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animations/smooth-grid/js/main.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @file Project entry point.
3+
* @author Lorenzo Rossi
4+
*/
5+
import { Sketch } from "./sketch.js";
6+
7+
document.addEventListener("DOMContentLoaded", () => {
8+
// page loaded
9+
const canvas = document.querySelector("#sketch");
10+
// create sketch
11+
const s = new Sketch(canvas);
12+
13+
// mouse event listeners
14+
canvas.addEventListener("click", (e) => s.clickHandler(e));
15+
canvas.addEventListener("mousedown", (e) => s.mouseDownHandler(e));
16+
canvas.addEventListener("mouseup", (e) => s.mouseUpHandler(e));
17+
canvas.addEventListener("mousemove", (e) => s.mouseMoveHandler(e));
18+
// touchscreen event listeners
19+
canvas.addEventListener("touchstart", (e) => s.mouseDownHandler(e), {
20+
passive: true,
21+
});
22+
canvas.addEventListener("touchend", (e) => s.mouseUpHandler(e), {
23+
passive: true,
24+
});
25+
canvas.addEventListener("touchmove", (e) => s.mouseMoveHandler(e), {
26+
passive: true,
27+
});
28+
// keyboard event listeners
29+
document.addEventListener("keypress", (e) => s.keyPressHandler(e));
30+
document.addEventListener("keydown", (e) => s.keyDownHandler(e));
31+
document.addEventListener("keyup", (e) => s.keyUpHandler(e));
32+
});

‎animations/smooth-grid/js/sketch.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Engine } from "./lib.js";
2+
3+
import {
4+
Color,
5+
GradientPalette,
6+
Palette,
7+
PaletteFactory,
8+
Point,
9+
SimplexNoise,
10+
Utils,
11+
XOR128,
12+
} from "./lib.js";
13+
14+
import { Grid } from "./grid.js";
15+
16+
class Sketch extends Engine {
17+
preload() {
18+
this._duration = 900;
19+
this._recording = false;
20+
21+
this._bg = Color.fromMonochrome(240);
22+
this._time_scl = 0.5;
23+
24+
this._hex_palettes = [
25+
["#D0EFB1", "#B3D89C", "#9DC3C2", "#77A6B6", "#4D7298"],
26+
["#1F363D", "#40798C", "#70A9A1", "#9EC1A3", "#CFE0C3"],
27+
["#355070", "#6D597A", "#B56576", "#E56B6F", "#EAAC8B"],
28+
["#03588C", "#0396A6", "#04BFAD", "#F28963", "#F25C5C"],
29+
["#025259", "#007172", "#F29325", "#D94F04", "#F4E2DE"],
30+
];
31+
}
32+
33+
setup() {
34+
this._seed = new Date().getTime();
35+
this._xor128 = new XOR128(this._seed);
36+
37+
this._cols = this._xor128.random_int(5, 15);
38+
this._rows = this._xor128.random_int(5, 15);
39+
40+
this._palette_factory = PaletteFactory.fromHEXArray(this._hex_palettes);
41+
this._palette = this._palette_factory.getRandomPalette(this._xor128, false);
42+
if (this._xor128.random_bool()) this._palette.reverse();
43+
44+
this._grid = new Grid(
45+
this.width,
46+
this._cols,
47+
this._rows,
48+
this._xor128.random_int(2e32),
49+
this._palette,
50+
);
51+
52+
this._bg = this._palette.getRandomColor(this._xor128);
53+
document.body.style.backgroundColor = this._bg.hex;
54+
55+
this._frame_offset = this.frame_count;
56+
if (this._recording) {
57+
this.startRecording();
58+
console.log("%cRecording started", "color:green");
59+
}
60+
}
61+
62+
draw(dt) {
63+
const delta_frame = this.frame_count - this._frame_offset;
64+
const t = (delta_frame / this._duration) % 1;
65+
66+
const theta = t * Math.PI * 2;
67+
const tx = (1 + Math.cos(theta)) * this._time_scl;
68+
const ty = (1 + Math.sin(theta)) * this._time_scl;
69+
70+
this.ctx.save();
71+
this.background(this._bg);
72+
this._grid.update(tx, ty);
73+
this._grid.show(this.ctx);
74+
this.ctx.restore();
75+
76+
if (t == 0 && delta_frame > 0 && this._recording) {
77+
this._recording = false;
78+
this.stopRecording();
79+
console.log("%cRecording stopped. Saving...", "color:yellow");
80+
this.saveRecording();
81+
console.log("%cRecording saved", "color:green");
82+
}
83+
}
84+
85+
click() {
86+
this.setup();
87+
}
88+
}
89+
90+
export { Sketch };

‎animations/smooth-grid/preview.png‎

46.4 KB
Loading

0 commit comments

Comments
 (0)