fixed merge, kinda
This commit is contained in:
commit
58b4c3998a
4 changed files with 67 additions and 9 deletions
22
entities.js
22
entities.js
|
@ -1,11 +1,25 @@
|
||||||
|
//you can change these to sexier stuff
|
||||||
|
var colors = [
|
||||||
|
"black",
|
||||||
|
"orange",
|
||||||
|
"red",
|
||||||
|
"blue",
|
||||||
|
];
|
||||||
|
|
||||||
var Clock = function(sides) {
|
var Clock = function(sides) {
|
||||||
|
this.position = 0;
|
||||||
this.sides = sides;
|
this.sides = sides;
|
||||||
this.blocks = [];
|
this.blocks = [];
|
||||||
for(var i=0; i<sides; i++) {
|
for(var i=0; i<sides; i++) {
|
||||||
this.blocks.push([]);
|
this.blocks.push([]);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
var Block = function(color) {
|
this.addBlock = function(block) {
|
||||||
this.color = color;
|
this.blocks[this.position].push(block);
|
||||||
};
|
}
|
||||||
|
|
||||||
|
this.rotate = function(steps) {
|
||||||
|
this.position += steps;
|
||||||
|
this.position = Math.abs(((this.position%sides)+this.position) % sides);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -2,8 +2,15 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Wasted Time</title>
|
<title>Wasted Time</title>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
35
main.js
35
main.js
|
@ -1,4 +1,6 @@
|
||||||
// main thing here
|
// main thing here
|
||||||
|
var canvas = document.getElementById('canvas');
|
||||||
|
var ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
window.requestAnimFrame = (function(){
|
window.requestAnimFrame = (function(){
|
||||||
return window.requestAnimationFrame ||
|
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(){
|
(function animloop(){
|
||||||
requestAnimFrame(animloop);
|
requestAnimFrame(animloop);
|
||||||
render();
|
render();
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
requestAnimFrame(animloop);
|
requestAnimFrame(animloop);
|
||||||
drawClock(10, 10, 0, 6);
|
drawClock(10, 10, 0, 6);
|
||||||
|
@ -24,13 +33,31 @@ function drawClock(x, y, sides, sideLength, theta) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(0, sideLength);
|
ctx.moveTo(0, sideLength);
|
||||||
for (var i = 0; i < sides; i++) {
|
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.lineTo(coords.x, coords.y);
|
||||||
ctx.moveTo(coords.x, coords.y);
|
ctx.moveTo(coords.x, coords.y);
|
||||||
}
|
}
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
function degToRadians(degrees) {
|
function Block(lane, color, time) {
|
||||||
return ((Math.PI) / 180) * degrees;
|
this.lane = lane;
|
||||||
}f
|
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
10
math.js
Normal 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,
|
||||||
|
};
|
||||||
|
}
|
Loading…
Reference in a new issue