From 98d8ae96228bb27c848584f4d5d0a13babd0561a Mon Sep 17 00:00:00 2001 From: Michael Yang Date: Sat, 17 May 2014 11:11:54 -0400 Subject: [PATCH 1/3] added polygon clock drawing code --- main.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index e0d286e..47dc3bb 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,7 @@ // main thing here window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ @@ -15,7 +15,22 @@ window.requestAnimFrame = (function(){ })(); function render() { - // game code - requestAnimFrame(animloop); -} \ No newline at end of file + drawClock(10, 10, 0, 6); + +} + +function drawClock(x, y, sides, sideLength, theta) { + ctx.beginPath(); + ctx.moveTo(0, sideLength); + for (var i = 0; i < sides; i++) { + var coords = rotatePoint(x, y, degToRadians(60)); + ctx.lineTo(coords.x, coords.y); + ctx.moveTo(coords.x, coords.y); + } + ctx.stroke(); +} + +function degToRadians(degrees) { + return ((Math.PI) / 180) * degrees; +}f \ No newline at end of file From 52225849fd9fef7eb81d6e22154eaa0071f59765 Mon Sep 17 00:00:00 2001 From: Michael Yang Date: Sat, 17 May 2014 11:25:33 -0400 Subject: [PATCH 2/3] fixed the width and height stuff --- index.html | 2 +- main.js | 48 ++++++++++++++++++++++++------------------------ 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index c2f0f92..da22467 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@
- +
diff --git a/main.js b/main.js index 1ba6f46..40a243d 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,3 @@ -// main thing here var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -11,11 +10,11 @@ window.requestAnimFrame = (function(){ }; })(); -var blocks = []; +// var blocks = []; -for (var i = 0; i < 6; i++) { - blocks.push(new Block(i, 'green')); -} +// for (var i = 0; i < 6; i++) { +// blocks.push(new Block(i, 'green')); +// } Render(); @@ -28,6 +27,7 @@ function drawClock(x, y, sides, sideLength, theta) { ctx.moveTo(coords.x, coords.y); } ctx.stroke(); +} function Render() { ctx.clearRect(0, 0, canvas.width, canvas.height); @@ -38,25 +38,25 @@ function Render() { } -function Block(lane, color, time) { - this.lane = lane; - this.angle = 15 * (Math.PI / 180) + 30 * (Math.PI / 180) * lane; - this.color = color; +// function Block(lane, color, time) { +// this.lane = lane; +// this.angle = 15 * (Math.PI / 180) + 30 * (Math.PI / 180) * lane; +// this.color = color; - this.draw = function() { - ctx.translate(canvas.width / 2, canvas.height / 2); - ctx.rotate(this.angle); - ctx.fillStyle = '#000'; - ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 30, 30); - ctx.restore(); - ctx.fillRect(200, 200, 200, 200); - }; +// this.draw = function() { +// ctx.translate(canvas.width / 2, canvas.height / 2); +// ctx.rotate(this.angle); +// ctx.fillStyle = '#000'; +// ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 30, 30); +// ctx.restore(); +// ctx.fillRect(200, 200, 200, 200); +// }; - if (!time) { - this.time = time; - } - else { - time = 200; - } -} +// if (!time) { +// this.time = time; +// } +// else { +// time = 200; +// } +// } From cf79fbefde53e6994623e30795f806aa8efdb4d9 Mon Sep 17 00:00:00 2001 From: Michael Yang Date: Sat, 17 May 2014 11:55:58 -0400 Subject: [PATCH 3/3] fixed polygon function --- index.html | 2 +- main.js | 27 +++++++++++++++++---------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 9aced12..6321578 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@
+ - \ No newline at end of file diff --git a/main.js b/main.js index 40a243d..aefba8e 100644 --- a/main.js +++ b/main.js @@ -5,7 +5,7 @@ window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || - function( callback ){ + function( callback ) { window.setTimeout(callback, 1000 / 60); }; })(); @@ -18,24 +18,31 @@ window.requestAnimFrame = (function(){ Render(); -function drawClock(x, y, sides, sideLength, theta) { +function drawPolygon(x, y, sides, radius, theta) { ctx.beginPath(); - ctx.moveTo(0, sideLength); + ctx.moveTo(x, y + radius); + var oldX = 0; + var oldY = radius; for (var i = 0; i < sides; i++) { - var coords = rotatePoint(x, y, 60); - ctx.lineTo(coords.x, coords.y); - ctx.moveTo(coords.x, coords.y); + var coords = rotatePoint(oldX, oldY, 360 / sides); + ctx.lineTo(coords.x + x, coords.y + y); + ctx.moveTo(coords.x + x, coords.y + y); + oldX = coords.x; + oldY = coords.y; + // console.log(coords); } + ctx.closePath(); + ctx.fill(); ctx.stroke(); } function Render() { ctx.clearRect(0, 0, canvas.width, canvas.height); - blocks.forEach(function(o){ - o.draw(); - }); + // blocks.forEach(function(o){ + // o.draw(); + // }); + drawPolygon(100, 100, 6, 100, 0); requestAnimFrame(Render); - } // function Block(lane, color, time) {