User:Nan Wang/counting: Difference between revisions

Revision as of 19:23, 18 October 2012

http://www.openprocessing.org/sketch/73805/check

var p;
        
        q=1;
        
        function draw(){
           c = document.getElementById("canvas");
           console.log("c is",c);
           p = c.getContext("2d");
           p.fillStyle="rgb(0,0,0)"
           p.fillRect(0, 0, 800, 300);

           drawBlocks();
           q= q+2;
           if(q>83)
              {q=1};
            
          
        }

       function drawBlocks(){
           x = 0;
           i = 0;
           y=0;
           z=0;
           g=0;
          while (i< 800){
           p.fillRect(10*q,x,1,1);
           p.fillRect(10*q+20,x,2,2);
           p.fillRect(10*q+40,x,3,3);
           p.fillRect(10*q+60,x,4,4);
           p.fillRect(10*q+80,x,3,3);
           p.fillRect(10*q+100,x,2,2);
           p.fillRect(10*q+120,x,1,1);
           p.fillRect(10*q+140,x,1,1);
           p.fillRect(10*q+160,x,2,2);
           p.fillRect(10*q+180,x,3,3);
           p.fillRect(10*q+200,x,4,4);
           p.fillRect(10*q+220,x,5,5);
           p.fillRect(10*q+240,x,4,4);
           p.fillRect(10*q+260,x,3,3);
           p.fillRect(10*q+280,x,2,2);
           p.fillRect(10*q+300,x,1,1);
           p.fillRect(10*q+320,x,1,1);
           p.fillRect(10*q+340,x,2,2);
           p.fillRect(10*q+360,x,3,3);
           p.fillRect(10*q+380,x,4,4);
           p.fillRect(10*q+400,x,5,5);
           p.fillRect(10*q+420,x,4,4);
           p.fillRect(10*q+440,x,3,3);
           p.fillRect(10*q+460,x,2,2);
           p.fillRect(10*q+480,x,1,1);
           p.fillRect(10*q+500,x,1,1);
            p.fillRect(10*q+520,x,2,2);
             p.fillRect(10*q+540,x,3,3);
           
           p.fillRect(10*q-35,60,15,15);
           p.fillRect(10*q-50,110,10,10);
           p.fillRect(10*q-150,30,10,10);
           p.fillRect(10*q-70,140,10,10);
           p.fillRect(10*q-110,80,10,10);
           p.fillRect(10*q-80,760,20,20);
           p.fillRect(10*q-55,200,15,15);
           p.fillRect(10*q-130,220,10,10);
           p.fillRect(10*q-50,280,10,10);
           p.fillRect(10*q-205,180,5,5);

              p.fillRect(10*q+560,x,4,4);
              p.fillRect(10*q+580,x,3,3);
              p.fillRect(10*q-820,x,2,2);
              p.fillRect(10*q-800,x,1,1);
              p.fillRect(10*q-780,x,1,1);
              p.fillRect(10*q-760,x,1,1);
              p.fillRect(10*q-740,x,2,2);
              p.fillRect(10*q-720,x,3,3);
              p.fillRect(10*q-700,x,4,4);
              p.fillRect(10*q-680,x,5,5);
              p.fillRect(10*q-660,x,4,4);
              p.fillRect(10*q-640,x,3,3);
              p.fillRect(10*q-620,x,2,2);
              p.fillRect(10*q-600,x,1 ,1);
              p.fillRect(10*q-580,x,1,1);
              p.fillRect(10*q-560,x,2,2);
              p.fillRect(10*q-540,x,3,3);
              p.fillRect(10*q-520,x,4,4);

           p.fillRect(10*q-500,x,5,5);
           p.fillRect(10*q-480,x,6,6);
           p.fillRect(10*q-460,x,5,5);
           p.fillRect(10*q-440,x,4,4);
           p.fillRect(10*q-420,x,3,3);
           p.fillRect(10*q-400,x,2,2);
           p.fillRect(10*q-380,x,1,1);
           p.fillRect(10*q-360,x,1,1);
           p.fillRect(10*q-340,x,2,2);
           p.fillRect(10*q-320,x,3,3);
           p.fillRect(10*q-300,x,4,4);
           p.fillRect(10*q-280,x,5,5);
           p.fillRect(10*q-260,x,6,6);
           p.fillRect(10*q-240,x,5,5);
           p.fillRect(10*q-220,x,4,4);
           p.fillRect(10*q-200,x,3,3);
           p.fillRect(10*q-180,x,2,2);

           p.fillRect(10*q-160,x,2,2);
           p.fillRect(10*q-140,x,4,4);
           p.fillRect(10*q-120,x,4,4);
           p.fillRect(10*q-100,x,2,2);
           p.fillRect(10*q-80,x,2,2);
           p.fillRect(10*q-60,x,4,4);
           p.fillRect(10*q-40,x,4,4);
           p.fillRect(10*q-20,x,4,4);

          p.fillStyle= "rgb("+y+","+z+","+g+")";
           x = x + 5;
           i = i + 5;
           y = y+2;
           z = z+9;
           g = g+130;

setInterval(function(){draw()},50);

      </canvas>

@@ Line 1: / Line 1: @@
-function unit () {
-  // a single housing unit
-  ctx.beginPath();
-  ctx.arc(5, 5, 5, 0, Math.PI, false);
-  ctx.closePath();
-  ctx.stroke();
-  // ctx.strokeRect(0, 0, 10, 10);
-}
-function street () {
-  // a linear row of houses
-  ctx.save();
-  for (c=0; c<10; c++) {
-    unit();
-    ctx.translate(10, 0);
-  }
-  ctx.restore();
-}
-function street (r) {
-  // a curved row of houses
-  var length = Math.PI * r,
-    numunits = length/10,
-    step = length/numunits,
-    turn = Math.PI/(numunits-1);
-  ctx.save();
-  ctx.translate(-r, 0);
-  ctx.rotate(-Math.PI/2);
-  for (c=0; c<numunits; c++) {
-    unit();
-    ctx.translate(step, 0);
-    ctx.rotate(turn);
-  }
-  ctx.restore();
-}
-function city (l) {
-  // rows of streets
-  ctx.translate(125, 125);
-  for (var r=30; r<120; r+=20) {
-    street(r);
-  }
-}
-var c, ctx;
-function draw() {
-  c = document.getElementById("c3");
-  ctx = c.getContext("2d");
-  city();
-}
 http://payload90.cargocollective.com/1/8/283859/4112701/ccc_900.jpg
@@ Line 55: / Line 4: @@
 http://www.openprocessing.org/sketch/73805/check
+<canvas id="canvas" width="600" height="300" showsrc>
+ var p;
+         q=1;
+         function draw(){
+            c = document.getElementById("canvas");
+            console.log("c is",c);
+            p = c.getContext("2d");
+            p.fillStyle="rgb(0,0,0)"
+            p.fillRect(0, 0, 800, 300);
+            drawBlocks();
+            q= q+2;
+            if(q>83)
+               {q=1};
+         }
+        function drawBlocks(){
+            x = 0;
+            i = 0;
+            y=0;
+            z=0;
+            g=0;
+           while (i< 800){
+            p.fillRect(10*q,x,1,1);
+            p.fillRect(10*q+20,x,2,2);
+            p.fillRect(10*q+40,x,3,3);
+            p.fillRect(10*q+60,x,4,4);
+            p.fillRect(10*q+80,x,3,3);
+            p.fillRect(10*q+100,x,2,2);
+            p.fillRect(10*q+120,x,1,1);
+            p.fillRect(10*q+140,x,1,1);
+            p.fillRect(10*q+160,x,2,2);
+            p.fillRect(10*q+180,x,3,3);
+            p.fillRect(10*q+200,x,4,4);
+            p.fillRect(10*q+220,x,5,5);
+            p.fillRect(10*q+240,x,4,4);
+            p.fillRect(10*q+260,x,3,3);
+            p.fillRect(10*q+280,x,2,2);
+            p.fillRect(10*q+300,x,1,1);
+            p.fillRect(10*q+320,x,1,1);
+            p.fillRect(10*q+340,x,2,2);
+            p.fillRect(10*q+360,x,3,3);
+            p.fillRect(10*q+380,x,4,4);
+            p.fillRect(10*q+400,x,5,5);
+            p.fillRect(10*q+420,x,4,4);
+            p.fillRect(10*q+440,x,3,3);
+            p.fillRect(10*q+460,x,2,2);
+            p.fillRect(10*q+480,x,1,1);
+            p.fillRect(10*q+500,x,1,1);
+             p.fillRect(10*q+520,x,2,2);
+              p.fillRect(10*q+540,x,3,3);
+            p.fillRect(10*q-35,60,15,15);
+            p.fillRect(10*q-50,110,10,10);
+            p.fillRect(10*q-150,30,10,10);
+            p.fillRect(10*q-70,140,10,10);
+            p.fillRect(10*q-110,80,10,10);
+            p.fillRect(10*q-80,760,20,20);
+            p.fillRect(10*q-55,200,15,15);
+            p.fillRect(10*q-130,220,10,10);
+            p.fillRect(10*q-50,280,10,10);
+            p.fillRect(10*q-205,180,5,5);
+               p.fillRect(10*q+560,x,4,4);
+               p.fillRect(10*q+580,x,3,3);
+               p.fillRect(10*q-820,x,2,2);
+               p.fillRect(10*q-800,x,1,1);
+               p.fillRect(10*q-780,x,1,1);
+               p.fillRect(10*q-760,x,1,1);
+               p.fillRect(10*q-740,x,2,2);
+               p.fillRect(10*q-720,x,3,3);
+               p.fillRect(10*q-700,x,4,4);
+               p.fillRect(10*q-680,x,5,5);
+               p.fillRect(10*q-660,x,4,4);
+               p.fillRect(10*q-640,x,3,3);
+               p.fillRect(10*q-620,x,2,2);
+               p.fillRect(10*q-600,x,1 ,1);
+               p.fillRect(10*q-580,x,1,1);
+               p.fillRect(10*q-560,x,2,2);
+               p.fillRect(10*q-540,x,3,3);
+               p.fillRect(10*q-520,x,4,4);
+            p.fillRect(10*q-500,x,5,5);
+            p.fillRect(10*q-480,x,6,6);
+            p.fillRect(10*q-460,x,5,5);
+            p.fillRect(10*q-440,x,4,4);
+            p.fillRect(10*q-420,x,3,3);
+            p.fillRect(10*q-400,x,2,2);
+            p.fillRect(10*q-380,x,1,1);
+            p.fillRect(10*q-360,x,1,1);
+            p.fillRect(10*q-340,x,2,2);
+            p.fillRect(10*q-320,x,3,3);
+            p.fillRect(10*q-300,x,4,4);
+            p.fillRect(10*q-280,x,5,5);
+            p.fillRect(10*q-260,x,6,6);
+            p.fillRect(10*q-240,x,5,5);
+            p.fillRect(10*q-220,x,4,4);
+            p.fillRect(10*q-200,x,3,3);
+            p.fillRect(10*q-180,x,2,2);
+            p.fillRect(10*q-160,x,2,2);
+            p.fillRect(10*q-140,x,4,4);
+            p.fillRect(10*q-120,x,4,4);
+            p.fillRect(10*q-100,x,2,2);
+            p.fillRect(10*q-80,x,2,2);
+            p.fillRect(10*q-60,x,4,4);
+            p.fillRect(10*q-40,x,4,4);
+            p.fillRect(10*q-20,x,4,4);
+           p.fillStyle= "rgb("+y+","+z+","+g+")";
+            x = x + 5;
+            i = i + 5;
+            y = y+2;
+            z = z+9;
+            g = g+130;
+          }
+        }
+setInterval(function(){draw()},50);
+       </canvas>