Raycast et sélection

Le concept

Le raycast projette un rayon depuis la caméra vers la scène pour détecter les objets intersectés. C'est le mécanisme de base de la sélection dans les interfaces 3D et AR. En 2D, on peut le simuler en testant si le curseur (ou un doigt) intersecte des formes géométriques.

Le code

// Raycast: hit test on circles
let objects = [];
function setup() {
  createCanvas(400, 280);
  for (let i = 0; i < 8; i++)
    objects.push({x:random(50,350), y:random(50,230), r:random(20,40), hit:false});
}
function draw() {
  background(11, 15, 20);
  for (let o of objects) {
    o.hit = dist(mouseX, mouseY, o.x, o.y) < o.r;
    noStroke();
    fill(o.hit ? [55,227,195] : [60,70,90]);
    ellipse(o.x, o.y, o.r*2);
  }
  // Ray line
  stroke(200,200,200,60); strokeWeight(1);
  line(mouseX, mouseY, mouseX, 0);
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.