J'ai un blog

à 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);
  }
}