consider adding image shape type

Next to rectangles and ellipses, i’d love to see the option of using images as particle shapes.

One could use it with the standard shape array like [‘image’, ‘image’, ‘circle’] to accomodate for distribution of a single image next to common shapes. To get the single image source, it would be one way to just define it in the confetti object like:

confetti: {
  image: {
    source: 'URL',
    options: {}
  }
}

Another way could be defining a set of images in shapes as well: [‘images’]. Probability should fit the current system, but can be precised in its own child images’ property.

To define them we use another object inside confetti:

confetti: {
  images: [
    image: {
      source: 'URL',
      chance: 0.5
      options: {}
    },
    image: {
      source: 'URL',
      chance: 0.5
      options: {}
    }
  ]
}

Thanks for this awesome project which looks by far the best! ✌🥳

[catdad]

Okay, so I am just thinking out loud here… You got me thinking when I read this issue, and obviously, I made this:

But as much as I think that is super cool, there are some real problems. With rectangles and circles, we can do some very basic math and then draw an exact shape on the canvas. With anything else (and I played around with the idea of images, paths #81, and text #82), we need to relinquish all transformation to the canvas, which can be quite costly. In the example image above, the animation crawled… we are talking like 7fps.

I am going to need to think about this a bit more and see if I can come up with something that performs well.

[catdad]

I am not ruling that option out. I have been playing with it in the #117-sprites branch (and created #117 to track this issue). I am not too happy with it yet though. Even generating several sprites and randomizing the starting frame, I am not getting the kind of variation I want. The performance is pretty good though.