make project 1

jungsooknam · Mar 10, 2016 · 9de8dda · 9de8dda
1 parent 2f3e928
commit 9de8dda
Show file tree

Hide file tree

Showing 379 changed files with 44,926 additions and 0 deletions.
diff --git a/.idea/.name b/.idea/.name
diff --git a/.idea/canvas_physics-master.iml b/.idea/canvas_physics-master.iml
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/Template.html b/Template.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Example</title>
+
+    <style>
+        body {
+            background: #dddddd;
+        }
+
+        #canvas {
+            background: #ffffff;
+            border: thin inset #aaaaaa;
+        }
+    </style>
+</head>
+
+<body>
+<canvas id='canvas' width="800" height="600">
+    Canvas not supported
+</canvas>
+<script>
+
+</script>
+</body>
+</html>
diff --git a/c01.html b/c01.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Example</title>
+
+    <style>
+        body {
+            background: #dddddd;
+        }
+
+        #canvas {
+            background: #ffffff;
+            border: thin inset #aaaaaa;
+        }
+    </style>
+</head>
+
+<body>
+<canvas id='canvas' width="800" height="600">
+    Canvas not supported
+</canvas>
+<script>
+    var canvas = document.getElementById("canvas");
+    var context = canvas.getContext("2d");
+
+    function Ball() {
+        this.x = 0;
+        this.y = 0;
+
+        this.radius = 10;
+        this.color = "red";
+        this.angle = 0;
+    }
+
+    Ball.prototype = {
+        draw : function() {
+            context.save();
+
+            context.beginPath();
+
+            context.translate(this.x, this.y);
+            context.rotate(this.angle);
+            context.arc(0, 0, this.radius, 0, Math.PI * 2);
+            context.fillRect(0, 0, 30, 5);
+            context.fillStyle = this.color;
+            context.fill();
+
+            context.restore();
+        }
+    }
+
+    var ball = new Ball();
+
+    var ax = 0;
+    var ay = 0;
+    var vx = 0;
+    var vy = 0;
+    var friction = 0.98;
+
+    ball.x = 100;
+    ball.y = 100;
+    //ball.angle = 45 * Math.PI / 180;
+
+    canvas.onmousedown = function(e) {
+        ax = 0.5;
+    };
+
+    canvas.onmouseup = function(e) {
+        ax = 0;
+    };
+
+
+    requestAnimationFrame(loop);
+
+    function loop() {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        vx += ax;
+        vy += ay;
+
+        vx *= friction;
+        vy *= friction;
+
+        ball.x += vx;
+        ball.y += vy;
+
+        if(ball.x > canvas.width) {
+            ball.x = 0;
+        }
+
+        render();
+        requestAnimationFrame(loop);
+    }
+
+    function render() {
+        ball.draw();
+    }
+
+</script>
+</body>
+</html>
diff --git a/c02.html b/c02.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Example</title>
+
+    <style>
+        body {
+            background: #dddddd;
+        }
+
+        #canvas {
+            background: #ffffff;
+            border: thin inset #aaaaaa;
+        }
+    </style>
+</head>
+
+<body>
+<canvas id='canvas' width="800" height="600">
+    Canvas not supported
+</canvas>
+<script>
+    var canvas = document.getElementById("canvas");
+    var context = canvas.getContext("2d");
+
+    function windowToCanvas(x, y) {
+        var bbox = canvas.getBoundingClientRect();
+
+        return { x : x - bbox.left, y : y - bbox.top }
+    }
+
+    function Ball() {
+        this.x = 0;
+        this.y = 0;
+
+        this.radius = 10;
+        this.color = "red";
+        this.angle = 0;
+    }
+
+    Ball.prototype = {
+        draw : function() {
+            context.save();
+
+            context.beginPath();
+
+            context.translate(this.x, this.y);
+            context.rotate(this.angle);
+            context.arc(0, 0, this.radius, 0, Math.PI * 2);
+            //context.fillRect(0, 0, 30, 5);
+            context.fillStyle = this.color;
+            context.fill();
+
+            context.restore();
+        }
+    }
+
+    var ball = new Ball();
+
+    var vx = 0;
+    var vy = 0;
+
+    var targetX = 0;
+    var targetY = 0;
+
+    ball.x = 100;
+    ball.y = 100;
+    //ball.angle = 45 * Math.PI / 180;
+
+    canvas.onmousedown = function(e) {
+        var loc = windowToCanvas(e.clientX, e.clientY);
+
+        targetX = loc.x;
+        targetY = loc.y;
+    }
+
+
+    requestAnimationFrame(loop);
+
+    function loop() {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        var dx = targetX - ball.x;
+        var dy = targetY - ball.y;
+
+        vx = dx * 0.2;
+        vy = dy * 0.2;
+
+        ball.x += vx;
+        ball.y += vy;
+
+        if(ball.x > canvas.width) {
+            ball.x = 0;
+        }
+
+        render();
+        requestAnimationFrame(loop);
+    }
+
+    function render() {
+        ball.draw();
+    }
+
+</script>
+</body>
+</html>