Display images randomly by clicking

p5.js Coding Questions
1

Hello,

I’m trying to display images (10 or more) randomly when you click on the canvas. At the moment there is only one image displayed, and I don’t know how to proceed for the rest. Should I use img(); or createImg(); ?

Here is my code: https://editor.p5js.org/NicolasTilly/sketches/dZUpAB3rd

Thanks for your help.

1 Like
2

Although it’s for Processing’s Java Mode, this article about arrays is very relevant for your code: :angel:

2 Likes
3

I changed my code :slight_smile:

let imgs = [];
function preload() {
  for (var i = 1; i < 10; i++) {
    imgs[i] = loadImage("assets/img_" + i + ".png");
  }
}

but displaying a random image at the click doesn’t work yet.

1 Like
4

In function mousePressed assign a random value to index and say image(imgs[index], mouseX,mouseY);

1 Like
5

something like that?

function mouseClicked() {
  var index = random([0,1,2,3,4,5,6,7,8,9]);
  image(imgs[index], mouseX, mouseY, 200, 360);
}
6

var index=int(random(9));

1 Like
7

Thank you! It’s working!

The result: https://editor.p5js.org/NicolasTilly/full/dZUpAB3rd

And the code:

let imgs = [];

function preload() {
  for (var i = 0; i < 10; i++) {
    imgs[i] = loadImage("assets/img_" + i + ".png");
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(245);
  imageMode(CENTER);
}

function mouseClicked() {
  var index=int(random(9));
  image(imgs[index], mouseX, mouseY, 200, 360);
}

function draw() {
}

function keyTyped() {
  if (key === 'a') {
    clear();
  }
}
2 Likes
8

not sure whether image #9 appears though?

9

you’re right, the image #9 doesn’t appears :confused:

And it’s very strange because, the code working on the editor, but in present mode the images do not load… The error in the console: “Failed to load resource: the server responded with a status of 404 ()”

10

I think use random with 10 as parameter

11

I don’t know. Did you upload the images as ressources?