fixed merge, kinda

This commit is contained in:
Michael Yang 2014-05-17 11:16:41 -04:00
commit b191dde5e9
4 changed files with 67 additions and 9 deletions

View file

@ -1,11 +1,25 @@
//you can change these to sexier stuff
var colors = [
"black",
"orange",
"red",
"blue",
];
var Clock = function(sides) {
this.position = 0;
this.sides = sides;
this.blocks = [];
for(var i=0; i<sides; i++) {
this.blocks.push([]);
}
}
var Block = function(color) {
this.color = color;
};
this.addBlock = function(block) {
this.blocks[this.position].push(block);
}
this.rotate = function(steps) {
this.position += steps;
this.position = Math.abs(((this.position%sides)+this.position) % sides);
}
}

View file

@ -2,8 +2,15 @@
<html>
<head>
<title>Wasted Time</title>
</head>
<body>
<canvas id="canvas"></canvas>
<center>
<canvas id="canvas"></canvas>
</center>
<script src="entities.js"></script>
<script src="main.js"></script>
<script src="math.js"></script>
</body>
</html>

35
main.js
View file

@ -1,4 +1,6 @@
// main thing here
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
@ -9,11 +11,18 @@ window.requestAnimFrame = (function(){
};
})();
var blocks = [];
for (var i = 0; i < 6; i++) {
blocks.push(new Block(i, 'green'));
}
(function animloop(){
requestAnimFrame(animloop);
render();
})();
function render() {
requestAnimFrame(animloop);
drawClock(10, 10, 0, 6);
@ -24,13 +33,31 @@ 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));
var coords = rotatePoint(x, y, 60);
ctx.lineTo(coords.x, coords.y);
ctx.moveTo(coords.x, coords.y);
}
ctx.stroke();
}
function degToRadians(degrees) {
return ((Math.PI) / 180) * degrees;
}f
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 = color;
ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 70, 30);
ctx.restore();
};
if (!time) {
this.time = time;
}
else {
time = 200;
}
}

10
math.js Normal file
View file

@ -0,0 +1,10 @@
function rotatePoint(x, y, theta) {
var thetaRad = theta * (Math.PI / 180);
var rotX = Math.cos(thetaRad) * x - Math.sin(thetaRad) * y;
var rotY = Math.sin(thetaRad) * x + Math.cos(thetaRad) * y;
return {
x: rotX,
y: rotY,
};
}