hashkeys/math.html at main · DeFUCC/hashkeys · 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
<!doctype html>
<meta charset="utf-8">
<title>1D → 2D mappings</title>
<style>
    body {
        margin: 0;
        background: #111;
        color: #ccc;
        font: 10px monospace
    }

    canvas {
        display: block
    }
</style>

<canvas id=c></canvas>

<script type="module">
    const dpr = devicePixelRatio || 1, c = document.getElementById('c'), ctx = c.getContext('2d')
    const W = innerWidth, H = innerHeight; c.width = W * dpr; c.height = H * dpr; c.style.width = W + 'px'; c.style.height = H + 'px'
    ctx.scale(dpr, dpr)

    // ---- functions (normalized 0..1 → 0..1 unless noted) ----
    const fns = {
        norm32: v => v / 31,
        easeIn2: x => x * x,
        easeOut2: x => 1 - (1 - x) ** 2,
        easeInOut2: x => x < .5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2,
        smooth: x => x * x * (3 - 2 * x),
        power: x => x ** 2,
        cluster: x => Math.sin(Math.PI * x),
        fold: x => Math.abs(x - .5) * 2,
        tent: x => x < .5 ? 2 * x : 2 * (1 - x),
        sinIter: x => { for (let i = 0; i < 4; i++)x = Math.sin(Math.PI * x); return x },
        logistic: x => { for (let i = 0; i < 8; i++)x = 3.9 * x * (1 - x); return x },
        phi: x => (x * .61803398875) % 1,
        ergodic: x => (x + Math.SQRT2) % 1,
        vdc: v => { let x = 0, f = .5; while (v) { x += f * (v & 1); v >>= 1; f *= .5 } return x },
        exp01: x => Math.exp(3 * (x - 1)),
        spiral: x => x * x,
        offset: x => (x - .5) * .5 + .5,
        wrap: x => (x + .5) % 1,
        flatten: x => Math.sqrt(x),
        density: x => (x ** 3),
    }

    // ---- plot ----
    const names = Object.keys(fns)
    const cols = 5, rows = Math.ceil(names.length / cols)
    const cw = W / cols, ch = H / rows

    ctx.strokeStyle = '#0f8'; ctx.lineWidth = 1
    names.forEach((k, i) => {
        const gx = i % cols, gy = i / cols | 0
        const ox = gx * cw, oy = gy * ch
        ctx.fillStyle = '#111'; ctx.fillRect(ox, oy, cw, ch)
        ctx.strokeStyle = '#333'; ctx.strokeRect(ox + .5, oy + .5, cw - 1, ch - 1)
        ctx.fillStyle = '#aaa'; ctx.fillText(k, ox + 4, oy + 10)

        ctx.beginPath()
        for (let j = 0; j <= 64; j++) {
            const x = j / 64
            const y = fns[k](k === 'vdc' ? j : x)
            const px = ox + x * cw
            const py = oy + ch - (y * ch)
            j ? ctx.lineTo(px, py) : ctx.moveTo(px, py)
        }
        ctx.strokeStyle = '#0fa'; ctx.stroke()
    })
</script>