pal-pool/nova-pool.html at main · gurk/pal-pool · GitHub

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
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vasarely Machine - Canvas</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html, body {
            margin: 0;
            overflow: hidden;
            height: 100vh;
        }
    </style>
</head>
<body>
    <canvas id="vasarely"></canvas>
</body>
<script>
let canvas = document.getElementById('vasarely');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

const fold = (inval, lo, hi) => {
    const b = hi - lo;
    const b2 = b + b;
    let c = (inval - lo) % b2;
    if (c > b)
        c = b2 - c;
    return c + lo;
}

const ease = t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t;

// number of columns
const nx = 38/2;
// number of rows
const ny = 31/2;
// number of repeats
const r = 2;

if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    init(ctx);
    // draw(ctx, 0);
}

function init(ctx) {
    // add event handler for window resize events
    // needs to update canvas size and redraw
    window.addEventListener('resize', (event) => {
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
        // draw(ctx, 0);
    });
    let start, tick = null;

    const animLoop = time => {
        if (!start) start = time;
        tick += 1;
        draw(ctx, tick);
        window.requestAnimationFrame(animLoop);
    }

    window.requestAnimationFrame(animLoop);
}

function draw(ctx, tick) {
    // TODO: calculate ideal spacing size for window, arbitrary for now
    const spacing = 4;
    // calculate ideal square size based on window size, number of rows, and spacing
    const size = (ctx.canvas.height - 2 * spacing - ny * spacing) / (ny / 2);
    // calculate offset values for centering
    const xOffset = (ctx.canvas.width / 2) - spacing / 2 - nx * (size + spacing) / 2 + spacing;
    const yOffset = (ctx.canvas.height / 2) - spacing / 2 - ny * (size + spacing) / 2 + spacing;

    tick *= 0.33;

    ctx.fillStyle = 'hsl(60, 30%, 89%)';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = 'hsl(60, 2%, 21%)';
    for (let y = 0; y < ny; y++) {
        // ctx.fillStyle = `hsl(${y*ny+tick%360}, 60%, 50%)`;
        for (let x = 0; x < nx; x++) {
			let inval = Math.min(nx+1, 20+Math.sin((x+y+ease(fold(tick/1000, 0, 1.0))*1000)/16)*nx);
            let s = Math.max(4, size - fold(4+inval, 0, nx) * 8);
            let cx = (size - s) / 2;
            let xPos = cx + xOffset + (size * x) + (x * spacing);
            let yPos = cx + yOffset + (size * y) + (y * spacing);
			let xOff = (Math.sin(x*tick/nx/4)*25);
			let yOff = (Math.sin(y*tick/ny/4)*25);
            ctx.translate(xPos+s/2, yPos+s/2);
            // ctx.rotate((tick+x*y)*Math.PI/180);
            ctx.rotate(tick/1000+ease(fold(x, 0, nx/r)/nx)*nx * ease(fold(y, 0, ny/r)/ny)*ny*r*ease(fold(tick, -nx, nx)/nx)*4/10*Math.PI/180);
            ctx.fillStyle = 'hsl(60, 2%, 100%)';
            ctx.fillRect(-s/4+(xOff/2), -s/4+(yOff/2), s, s);
            ctx.fillStyle = 'hsl(60, 2%, 21%)';
            ctx.fillRect(-s/2+xOff, -s/2+yOff, s, s);
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            // if (y===0) ctx.fillText(Math.ceil(s), xPos, yPos - cx);
        }
    }
}
</script>
</html>