[Assistance Request] Dropping Circles into a cup, with larger ones causing smaller ones to "explode" outward

[macharborguy]

Hi, sorry for posting this as an "issue", but with this being the most central location for knowledge involving Matter.js, i figured id ask here to start.

I am working on a more customizable version of the Twitch.tv TipJars that groups like Muxy and StreamLabs have.

Basically, when a person donates to a Twitch broadcaster, the donation appears as either a "bit" (a diamond shape that reflects its value) or a chat emote. These are sprite images.

When larger value donations (which I will simply refer to as BITS) drop into the cup, they have a higher weight value and cause all of the lighter-weight BITS to fly out of the cup.

My first developmental attempt is VERY unoptimized, as i am not removing BITS that exit the rendering area.

http://robanddan.tv/physics.html

and here is an example GIF of what the Tip Jar looks like on stream: http://streamersquare.com/wp-content/uploads/2017/01/Streamlabs-Tip-Jar-Animation.gif

The smaller BITS in this test are dropped in every 500ms. Medium ones every 10 seconds, and the larger ones every 30 seconds. As you can see, everything appears to work except for the explosion of bits out of the cup.

I have a few ideas brewing in my head, but with my deep lack of experience in JavaScript physics engines, i wanted to get the opinions of those who have used Matter.js more, before I start working on code that I may get completely wrong.

Here are the settings/options i have set for each sized BIT.

Small BIT Bodies.circle(455,100,10,{ density : 0.000000001, frictionAir : 0.00001, restitution : 0.6, friction : -0.05, slop : 0 },8) Medium BIT Bodies.circle(430,100,20,{ density: 100000, slop : 0 },32) Large BIT Bodies.circle(440,50,30,{ density: 1000000000000, slop : 0 },32)

Any assistance would be GREALY appreciated, and I will be sure to give on air credit to those that can point me in the right direction.

PS: Both Muxy and StreamLabs obfuscate their source code to such a degree that it is next to impossible to look at their code for ideas of inspiration. This is fully understandable, but it does surprise me that no open sourced alternatives are available. Partly the reason I am looking to make my own, in addition to adding other ways for BITs to appear in the cup. Examples include: New Followers, new subs, Retweets, Hosting notifications, etc.

I also have an idea for when a bunch of BITS fly out of the cup, they could trip a "sensor" element, and if the number of them is above a set threshold (say, 40% of the BITS trigger the sensor), the whole simulation could slow down to 1/10th speed and make a nice slow-motion explosion of bits. HOWEVER, baby steps. Gotta make a nice explosion first before I dig deeper into crazier effects

PPS: The physical size of the circles in my test version will NOT reflect the final version. All of the circles/sprites/BITS will have the same physical size in the final version, just different densities.

[liabru]

Your approach looks like a good start so try it out. I'd suggest using far smaller values for density though (e.g. 0.1, 0.001, 0.00001). I'd also suggest using a v-shaped cup rather than a square one which should help them fly out. If this approach doesn't work well, consider artificially applying an upwards force (based on the density and maybe position of the new bit, basically a small explosion) to all bodies when the new body collides.

[macharborguy]

thanks for the suggestion about the upward force, already got some ideas bouncing (ha) around in my head about when and what bits to apply the force to.

ran into another issue, however, that I cant wrap my head around, however.

http://robanddan.tv/mason/index.html <- new test page address

When I create the circles with the following code wrapped inside of a setInterval with a 500ms delay...

Bodies.circle(
    _workspace.width / 2,
    -100,
    10,
    {
        density     : _density,
        frictionAir : 0.00001,
        restitution : 0.6,
        friction    : -0.05,
        slop        : 0,
        render      : {
            fillStyle : 'white',
            sprite      : {
                texture : 'http://robanddan.tv/mason/kappa.png',
                xScale  : 2,
                yScale  : 2
            }
        }
    },
    8
)

The sprite does not render what so ever. Also, regardless of what I set 'fillStyle' to be (even if the Sprite object is not there), the circles render as a white outline with no filled color.

I went to the Sprites demo, but with all the additional code tied into the Demo page itself, and having not taken a deeper look at things like Runner, Composite, etc, I am unsure if those modules are required for sprites to work or not.

[liabru]

The sprite does not render what so ever. Also, regardless of what I set 'fillStyle' to be (even if the Sprite object is not there), the circles render as a white outline with no filled color.

Ah, the reason is that you need disable wireframe rendering e.g. render.options.wireframes = false. Hopefully you figured that out though, so closing this.