artandcode/template-program.html at main · halfpointstudio/artandcode · 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
<html>

<head>
    <title> Generative Art | "{title}" </title>
    <link rel='stylesheet' href='"{cssFile}"'>
    <script type='module' defer>
        import * as fns from '../programs/programs.js'

        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        ctx.imageSmoothingEnabled = false
        document.getElementById('canvas').appendChild(canvas)

        function resize() {
            const parent = document.querySelector('section#canvas')
            console.log(parent.offsetWidth, parent.offsetHeight)
            const size = Math.min(parent.offsetWidth, parent.offsetHeight) * .9
            canvas.style.width = size
            canvas.style.height = size

            canvas.width = Math.ceil(size / 1000) * 1000
            canvas.height = Math.ceil(size / 1000) * 1000

            window.requestAnimationFrame(() =>
                draw(ctx, canvas.width, canvas.height)
            )
        }

        window.addEventListener('resize', resize, true)
        resize()

        function draw(ctx, w, h) {
            ctx.save()

            fns["{0}"](ctx, w, h)

            ctx.restore()
        }
    </script>
</head>

<body>
    <header id='header'>
        <section class='left'>
            <nav>
                <div> <a href='/'> Home </a> </div>
            </nav>
        </section>
        <section class='right'>
            <nav>
                <div> <a href='../archive.html'> Archive </a> </div>
                <div> About Us </div>
            </nav>
        </section>
    </header>
    <main>
        <section id='canvas'>
        </section>
    </main>
    <footer id='footer'>
        <section id='center'>
            made by Arsh and Laksh with HalfPoint Studio
        </section>
    </footer>
</body>

</html>