Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

See original GitHub issue

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! ✌🥳

Issue Analytics

• State:
• Created 4 years ago
• Reactions:4

8reactions

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.

3reactions

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.

Top Results From Across the Web

Insert a picture into an AutoShape - Microsoft Support
Insert a picture into a shape · Click the shape for which you want to add a picture. · On the Format tab,...
Learn the basics of adding text and shapes in Adobe Photoshop, including how to add text to an image, edit text, create graphic...
How to Crop or Put a Picture or Image in a Shape Using Canva
In this video, I'll show you how to crop or put a picture or image in a shape Using Canva. Adding a picture...
Fill a Shape with a Photo in Photoshop 2022 - YouTube
Learn step-by-step how to place an image in a shape with Photoshop. This Photoshop 2022 update features new ways to speed things up, ......
How to insert a picture into a shape | Microsoft Word tutorials
Insert a picture into a shape with the easy to follow tutorial. Learn how to insert an image, crop it to any shape...

Troubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free