User:Nan Wang/counting: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Line 1: Line 1:
    <script>
function unit () {
 
  // a single housing unit
        var p;
  ctx.beginPath();
        // Define a draw function that contains your
  ctx.arc(5, 5, 5, 0, Math.PI, false);
        // drawing code
  ctx.closePath();
        q=1;
  ctx.stroke();
        //i=1;
  // ctx.strokeRect(0, 0, 10, 10);
 
}
        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);
 
          // p.fillStyle = "rgb(300,225,0)";  
 
            drawBlocks();
            q= q+2;
            if(q>83)
              {q=1};
           
         
            //"rgb(255,0,0)";
           
            //p.fillRect(0, 0, 100, 300);
          // p.fillStyle = "rgb(0,225,0)";
            //p.fillRect(9,0,100, 200);
          // fillStyle = "rgb(0,225,0)";
          // p.fillRect(300,0, 50, 30);
          // fillStyle = "rgb(225,0,0)";
 
        }
       
       
 
 
        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;
              //y=y+20
              //if(y>525)
                //{y=0};
              //z=z+30
              //if(z>850)
                //{z=500};
              // g=g+150
              // if(g>225)
              // {z=0};
 
 
           
 
            //werew
            //p.fillStyle(a,b,c);
 
         
          } 
 
   
   
        }
function street () {
 
  // a linear row of houses
setInterval("draw()",50);
  ctx.save();
        //function doAlotofThings(){
  for (c=0; c<10; c++) {
            //sum(10,50);
    unit();
            //draw();
    ctx.translate(10, 0);
        //};
  }
      </script>
  ctx.restore();
     
}
</head>
<body onload="draw()">
function street (r) {
<hi> This is nan </hi>
  // a curved row of houses
  var length = Math.PI * r,
        <p> HI my name is <a href="www.xxx.com" title="my home page">nan</a></P>
    numunits = length/10,
 
    step = length/numunits,
<canvas id="canvas" width="600" height="300"></canvas>
    turn = Math.PI/(numunits-1);
 
    </body>
  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
http://payload90.cargocollective.com/1/8/283859/4112701/ccc_900.jpg
http://payload90.cargocollective.com/1/8/283859/4106757/nan_900.jpg
http://payload90.cargocollective.com/1/8/283859/4106757/nan_900.jpg


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

Revision as of 17:34, 18 October 2012

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();

}

ccc_900.jpg nan_900.jpg

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

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Nan_Wang/counting&oldid=36321"