Permalink
Browse files

Renders canvas full of hexagons. Scales to Side values of S

  • Loading branch information...
1 parent d8fd06b commit 865897e9b27cf1e6c0110be1663388d2e2c34120 @a727891 committed Mar 5, 2013
Showing with 94 additions and 16 deletions.
  1. +68 −12 js/Renderer.js
  2. +25 −3 js/main.js
  3. +1 −1 testfile.html
View
@@ -1,37 +1,93 @@
/**
* Renderer class
**/
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function () {
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function (/* function */ callback, /* DOMElement */ element) {
+ window.setTimeout(callback, 1000 / 60);
+ };
+})();
define([], function () {
var Renderer = Class.extend({
init:function (HexSide) {
this.Canvas = document.getElementById('TestCanvas');
this.Context = this.Canvas.getContext('2d');
+ this.CanvasHeight = this.Canvas.height;
+ this.CanvasWidth = this.Canvas.width
this.s = HexSide;
this.h = Math.sin(30 * Math.PI / 180) * this.s;
this.r = Math.cos(30 * Math.PI / 180) * this.s;
this.HEXWIDTH = 2 * this.r;
- this.HEXHEIGHT = this.h + this.h + this.s;
+ this.HEXHEIGHT = this.h + this.s;
console.log(this.s, this.h, this.r);
- this.DrawHex(50, 50);
- this.DrawHex(50+this.r, 50 + this.h + this.s);
- this.DrawHex(50+this.HEXWIDTH,50);
+// this.DrawBoard(0,0);
+// for (var i = 0, j = this.Canvas.width + this.r; i < j; i += this.HEXWIDTH) {
+// for (var k = 0,m= 0, l = this.Canvas.height; k < l; k += this.HEXHEIGHT,m++) {
+// if (m % 2 === 0) {
+// this.DrawHex(i + this.r, k);
+// } else {
+// this.DrawHex(i, k);
+// }
+// }
+// }
+// this.DrawHex(50, 50);
+// this.DrawHex(50 + this.r, 50 + this.h + this.s);
+// this.DrawHex(50 + this.HEXWIDTH, 50);
},
- DrawHex:function (x, y) {
+ SetSide:function(Side){
+ console.log('set side to', Side);
+ this.s = Side;
+ this.h = Math.sin(30 * Math.PI / 180) * this.s;
+ this.r = Math.cos(30 * Math.PI / 180) * this.s;
+ this.HEXWIDTH = 2 * this.r;
+ this.HEXHEIGHT = this.h + this.s;
+ },
- this.Context.moveTo(x + this.r, y);
- this.Context.lineTo(x + this.r + this.r, y + this.h);
- this.Context.lineTo(x + this.r + this.r, y + this.h + this.s);
- this.Context.lineTo(x + this.r, y + this.h + this.h + this.s);
- this.Context.lineTo(x, y + this.h + this.s);
- this.Context.lineTo(x, y + this.h);
- this.Context.lineTo(x + this.r, y);
+ Render: function(){
+ this.DrawBoard(0,0);
+// window.requestAnimFrame(this.Render);
+ },
+
+ DrawBoard:function(BoardX,BoardY){
+ console.log("Drawing board at ",BoardX,BoardY);
+ var Start = new Date();
+ this.Context.clearRect(0,0,this.CanvasWidth,this.CanvasHeight);
this.Context.strokeStyle = 'black';
+ for (var i = BoardX, j = this.CanvasWidth +BoardX; i < j; i += this.HEXWIDTH) {
+ for (var k = BoardY,m= 0, l = this.CanvasHeight+BoardY; k < l; k += this.HEXHEIGHT,m++) {
+ if (m % 2 === 0) {
+ this.DrawHex(i + this.r, k);
+ } else {
+ this.DrawHex(i, k);
+ }
+ }
+ }
+ var EndRender =new Date();
+ console.log(' Render took:',EndRender-Start,"ms");
+
+ },
+
+ DrawHex:function (x, y) {
+ this.Context.beginPath();
+ this.Context.moveTo(x, y);
+ this.Context.lineTo(x + this.r, y + this.h);
+ this.Context.lineTo(x + this.r, y + this.h + this.s);
+ this.Context.lineTo(x, y + this.h + this.h + this.s);
+ this.Context.lineTo(x - this.r, y + this.h + this.s);
+ this.Context.lineTo(x - this.r, y + this.h);
+ this.Context.lineTo(x, y);
+ this.Context.closePath();
this.Context.stroke();
}
View
@@ -1,14 +1,14 @@
/**
* main class
**/
-var hex;
+Hex = 0;
define(['jquery', 'lib/class','Renderer'], function ($, Class,Renderer) {
var initApp = function () {
$(document).ready(function () {
- var Hex = new Renderer(50);
-
+ this.Renderer = new Renderer(50);
+ window.Hex = this;
// Context.moveTo(r, 0);
// Context.lineTo(r + r, h);
@@ -20,8 +20,30 @@ define(['jquery', 'lib/class','Renderer'], function ($, Class,Renderer) {
// Context.strokeStyle = 'black';
// Context.stroke();
+ function findPos(obj) {
+ var curleft = 0, curtop = 0;
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+ } while (obj = obj.offsetParent);
+ return { x: curleft, y: curtop };
+ }
+ return undefined;
+ }
+
+ $('#TestCanvas').mousemove(function(e) {
+ var pos = findPos(this);
+ var x = e.pageX - pos.x;
+ var y = e.pageY - pos.y;
+ var coordinateDisplay = "x=" + x + ", y=" + y;
+ console.log(coordinateDisplay);
+ });
+
+
});
+
};
View
@@ -11,7 +11,7 @@
</style>
</head>
<body style="background: #999999;">
-<canvas id="TestCanvas" width="320" height="320"></canvas>
+<canvas id="TestCanvas" width="300" height="200"></canvas>
<br>
<script data-main="js/main" src="js/lib/require-jquery.js"></script>
</body>

0 comments on commit 865897e

Please sign in to comment.