Test: Add canvas test

test/canvasdir/canvas.js

@@ -0,0 +1,301 @@
+/*
+Copyright (c) 2013 Suffick at Codepen (http://codepen.io/suffick) and GitHub (https://github.com/suffick)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+// settings
+
+var physics_accuracy = 3,
+    mouse_influence = 20,
+    mouse_cut = 5,
+    gravity = 1200,
+    cloth_height = 40,
+    cloth_width = 76,
+    start_y = 10,
+    spacing = 7,
+    tear_distance = 600;
+
+
+window.requestAnimFrame =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (callback) {
+        window.setTimeout(callback, 1000 / 60);
+};
+
+var canvas,
+    ctx,
+    cloth,
+    boundsx,
+    boundsy,
+    mouse = {
+        down: false,
+        button: 1,
+        x: 0,
+        y: 0,
+        px: 0,
+        py: 0
+    };
+
+var Point = function (x, y) {
+
+    this.x = x;
+    this.y = y;
+    this.px = x;
+    this.py = y;
+    this.vx = 0;
+    this.vy = 0;
+    this.pin_x = null;
+    this.pin_y = null;
+
+    this.constraints = [];
+};
+
+Point.prototype.update = function (delta) {
+
+    if (mouse.down) {
+
+        var diff_x = this.x - mouse.x,
+            diff_y = this.y - mouse.y,
+            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
+
+        if (mouse.button == 1) {
+
+            if (dist < mouse_influence) {
+                this.px = this.x - (mouse.x - mouse.px) * 1.8;
+                this.py = this.y - (mouse.y - mouse.py) * 1.8;
+            }
+
+        } else if (dist < mouse_cut) this.constraints = [];
+    }
+
+    this.add_force(0, gravity);
+
+    delta *= delta;
+    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
+    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
+
+    this.px = this.x;
+    this.py = this.y;
+
+    this.x = nx;
+    this.y = ny;
+
+    this.vy = this.vx = 0
+};
+
+Point.prototype.draw = function () {
+
+    if (this.constraints.length <= 0) return;
+
+    var i = this.constraints.length;
+    while (i--) this.constraints[i].draw();
+};
+
+Point.prototype.resolve_constraints = function () {
+
+    if (this.pin_x != null && this.pin_y != null) {
+
+        this.x = this.pin_x;
+        this.y = this.pin_y;
+        return;
+    }
+
+    var i = this.constraints.length;
+    while (i--) this.constraints[i].resolve();
+
+    if (this.x > boundsx) {
+
+        this.x = 2 * boundsx - this.x;
+        
+    } else if (this.x < 1) {
+
+        this.x = 2 - this.x;
+    }
+
+    if (this.y > boundsy) {
+
+        this.y = 2 * boundsy - this.y;
+        
+    } else if (this.y < 1) {
+
+        this.y = 2 - this.y;
+    }
+};
+
+Point.prototype.attach = function (point) {
+
+    this.constraints.push(
+        new Constraint(this, point)
+    );
+};
+
+Point.prototype.remove_constraint = function (lnk) {
+
+    var i = this.constraints.length;
+    while (i--)
+        if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
+};
+
+Point.prototype.add_force = function (x, y) {
+
+    this.vx += x;
+    this.vy += y;
+};
+
+Point.prototype.pin = function (pinx, piny) {
+    this.pin_x = pinx;
+    this.pin_y = piny;
+};
+
+var Constraint = function (p1, p2) {
+
+    this.p1 = p1;
+    this.p2 = p2;
+    this.length = spacing;
+};
+
+Constraint.prototype.resolve = function () {
+
+    var diff_x = this.p1.x - this.p2.x,
+        diff_y = this.p1.y - this.p2.y,
+        dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
+        diff = (this.length - dist) / dist;
+
+    if (dist > tear_distance) this.p1.remove_constraint(this);
+
+    var px = diff_x * diff * 0.5;
+    var py = diff_y * diff * 0.5;
+
+    this.p1.x += px;
+    this.p1.y += py;
+    this.p2.x -= px;
+    this.p2.y -= py;
+};
+
+Constraint.prototype.draw = function () {
+
+    ctx.moveTo(this.p1.x, this.p1.y);
+    ctx.lineTo(this.p2.x, this.p2.y);
+};
+
+var Cloth = function () {
+
+    this.points = [];
+
+    var start_x = canvas.width / 2 - cloth_width * spacing / 2;
+
+    for (var y = 0; y <= cloth_height; y++) {
+
+        for (var x = 0; x <= cloth_width; x++) {
+
+            var p = new Point(start_x + x * spacing, start_y + y * spacing);
+
+            x != 0 && p.attach(this.points[this.points.length - 1]);
+            y == 0 && p.pin(p.x, p.y);
+            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
+
+            this.points.push(p);
+        }
+    }
+};
+
+Cloth.prototype.update = function () {
+
+    var i = physics_accuracy;
+
+    while (i--) {
+        var p = this.points.length;
+        while (p--) this.points[p].resolve_constraints();
+    }
+
+    i = this.points.length;
+    while (i--) this.points[i].update(.016);
+};
+
+Cloth.prototype.draw = function () {
+
+    ctx.beginPath();
+
+    var i = cloth.points.length;
+    while (i--) cloth.points[i].draw();
+
+    ctx.stroke();
+};
+
+function update() {
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    cloth.update();
+    cloth.draw();
+
+    requestAnimFrame(update);
+}
+
+function start() {
+
+    canvas.onmousedown = function (e) {
+        mouse.button = e.which;
+        mouse.px = mouse.x;
+        mouse.py = mouse.y;
+        var rect = canvas.getBoundingClientRect();
+        mouse.x = e.clientX - rect.left,
+        mouse.y = e.clientY - rect.top,
+        mouse.down = true;
+        e.preventDefault();
+    };
+
+    canvas.onmouseup = function (e) {
+        mouse.down = false;
+        e.preventDefault();
+    };
+
+    canvas.onmousemove = function (e) {
+        mouse.px = mouse.x;
+        mouse.py = mouse.y;
+        var rect = canvas.getBoundingClientRect();
+        mouse.x = e.clientX - rect.left,
+        mouse.y = e.clientY - rect.top,
+        e.preventDefault();
+    };
+
+    canvas.oncontextmenu = function (e) {
+        e.preventDefault();
+    };
+
+    boundsx = canvas.width - 1;
+    boundsy = canvas.height - 1;
+
+    ctx.strokeStyle = '#888';
+    cloth = new Cloth();
+    update();
+}
+
+window.onload = function () {
+
+    canvas = document.getElementById('canvas');
+    ctx = canvas.getContext('2d');
+
+    canvas.width = 560;
+    canvas.height = 350;
+
+    start();
+};

test/canvasdir/index.xhtml

@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>HTML canvas test</title>
+    <script src="canvas.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css"></link>
+</head>
+<body>
+
+<canvas id="canvas">Your browser does not support the HTML5 canvas tag.</canvas>
+
+<p style="text-align: center; font-size: 75%;">Move curtain with left mouse button, cut with right mouse button.</p>
+
+<p style="text-align: center; font-size: 50%;">Derived from the "Tearable Cloth" HTML5 canvas demo from CodePen.</p>
+
+
+</body>
+</html>
+

test/canvasdir/style.css

@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #eeeeee;
+}
+
+#canvas {
+  display: block;
+  margin: 0 auto;
+  border: 1px solid #aaaaaa;
+}
+