Permalink
Browse files

Moved Canvas test to a sperate folder. Also debugged the drift-move.js

  • Loading branch information...
1 parent 9937e4c commit 149ec59e1fba55b649d813b24a44da90fde3ccd1 @timsuchanek timsuchanek committed May 24, 2013
View
11 test/drift-canvas.html
@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Drift Canvas</title>
-</head>
-<body>
-
- <script src="./modules/drift-move.js"></script>
-</body>
-</html>
View
6 test/drift-canvas/css/style.css
@@ -0,0 +1,6 @@
+body div {
+ margin-left: auto;
+ margin-right: auto;
+ width: 500px;
+ height: 500px;
+}
View
16 test/drift-canvas/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Drift Canvas</title>
+ <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+ <div>
+ <canvas class='drift-canvas' width="500" height="500"></canvas>
+ </div>
+
+ <script src="../modules/drift-move.js"></script>
+ <script src="./js/app.js"></script>
+</body>
+</html>
View
50 test/drift-canvas/js/app.js
@@ -0,0 +1,50 @@
+window.onload = function (e) {
+
+ var canvas = document.querySelector('.drift-canvas');
+ var ctx = canvas.getContext('2d');
+ var shape = {
+ type:'circle',
+ x: 0,
+ y: 0,
+ xdir: 1,
+ ydir: 1,
+ radius: 25,
+ fill:'green',
+ stroke:'black'
+ };
+
+ function drawCircle (x, y, color) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.beginPath();
+ ctx.fillStyle = color || shape.fill;
+ ctx.strokeStyle = shape.stroke;
+ ctx.arc(x + shape.radius + 2, y + shape.radius + 2, shape.radius, Math.PI * 2, false);
+ ctx.stroke();
+ ctx.fill();
+ }
+
+
+ var options = {
+ startCoordinates: { //optional
+ x: shape.x,
+ y: shape.y
+ },
+ degree: 180, // 90 means move right
+ distance: 300, // speed in pixels per second
+ duration: .5, // duration of drift in seconds
+ start: function (x,y) {
+ drawCircle(x, y);
+ }, // Callback for start, arguments x,y
+ way: function (x,y) {
+ drawCircle(x,y, 'red');
+ }, // Callback for the way, arguments x,y
+ finished: function (x,y) {
+ drawCircle(x,y,'black');
+ }, // Callback when finished, arguments x,y
+ waitFinished: 0// time to wait between last way() and finished call
+ };
+
+ //start drifting
+ drift(options);
+
+}
View
0 test/js/drift-canvas.js
No changes.
View
35 test/modules/drift-move.js
@@ -12,17 +12,21 @@
// waitFinished: Number// time to wait between last way() and finished call
// }
-module.exports = drift;
+
function drift (options) {
- var MOVE_INTERVAL = 20; //ms
+ var MOVE_INTERVAL = 16.6666666; //ms
+ var speed = options.distance / options.duration;
+ options.degree = ((Math.PI * 2) / 360) * options.degree;
var stepX = Math.sin(options.degree);
- var stepY = Math.cos(options.degree);
- var moveCoeficent = (1000 / MOVE_INTERVAL) * options.speed;
+ var stepY = -Math.cos(options.degree);
+ console.log(stepX, stepY);
+ var moveCoeficent = (MOVE_INTERVAL / 1000) * speed;
var interval;
var x, y;
- var counter;
- var limit = Math.floor(duration / MOVE_INTERVAL);
+ var counter = 0;
+ options.duration = options.duration * 1000;
+ var limit = Math.floor(options.duration / MOVE_INTERVAL);
var that = this;
// if no start point was given, start at 0
@@ -44,6 +48,7 @@ function drift (options) {
stepX = stepX * moveCoeficent;
stepY = stepY * moveCoeficent;
+ console.log(stepX, stepY);
//start
if (options.hasOwnProperty('start')
@@ -52,23 +57,29 @@ function drift (options) {
options.start(x, y);
}
- interval = setInterval (function () {
+ interval = setInterval(function () {
+ //console.log(stepX, stepY);
if (counter <= limit) {
x += stepX;
y += stepY;
//call the way callback
- options.way.call(that, x,y);
+ options.way(x, y);
counter += 1;
} else {
clearInterval(interval);
if (options.hasOwnProperty('waitFinished')) {
setTimeout(function () {
- finished.call(that, x, y);
- }, waitFinished);
+ options.finished.call(that, x, y);
+ }, options.waitFinished);
} else {
- finished.call(that, x, y);
+ options.finished.call(that, x, y);
}
}
}, MOVE_INTERVAL);
-}
+}
+
+//the frontend doesnt know any module ..
+if (typeof module !== 'undefined') {
+ module.exports = drift;
+}

0 comments on commit 149ec59

Please sign in to comment.