User:Joak/canvas1: Difference between revisions

Revision as of 13:18, 1 October 2012

<canvas id="c1" showsrc> function unit () {

 // a single housing unit
 ctx.strokeRect(0, 0, 10, 10);

}

function street () {

 // a linear row of houses
 ctx.save();
 var numhouses = Math.floor(Math.random()*15);
 for (c=0; c<numhouses; c++) {
   unit();
   ctx.translate(10, 0);
 }
 ctx.restore();

}

function city (l) {

 // rows of streets
 for (x=0; x<12; x++) {
   street();
   ctx.translate(0, 20);
 }

}

function draw() {

 c = document.getElementById("c1");
 ctx = c.getContext('2d');
 city();

}

</canvas>

@@ Line 1: / Line 1: @@
 <canvas id="c1" showsrc>
+function unit () {
+  // a single housing unit
+  ctx.strokeRect(0, 0, 10, 10);
+}
+function street () {
+  // a linear row of houses
+  ctx.save();
+  var numhouses = Math.floor(Math.random()*15);
+  for (c=0; c<numhouses; c++) {
+    unit();
+    ctx.translate(10, 0);
+  }
+  ctx.restore();
+}
+function city (l) {
+  // rows of streets
+  for (x=0; x<12; x++) {
+    street();
+    ctx.translate(0, 20);
+  }
+}
 function draw() {
- c = document.getElementById("c1")
+  c = document.getElementById("c1");
-//console.log("c is",c)
+   ctx = c.getContext('2d');
-   p = c.getContext("2d")
+  city();
-    x = window.innerWidth;
-    y = window.innerHeight;
-    var positionx = x / 2;
-    var positiony= y / 2;
-    if( r < 5){
-		if(r == 3){
-			upordown = -0.02;
-		}
-		if(r == 0){
-			upordown = +0.02;
-		}
-		r=r+upordown;
-	}
-	r = Math.max(r, 0);
-	r = Math.min(r, 3);
-	r2 = map_range(r,0,3,3,0);
-	movement = 400*Math.sin(r);
-	movement2 =400*Math.sin(r2);
-    var number1 = p.createRadialGradient(positionx,positiony,movement2,positionx,positiony,movement);
- 	number1.addColorStop(0, '#000000');
-  	number1.addColorStop(1, '#FFFFFF');
-  	p.fillStyle = number1;
-  	p.clearRect(0,0,c.width,c.height);
-  	p.fillRect(0,0,x,y);
-}
-function map_range(value, low1, high1, low2, high2) {
-    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
 }
 </canvas>