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 3: / Line 3: @@
 http://a1.ec-images.myspacecdn.com/images01/7/5eb4c6068076d5e7a6a20018e20463bd/l.jpg
-additional information [https://www.youtube.com/watch?v=dcsSQIOgB48 here]
+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 ==
@@ Line 12: / Line 11: @@
 [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>