Call out function when images collide

Question

PD: I'M PRETTY NEW AT THIS SO I'M ONLY DOING THE BASICS

I have no idea on how to call out a function when two of my images collide. Here's my code:

var arbol;
var poma;
var pomaicono;
var cistell;
var y = [];
var x = [];
var v = [];
let font;

function setup() {
  createCanvas(400, 550);
  arbol = loadImage ("ARBOL.png");
  poma = loadImage ("POMA.png");
  pomaicono = loadImage ("POMA.png");
  cistell = loadImage ("CISTELL.png");
  font = loadFont ("dogica.otf");
  
  for (i = 0; i < 3; i = i + 1) {
    x[i] = int(random(0, 400));
    y[i] = int(random(0, 400));
  }
  
}

function draw() {
  background(65,105,255);
  image (arbol, 120, -320, 500, 500);
  image (arbol, -200, -320, 500, 500);
  image (cistell, mouseX, 440, 100, 100);
  image (pomaicono, 10,10,30,30);
  
  textFont(font);
  fill(220);
  textSize (25);
  stroke(0);
  strokeWeight(3);
  text("x1",47,37);
  
  for (i = 0; i < 3; i = i + 1) {
    image(poma, x[i], y[i], 50, 50);
    y[i] = y[i] + 3;
    if (y[i] > 440) {
      y[i] = 0;
      x[i] = int(random(0, 400));
    }
  }
  
  var d = dist(poma.x, cistell.x, poma.y, cistell.y);
  
  if (d < poma.x + cistell.x) {
  print("hola");
  }
 
}

What I wanted to happen is that when an apple touches the basket (depending on the position indicated by the mouse) it could call out an option and there's I could put what I wanted to happen after

Answer 1

What you can do is work with circles. For example, an invisible circle on the apple and another on the basket; if they touch each other, you call the function that you wanted.

The way to check collision between circles is to analyse that the distance between their centers is less than the sum of their radii. I recommend to do the collision check in the same interaction as the movement.

Generally, pixel-by-pixel collision check is far too costly to the computer and to solve this problem.