User:Roelroscama/Canvas: Difference between revisions

Latest revision as of 14:32, 1 October 2012

Counting In Public Space

Counting stacks on the block together with your good friends

additional information here and here and here

Canvas tryouts

first try
second try (using loops to create a spectrum of colours)
third try I got stuck with this one. The goal was to create a shape by rotating a single line using if statements. No rotate functions.

 function init(){
       var canvas = document.getElementById('canvas1');
       var ctx = canvas.getContext('2d');
       var width = canvas.width;
       var height = canvas.height;
       var y = 200;
       var x = 10;

var rectSize = 10;

for(var h=0;h<80;h++) { var xPos=x*i;

       for(var i=0;i<80;i++) {

var yPos =(x+1)*i;

for (var j=0;j<80;j++){

           ctx.fillStyle = 'rgb('+4*h+','+4*i+','+4*j+')'

ctx.fillRect((x+1)*j,yPos,rectSize,rectSize); } }

       }
   
 }

</canvas>

@@ Line 1: / Line 1: @@
+== Counting In Public Space ==
+Counting stacks on the block together with your good friends<br/>
+http://a1.ec-images.myspacecdn.com/images01/7/5eb4c6068076d5e7a6a20018e20463bd/l.jpg
+additional information [https://www.youtube.com/watch?v=dcsSQIOgB48 here] [http://soundcloud.com/captainfranco/lushlyfe and here] [http://soundcloud.com/dummymag/legowelts-memphis-rap-mix and here]
+== Canvas tryouts ==
 [http://www.roelroscamabbing.nl/canvasLoops/canvasloops.html  first try] <br>
 [http://www.roelroscamabbing.nl/canvasLoops/canvasloops2.html second try] (using loops to create a spectrum of colours)<br>
 [http://www.roelroscamabbing.nl/canvasLoops/canvasloops3.html third try] I got stuck with this one. The goal was to create a shape by rotating a single line using if statements. No rotate functions.
+<canvas id="canvas1" showsrc>
+  function init(){
+        var canvas = document.getElementById('canvas1');
+        var ctx = canvas.getContext('2d');
+        var width = canvas.width;
+        var height = canvas.height;
+        var y = 200;
+        var x = 10;
+		var rectSize = 10;
+		for(var h=0;h<80;h++) {
+			var xPos=x*i;
+        for(var i=0;i<80;i++) {
+			var yPos =(x+1)*i;
+			for (var j=0;j<80;j++){
+            ctx.fillStyle = 'rgb('+4*h+','+4*i+','+4*j+')'
+		    ctx.fillRect((x+1)*j,yPos,rectSize,rectSize);
+		}
+		}
+        }
+  }
+</canvas>