Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

added hdraw. to draw counters

  • Loading branch information...
commit 77358bdc428d83fdba8dde5dab5f7d492148b4e3 1 parent 9fb5000
David Rodal authored April 16, 2012

Showing 1 changed file with 180 additions and 0 deletions. Show diff stats Hide diff stats

  1. 180  hdraw.html
180  hdraw.html
... ...
@@ -0,0 +1,180 @@
  1
+<html>
  2
+	<style type="text/css">
  3
+		div{
  4
+			width:500px;
  5
+			height:500px;
  6
+		}
  7
+		canvas {
  8
+		}
  9
+	</style>
  10
+	<head><title>draw</title></head>
  11
+	<body>
  12
+
  13
+<h2>The math used to draw these was learned from <a href="http://www.rdwarf.com/users/wwonko/hex/">http://www.rdwarf.com/users/wwonko/hex/</h2>
  14
+<h2> the code is here <a href="https://github.com/daverodal/draw">https://github.com/daverodal/draw</a></h2>
  15
+
  16
+		<div>
  17
+<canvas id="tutorial" width="1800px" height="800px"></canvas>
  18
+</div>
  19
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
  20
+  
  21
+  <script>
  22
+  </script>
  23
+<script type="text/javascript">
  24
+	var A=25;
  25
+	var B=43;
  26
+	var C=50;
  27
+function wheel(event) { 
  28
+        var delta = 0;
  29
+        if (!event) /* For IE. */
  30
+                event = window.event;
  31
+        if (event.wheelDelta) { /* IE/Opera. */
  32
+                delta = event.wheelDelta/120;
  33
+                /** In Opera 9, delta differs in sign as compared to IE.
  34
+                 */
  35
+                if (window.opera)
  36
+                        delta = -delta;
  37
+        } else if (event.detail) { /** Mozilla case. */
  38
+                /** In Mozilla, sign of delta is different than in IE.
  39
+                 * Also, delta is multiple of 3.
  40
+                 */
  41
+                delta = -event.detail/3;
  42
+        }
  43
+		
  44
+	if(delta > 0){
  45
+		A += 1;
  46
+		B += 8.6/5;
  47
+		C += 10/5;
  48
+	}else{
  49
+		A -= 1;
  50
+		B -= 8.6/5;
  51
+		C -= 10/5;
  52
+	}
  53
+	doDraw();
  54
+        if (event.preventDefault)
  55
+                event.preventDefault();
  56
+	event.returnValue = false;
  57
+}
  58
+  $(document).ready(function(){
  59
+    
  60
+		  $(window).bind("DOMMouseScroll",wheel);
  61
+		  window.onmousewheel = document.onmousewheel = wheel;
  62
+
  63
+  });
  64
+function draw(x,y,color,gridcolor){
  65
+  var canvas = document.getElementById('tutorial');
  66
+  if (canvas.getContext){
  67
+    var ctx = canvas.getContext('2d');
  68
+ctx.fillStyle    = '#00f';
  69
+/*ctx.font         = 'italic 30px sans-serif';
  70
+ctx.textBaseline = 'top';
  71
+ctx.fillText  ('Hello world!', 0, 0);
  72
+ctx.font         = 'bold 30px sans-serif';
  73
+ctx.strokeText('Hello world!', 0, 50);*/
  74
+    
  75
+    ctx.fillStyle=color;
  76
+    ctx.strokeStyle="#000000";
  77
+    y *= B * 2;
  78
+    if(x & 1){
  79
+	   y += B;
  80
+    }
  81
+    x *= A+C;
  82
+ctx.beginPath();
  83
+ctx.moveTo(x+0,y+B);
  84
+ctx.lineTo(x+A,y+0);
  85
+ctx.lineTo(x+A+C,y+0);
  86
+ctx.lineTo(x+C*2,y+B);
  87
+ctx.lineTo(x+A+C,y+2*B);
  88
+ctx.lineTo(x+A,y+(2*B));
  89
+ctx.lineTo(x+0,y+B);
  90
+ctx.fill();
  91
+
  92
+ctx.beginPath();
  93
+ctx.moveTo(x+0,y+B);
  94
+ctx.lineTo(x+A,y+0);
  95
+ctx.lineTo(x+A+C,y+0);
  96
+ctx.lineTo(x+C*2,y+B);
  97
+ctx.lineTo(x+A+C,y+2*B);
  98
+ctx.lineTo(x+A,y+(2*B));
  99
+ctx.lineTo(x+0,y+B);
  100
+ctx.stroke();
  101
+
  102
+
  103
+    ctx.fillStyle="#aaccff";
  104
+b = B * 1.3;
  105
+x += B / 2.3;
  106
+y += B / 2.3;
  107
+ctx.beginPath();
  108
+ctx.moveTo(x,y);
  109
+ctx.lineTo(x+b,y);
  110
+ctx.lineTo(x+b,y+b);
  111
+ctx.lineTo(x,y+b);
  112
+ctx.lineTo(x,y);
  113
+ctx.fill();
  114
+    ctx.fillStyle="#000000";
  115
+var size = A/2;
  116
+ctx.font = size+"px sans-serif";
  117
+ctx.fillText("7 - "+A,x + A/2,y+B);
  118
+
  119
+
  120
+/*
  121
+ctx.beginPath();
  122
+ctx.moveTo(x+0,y+A + C);
  123
+ctx.lineTo(x+0,y+A);
  124
+ctx.lineTo(x+B,y+0);
  125
+ctx.lineTo(x+B*2,y+A);
  126
+ctx.lineTo(x+B*2,y+A+C);
  127
+ctx.lineTo(x+B,y+(2*C));
  128
+ctx.lineTo(x+0,y+A+C);
  129
+ctx.fill();
  130
+ctx.beginPath();
  131
+ctx.moveTo(x+0,y+A + C);
  132
+ctx.lineTo(x+0,y+A);
  133
+ctx.lineTo(x+B,y+0);
  134
+ctx.lineTo(x+B*2,y+A);
  135
+ctx.lineTo(x+B*2,y+A+C);
  136
+ctx.lineTo(x+B,y+(2*C));
  137
+ctx.lineTo(x+0,y+A+C);
  138
+ctx.stroke();*/
  139
+    
  140
+  }
  141
+}
  142
+function doDraw(){
  143
+	clear();
  144
+	var colors = Array("#ff00ff",
  145
+	"#ff0000",
  146
+	"#00ff00",
  147
+	"#0000ff",
  148
+	"#00ffff",
  149
+	"#ffffff",
  150
+	"#ffff00",
  151
+	"#000000");
  152
+	for(var i = 0; i < 20;i++){
  153
+		for(var j = 0; j< 20;j++){
  154
+			draw(i,j,colors[(i+(j*3))%8]);
  155
+		}
  156
+	}
  157
+	/*draw(0,0,"#ff00ff");
  158
+	draw(1,0,"#ff0000");
  159
+	draw(2,0,"#00ff00");
  160
+	draw(3,0,"#0000ff");
  161
+	draw(0,1,"#ff00ff");
  162
+	draw(1,1,"#ff0000");
  163
+	draw(2,1,"#00ff00");
  164
+	draw(3,1,"#0000ff");
  165
+	draw(0,2,"#ff00ff");
  166
+	draw(1,2,"#ff0000");
  167
+	draw(2,2,"#00ff00");
  168
+	draw(3,2,"#0000ff");*/
  169
+}
  170
+function clear(){
  171
+  var canvas = document.getElementById('tutorial');
  172
+  if (canvas.getContext){
  173
+    var ctx = canvas.getContext('2d');
  174
+	ctx.clearRect(0,0, 1800,800);
  175
+  }
  176
+}
  177
+doDraw();
  178
+	</script>
  179
+</body>
  180
+</html>

0 notes on commit 77358bd

Please sign in to comment.
Something went wrong with that request. Please try again.