Javascript-Canvas-Projects/canvas9(WaveMotion).html at main · KalamPinjar/Javascript-Canvas-Projects · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            /* background: #000; */
            height: 100vh;
        }

        canvas {
            display: flex;
        }
    </style>
    <script type="text/javascript"
        src="D:\Kalam\Programming Languages\html\dat.gui-master\dat.gui-master\build\dat.gui.min.js"></script>
</head>

<body>

    <canvas id="canvas1"></canvas>


    <script>

        const gui = new dat.GUI()


        let canvas = document.querySelector("canvas")
        let ctx = canvas.getContext("2d")


        window.addEventListener("resize", function () {
            canvas.width = innerWidth
            canvas.height = innerHeight
        })

        canvas.width = innerWidth
        canvas.height = innerHeight

        const wave = {
            y: canvas.height / 2,
            length: 0.01,
            amplitude: 100,
            frequency: 0.01
        }
        const strokeColor = {
            h: 255,
            s: 50,
            l: 50
        }

        const bgColor = {
            r: 0,
            g: 0,
            b: 0,
            a: 0.1
        }
        const waveFolder = gui.addFolder('wave')
        waveFolder.add(wave, 'y', 0, canvas.height)
        waveFolder.add(wave, 'length', -0.01, 0.01)
        waveFolder.add(wave, 'amplitude', -300, 300)
        waveFolder.add(wave, 'frequency', -0.01, 9)
        waveFolder.open()

        const strokeFolder = gui.addFolder('stoke')
        strokeFolder.add(strokeColor, 'h', 0, 255)
        strokeFolder.add(strokeColor, 's', 0, 100)
        strokeFolder.add(strokeColor, 'l', 0, 100)
        strokeFolder.open()

        const bgColorFolder = gui.addFolder('Background')
        bgColorFolder.add(bgColor, 'r', 0, 255)
        bgColorFolder.add(bgColor, 'g', 0, 255)
        bgColorFolder.add(bgColor, 'b', 0, 255)
        bgColorFolder.add(bgColor, 'a', 0, 1)
        bgColorFolder.open()

        let increment = wave.frequency
        // let hue = 0;

        function animate() {
            // ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.fillStyle = `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`
            ctx.fillRect(0, 0, canvas.width, canvas.height)

            // handleParticle()
            requestAnimationFrame(animate)

            ctx.beginPath()
            ctx.moveTo(0, wave.y)

            for (let i = 0; i < canvas.width; i++) {

                ctx.lineTo(i, wave.y +
                    Math.sin(i * wave.length + increment)
                    * wave.amplitude * (Math.sin(increment) / Math.cos(increment)) / i * 100)
            }

            ctx.strokeStyle =
                `hsl(${Math.abs(strokeColor.h * Math.sin(increment))} ,${strokeColor.s}%, ${strokeColor.l}%)`
            // ctx.strokeStyle = `hsl(${hue},50%,50%)`
            ctx.stroke()
            increment += wave.frequency
            // hue++
        }
        animate();
    </script>
</body>

</html>