From abe06e92fcb57bcdfd9626b26d7a257d9c2cb88d Mon Sep 17 00:00:00 2001
From: michael <michelo851a1203@gmail.com>
Date: Fri, 22 May 2020 07:15:12 +0800
Subject: [PATCH] init

---
 index.html | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 229 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..13ec565
--- /dev/null
+++ b/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script>
+    <style>
+        html,
+        body,
+        #app {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <canvas id="canvas"></canvas>
+    </div>
+    <script>
+        let ball = null
+        const canvas = document.getElementById('canvas')
+        const ww = canvas.width = window.innerWidth
+        const hh = canvas.height = window.innerHeight
+        const content = canvas.getContext('2d')
+
+        window.addEventListener("resize", function () {
+            const ww = canvas.width = window.innerWidth
+            const hh = canvas.height = window.innerHeight
+        })
+
+        const controlparams = {
+            vx: 0,
+            vy: 0,
+            ax: 0,
+            ay: 0.6,
+            velocityLine: false,
+            fade: 0.99,
+            color: '#fff',
+            update: true,
+            step: function () {
+                ball.update()
+            },
+            FPS: 120,
+        }
+        const gui = new dat.GUI()
+        gui.add(controlparams, "vx", -50, 50).listen().onChange(function (value) {
+            ball.v.x = value
+        })
+        gui.add(controlparams, "vy", -50, 50).listen().onChange(function (value) {
+            ball.v.y = value
+        })
+        gui.add(controlparams, "ax", -1, 1).listen().onChange(function (value) {
+            ball.a.x = value
+        })
+        gui.add(controlparams, "ay", -1, 1).step(0.001).listen().onChange(function (value) {
+            ball.a.y = value
+        })
+        gui.add(controlparams, "velocityLine").listen()
+        gui.add(controlparams, "fade", 0, 1).step(0.001).listen()
+        gui.add(controlparams, "update")
+        gui.addColor(controlparams, "color")
+        gui.add(controlparams, "step")
+        gui.add(controlparams, "FPS", 1, 120)
+
+        const Ball = function () {
+            this.p = {
+                x: ww / 2, y: hh / 2
+            }
+            this.v = {
+                x: 10, y: 0
+            }
+            this.a = {
+                x: 0, y: 1
+            }
+            this.r = 50
+            this.dragging = false
+        }
+        Ball.prototype.draw = function () {
+            content.save()
+            content.translate(this.p.x, this.p.y)
+            content.beginPath()
+            content.fillStyle = controlparams.color
+            content.arc(0, 0, this.r, 0, Math.PI * 2)
+            content.fill()
+            content.restore()
+            if (controlparams.velocityLine) {
+                content.save()
+                content.translate(this.p.x, this.p.y)
+                content.scale(3, 3)
+                content.beginPath()
+                content.strokeStyle = "red"
+                content.moveTo(0, 0)
+                content.lineTo(this.v.x, this.v.y)
+                content.stroke()
+                content.restore()
+
+                content.save()
+                content.translate(this.p.x, this.p.y)
+                content.scale(3, 3)
+                content.beginPath()
+                content.strokeStyle = "blue"
+                content.moveTo(0, 0)
+                content.lineTo(this.v.x, 0)
+                content.stroke()
+                content.restore()
+
+                content.save()
+                content.translate(this.p.x, this.p.y)
+                content.scale(3, 3)
+                content.beginPath()
+                content.strokeStyle = "green"
+                content.moveTo(0, 0)
+                content.lineTo(0, this.v.y)
+                content.stroke()
+                content.restore()
+            }
+        }
+        Ball.prototype.update = function () {
+            if (ball.dragging === false) {
+                this.p.x += this.v.x
+                this.p.y += this.v.y
+                this.v.x += this.a.x
+                this.v.y += this.a.y
+
+                this.v.x = controlparams.fade * this.v.x
+                this.v.y = controlparams.fade * this.v.y
+                // here update new controls params
+                controlparams.vx = this.v.x
+                controlparams.vy = this.v.y
+                controlparams.ax = this.a.x
+                controlparams.ay = this.a.y
+            }
+        }
+        Ball.prototype.checkboundary = function () {
+            if ((this.p.x + this.r) >= ww) {
+                this.v.x = -Math.abs(this.v.x)
+            }
+            if ((this.p.y + this.r) >= hh) {
+                this.v.y = -Math.abs(this.v.y)
+            }
+            if ((this.p.x - this.r) <= 0) {
+                this.v.x = Math.abs(this.v.x)
+            }
+            if ((this.p.y - this.r) <= 0) {
+                this.v.y = Math.abs(this.v.y)
+            }
+        }
+        function draw() {
+            content.fillStyle = "rgba(0,0,0,0.5)"
+            content.fillRect(0, 0, ww, hh)
+            ball.draw()
+            setTimeout(draw, 1000 / controlparams.FPS);
+        }
+        requestAnimationFrame(draw)
+        function update() {
+            if (controlparams.update) {
+                ball.update()
+            }
+            ball.checkboundary()
+        }
+
+        setInterval(update, 1000 / 60)
+        function init() {
+            ball = new Ball()
+        }
+        init()
+        // okay next then we try to use mouse dragging 
+        // herre build distance 
+        function getdistance(p1, p2) {
+            const dx = p1.x - p2.x
+            const dy = p1.y - p2.y
+            const dPow = Math.pow(dx, 2) + Math.pow(dy, 2)
+            return Math.sqrt(dPow)
+        }
+
+        let mouse = {
+            x: 0,
+            y: 0
+        }
+        // herer to add mouse event
+        canvas.addEventListener('mousedown', function (e) {
+            mouse = {
+                x: e.x,
+                y: e.y
+            }
+            const dist = getdistance(mouse, ball.p)
+            if (dist < ball.r) {
+                ball.dragging = true
+            }
+        })
+
+        canvas.addEventListener('mousemove', function (e) {
+            // okay here to add position to ball
+            const currentPos = {
+                x: e.x, y: e.y
+            }
+            if (ball.dragging) {
+                const dx = currentPos.x - mouse.x
+                const dy = currentPos.y - mouse.y
+                ball.p.x += dx
+                ball.p.y += dy
+                ball.v.x = dx
+                ball.v.y = dy
+            }
+            const dist = getdistance(currentPos, ball.p)
+
+            if (dist < ball.r) {
+                canvas.style.cursor = "move"
+            } else {
+                ball.dragging = false
+                canvas.style.cursor = "initial"
+            }
+        })
+
+        canvas.addEventListener('mouseup', function () {
+            ball.dragging = false
+        })
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
