p5js Image Array

Question

I would like to draw a random image to the canvas every time the mouse is clicked.

let img = []

function preload(){

  for (let i = 0; i < 3; i++) {
    img[i] = loadImage('img/img' + i + '.png')
  }
  
}

function setup() {
  createCanvas(windowWidth, windowHeight)
  background(200, 255,255 )
  let img = random('img')  
  
}
 
function draw() {

}

function mouseClicked() {
  image(img,200, 200, 50, 50)
  
}

<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>

<body>
  

</body>

</html>

Console: p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received array instead.

No image appears and that error keeps popping up.

I have been looking at this similar question but can't seem to figure it out in my own issues above: stack question. As well as a coding train vid and the p5 examples.

Adnan S · Answer 1 · 2018-07-08T16:17:29.030

0

You need a new variable to refer to a randomly selected image from your array of three images.

Add following line to the very top of your code

var randomImageLocation

Change line

img[i] = loadImage('img/img' + i + '.png')

to

img[i] = 'img/img' + i + '.png' // store the image location in array only

then change line

let img = random('img')

to

randomImageLocation = img[Math.floor(Math.random() * img.length)];

then in the mouseClicked function use the randomImageLocation variable instead of img

let randomImage = loadImage(randomImageLocation)
image(randomImage,200, 200, 50, 50)

See this this question for more details on selecting a random element from an array Getting a random value from a JavaScript array

edited Jul 08 '18 at 16:17

answered Jul 08 '18 at 15:33

Adnan S

1,852
1
14
19

Thank you, how should I define myArray and randomImage ? "ReferenceError: myArray is not defined", "ReferenceError: randomImage is not defined" – Howzit Jul 08 '18 at 15:40
See updated code above that should take care of the myArray error. Where are you getting the randomImage not defined error? Can you tell which line? – Adnan S Jul 08 '18 at 15:43
The updated code removed the error! Getting the randomImage error on ' image(randomImage,200, 200, 50, 50)' – Howzit Jul 08 '18 at 15:47
Updated answer once more for the randomImage error. I should have defined randomImage as a global variable at the top of the code instead of inside your setup function. – Adnan S Jul 08 '18 at 15:50
Getting the same error: p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received an empty variable instead. If not intentional, this is often a problem with scope: – Howzit Jul 08 '18 at 15:54
Ok - final edit - if it does not work, I am afraid you need another person to help you – Adnan S Jul 08 '18 at 16:02
Thanks for your help so far, a new error (the errors seem to always link to the library): p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received string instead. [http://p5js.org/reference/#p5/image] – Howzit Jul 08 '18 at 16:08
did you make all the changes in my edited answer - that's all I can think of to get your code to work – Adnan S Jul 08 '18 at 16:12
Yes no more errors, just the images are not appearing on click :) – Howzit Jul 08 '18 at 16:30
Try adding the line 'draw()' as the last line in the mouseClicked() function – Adnan S Jul 08 '18 at 17:05

p5js Image Array

1 Answers1

Linked