à l’aventure !
– Avoir une idée (c’est bien)
Je voudrais simuler une grille magnétique de 10 pixels (magnétisme de la grille ou snap to grid dans Illustrator).
– Comprendre
Quand je clique sur un point avec pour coordonnées (6,17), sur une grille de 10 px ça donne (10,20).
– Traduire
Deux stratégies :
1/ utiliser ses connaissances
int monX; void draw(){ if(mouseX<10){ monX=0; } if(mouseX<20){ monX=10; } if(mouseX<30){ monX=20; } println(monX); }
Ça marche ! oui ça marche, mais ça renvoie toujours 20, un truc cloche…
Je vais encadrer entre deux valeurs ;
si le mouseX est supérieur ou égal à 0 ET plus petit que 10 alors monX = 0…
int monX; void draw(){ if(mouseX>=0 && mouseX<10){ monX=0; } if(mouseX>=10 && mouseX<20){ monX=10; } if(mouseX>=20 && mouseX<30){ monX=20; } if(mouseX>=30 && mouseX<40){ monX=30; } if(mouseX>=40 && mouseX<50){ monX=40; } println(monX); }
Voilà, un bon début mais c’est fastidieux (ou fast idiot), une pratique courante chez les débutants.
2/ approfondir ses connaissances
Via la documentation : http://processing.org/reference/ (pas simple)… ou via des exemples à disséquer.
Remettre le problème à plat en pensant à ses cours de mathématiques.
Ici, l’astuce est dans la fonction round() pour arrondir.
println(round(1.6));
Ceci affiche 2.
Dans mon idée, nous aurions 16 et nous voudrions 20.
Alors 16 – je divise par 10 -> 1.6 – je round( ) -> 2 – je multiplie par 10 -> 20 ! bingo !
En code, ça donne ceci :
round(mouseX/10)*10;
Première utilisation :
int a,b,c,d; void draw() { a=round(pmouseX/10)*10; b=round(pmouseY/10)*10; c=round(mouseX/10)*10; d=round(mouseY/10)*10; line(a, b, c, d); }
Variante :
int a, b, grille; void setup() { size(360, 360); noStroke(); grille=40; background(255); } void draw() { if (mousePressed) { a=round(mouseX/grille)*grille; b=round(mouseY/grille)*grille; fill(random(200)+55, 0, random(200)+55); rect(a+5, b+5, grille-10, grille-10); } }
tags : processing