Exercice 1

Consigne : Couvrir le canevas d’un damier noir et blanc

	var square = 30;

	function setup() {
		createCanvas(square*10, square*10);
		background(0);

	}

	function draw() {
		fill(255);
		for (var i =0; i<10;i++){
		   for (var j=0+i%2; j<10; j+=2){
				 rect(i*square, j*square,square,square);
			}
		}
	}

Exercice 2

a) Multicolor

consigne : Couvrir le canevas d’un damier avec des couleurs aléatoires.

pour cet exercice j'utilise l'option Embed de openprocessing.org

Exercice 3

le projecteur

Consigne : Couvrir le canevas d’un damier interactif : plus la case « blanche » est loin de la souris plus la case sera foncée créer une fonction qui donnera la distance du point dont on donnera les coordonnées en entrée

	var square = 80;
	var intensity;

	function intensity(i,j){
		var dist = Math.sqrt(Math.pow((mouseX-i*square),2)+Math.pow((mouseY-j*square),2)); 
		/* calcule la distance entre le curseur et la case (i,j) */
		var intense = map(dist,0,14*square,255,0); 
		/* fais un ajustement affine pour qu'une distance 0 soit associée
		à l'intensité maximale et la distance maximale soit associée à l'intensité 0*/ 
		return intense;
	}

	function setup() {
		createCanvas(square*10, square*10);
		background(0);
	}


	function draw() {
		for (var i =0; i<10;i++){
		   for (var j=0+i%2; j<10; j+=2){	 
				 /* on saute une case sur 2 et on commence à zéro ou à un suivant la valeur de i*/
				 fill(intensity(i,j));
				 rect(i*square, j*square,square,square);		 
			 }		
		}			
	}

b) surligner

Consigne : Couvrir le canevas d’un damier interactif : la case survolée sera bleue

c) case à taille variable

Consigne : rendre la finesse du quadrillage interactive : plus la souris est à droite plus c’est fin (taille minimale de case = 4 pixels) plus la souris est à gauche plus c’est large (taille maximale de case = taille du canevas)

var square = 30;
var intensity;

function nombreCase(x){
	var pos = Math.max(square*10-x,2);
	var nbr = Math.floor(square*10/pos); 
	/* au pire le carreau fera 4 pixels */
	return nbr;
}

function setup() {
	createCanvas(square*10, square*10);
	background(0);
}

function draw() {
  background(0);
	var nbc = nombreCase(mouseX);
	var carre = square*10/nbc;
	for (var i =0; i<nbc;i++){
	   for (var j=0+i%2; j<nbc; j+=2){	 
			 /* on saute une case sur 2 et on commence à zéro ou à un suivant la valeur de i*/
			 fill(255,255, map(mouseY,0,square*10,0,255));
			 rect(i*carre, j*carre,carre,carre);		 
		 }		
	}			
}

Bonus Round