let img
let engine = Matter.Engine.create()
let objs = []
let imgScale

async function setup() {
  img = await loadImage('')
  createCanvas(
    windowWidth,
    windowHeight,
    WEBGL
  )

  imgScale = min(width, height) * 0.5 /
    max(img.width, img.height)

  const ground = Matter.Bodies.rectangle(
    0,
    height/2 + 30,
    width,
    60,
    { isStatic: true }
  )
  const wallLeft = Matter.Bodies.rectangle(
    -width/2 - 30,
    0,
    60,
    3 * height,
    { isStatic: true }
  )
  const wallRight = Matter.Bodies.rectangle(
    width/2 + 30,
    0,
    60,
    3 * height,
    { isStatic: true }
  )
  Matter.World.add(
    engine.world,
    [ground, wallLeft, wallRight]
  )
}

function draw() {
  clear()

  if (frameCount % 10 === 0) {
    const obj = Matter.Bodies.rectangle(
      random(-width/2, width/2),
      -height/2 - img.height * imgScale,
      img.width * imgScale,
      img.height * imgScale
    )
    Matter.Body.setAngle(
      obj,
      random(2 * PI)
    )
    Matter.Body.setAngularVelocity(
      obj,
      random(-0.1, 0.1)
    )
    Matter.Body.setVelocity(
      obj,
      { x: 0, y: random(5) }
    )
    Matter.World.addBody(
      engine.world,
      obj
    )
    objs.push(obj)
  }

  Matter.Engine.update(
    engine,
    1000 / frameRate()
  )
  imageMode(CENTER)
  for (const obj of objs) {
    push()
    translate(
      obj.position.x,
      obj.position.y
    )
    rotate(obj.angle)
    scale(imgScale)
    image(img, 0, 0)
    pop()
  }
}