fonction map()

La fonction map() permet de transformer une valeur d’une plage de valeur à une autre plage de valeur.
Le canvas utilisé est de 780px de large. Afin de créer un dégradé de gris on dispose de 255 valeurs de gris. Afin d’obtenir un dégradé homogène il faut utilisé la fonction map();
La fonction map() comporte 5 valeurs map(ce à quoi s’applique la fonction, minimum que peut avoir cet élément, son max, le minimum dans la nouvelle plage, le maximum dans la nouvelle plage);

function setup() {
createCanvas(780, 200);
strokeWeight(4);
}
function draw() {
 background(100);
var grey = map(mouseX, 0, 780, 0, 255);
fill(grey)
 ellipse(mouseX,mouseY,50,50);
}

Dans cet exemple map() s’applique à mouseX, le min et le max sont 0 et 780px (ou width), la nouvelle plage de valeur est 0 et 255.

fonction dist()

Cette fonction permet de simplifier un certains calculs. Dans l’exemple ci-dessous il s’agit de réaliser un programme qui permet de modifier la couleur du fond / background quand on clique dans le cercle situé au centre.

function setup() {
createCanvas(780, 780);
strokeWeight(4);
}
function draw() {
 background(0);
 fill(255);
 noStroke();
 ellipse(width/2, height/2, 200, 200);
}

Utilisons une variable qui mesure la distance entre le centre de l’ellipse et la position de la souris. Cette distance doit être inférieure au rayon.
dist (x, y, mouseX, mouseY) < rayon

Utilisons une autre variable pour la couleur du fond var bg = 0;

var bg = 0;

function setup() {
createCanvas(780, 780);
strokeWeight(4);
}
function draw() {
 background(bg);
 fill(255);
 noStroke();
 ellipse(width/2, height/2, 200, 200);
  var d = dist(width/2, height/2, mouseX, mouseY)
 if (d < 100) { //longueur du rayon de l'ellipse
     bg = 100;
 }else{
     bg = 0;
 }
}

Afin que le changement s’effectue dans le cerce et au clic de souris il faut utiliser la syntaxe suivante :

if (d<100 && mouseIsPressed) {

&& = et
|| = ou