User:Joak/canvas1: Difference between revisions

Revision as of 12:19, 1 October 2012

<canvas id="c1" showsrc> something

function draw() {

 c = document.getElementById("c1");
 p = c.getContext('2d');
 drawer();

}

function drawer() {

   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); //console.log("r is ",r,"movement is",movement, "movement2 is", movement2);

   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);
   //console.log("i is",i);
   setTimeout(drawer,10)

}

function map_range(value, low1, high1, low2, high2) {

   return low2 + (high2 - low2) * (value - low1) / (high1 - low1);

}

</canvas>

@@ Line 1: / Line 1: @@
 <canvas id="c1" showsrc>
-function unit () {
+something
-  // a single housing unit
-  ctx.strokeRect(0, 0, 10, 10);
-}
-function street () {
+function draw() {
-   // a linear row of houses
+   c = document.getElementById("c1");
-  ctx.save();
+   p = c.getContext('2d');
-  var numhouses = Math.floor(Math.random()*15);
+   drawer();
-   for (c=0; c<numhouses; c++) {
-    unit();
-    ctx.translate(10, 0);
-   }
-  ctx.restore();
 }
-function city (l) {
+function drawer() {
-  // rows of streets
+    x = window.innerWidth;
-  for (x=0; x<12; x++) {
+    y = window.innerHeight;
-     street();
+    var positionx = x / 2;
-     ctx.translate(0, 20);
+    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);
+	//console.log("r is ",r,"movement is",movement, "movement2 is", movement2);
+     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);
+     //console.log("i is",i);
+    setTimeout(drawer,10)
 }
-function draw() {
+function map_range(value, low1, high1, low2, high2) {
-  c = document.getElementById("c1");
+    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
-  ctx = c.getContext('2d');
-  city();
 }
 </canvas>