Interactivity- changing image upon click in P5js

hailruff

Hello, I'm trying to create an interactive page using p5js where you click on various images to change between them. The page starts out with 5 different images I have put in various places, and for each of those 5 images I have 3-4 alternative images to change between upon click. I have all of the different images loaded as different variables, and have tested all of the alternative images to make sure their varying sizes fit nicely in the same (x,y) placement of the original images. I am now stuck trying to make the interactivity happen- I tried starting out changing one of the images using the mousePressed() function, which worked for switching between just 2 images, but I want to randomize between the 3+ images upon click. I then tried making arrays for each of the 5 original images, and in those arrays were the options for the other images. I think this might work with the mousePressed() function as well, but I am having trouble with the syntax of randomizing images in an array upon click... also having trouble with the placement of the mouse for the click because these are not square images. Is there a way I can just have the conditional statement apply to clicking on the image itself rather than the x & y ranges? Also, I might be completely off with everything, should I even use arrays? If anyone has suggestions I would very much appreciate it because this seems like a big undertaking and I only just learned p5js about a month ago!

GoToLoop

That seems daunting... Just had the time to come up w/ an untested example for you to start out.
It assumes you've got a subfolder called "pics/" w/ exactly 25 ".png" images named from "0.png" till "24.png". I guess it's worth a try. Any doubts ask about them here. Good luck: [-O<

/**
 * Clickable Random Image Groups (v1.0.1)
 * GoToLoop (2016-Jun-02)
 *
 * forum.Processing.org/two/discussion/16944/
 * interactivity-changing-image-upon-click-in-p5js
*/

"use strict";

const IMAGES = 25, GROUPS = 5, QTY = IMAGES/GROUPS | 0,
      W = 200, H = 200, GAP = 50, BG = 0o350,
      FOLDER = 'pics/', EXT = '.png',
      pics = Array(IMAGES), inds = Array(GROUPS);

function preload() {
  for (let i = 0; i < IMAGES; pics[i] = loadImage(FOLDER + i++ + EXT));
}

function setup() {
  createCanvas(3*(W + GAP) + 2*GAP, 2*(H + GAP) + 2*GAP);
  imageMode(CORNER).noLoop();

  for (let img of pics)  img.resize(W, H);
  for (let i = 0; i < GROUPS; randomGroupPic(i++));
}

function draw() {
  background(BG);
  for (let i = 0; i < 3; ++i)  image(
    pics[i*QTY + inds[i]], i*(W + GAP) + GAP, GAP);
  for (let i = 0; i < 2; ++i)  image(
    pics[(i+3)*QTY + inds[i]], i*(W + GAP) + GAP + W/2, height - H - GAP);
}

function mousePressed() {
  randomGroupPic(~~random(GROUPS));
  redraw();
}

function randomGroupPic(group) {
  let idx = inds[group], rnd;
  while ((rnd = ~~random(QTY)) == idx);
  inds[group] = rnd;
}

blindfish

I'd personally try this outside of the canvas and do it directly with DOM elements: you can handle click events against these directly which should avoid the need for comparing mouse position in the canvas against image width/height.

Using arrays to store possible images at each location seems fine to me; though it's not clear whether you're happy for the same image to be repeated...