Question

我想每次单击鼠标时在画布上绘制一个随机图像。

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>

控制台： p5.js说：image（）期望参数＃0（基于零的索引）的p5.Image | p5.Element，而是接收数组。

没有图像出现，并且该错误不断弹出。

我一直在看这个类似的问题，但似乎无法在上述问题中解决： stack question。以及编码序列vid和p5示例。

Answer 1

您需要一个新变量来引用从三个图像数组中随机选择的图像。

将以下行添加到代码的顶部

var randomImageLocation

换行

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

到

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

然后更改行

let img = random('img')

到

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

然后在mouseClicked函数中使用randomImageLocation变量代替img

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

有关从数组Getting a random value from a JavaScript array中选择随机元素的更多详细信息，请参见此问题。

p5js图像阵列

1 个答案: