Small balls in a big circle (demo in Hype Pro video)


I try to put small dynamic balls inside a big static ball and wish it to run like the one in Hype Pro intro video, but not work, small balls does not roll inside the big ball, are there any tricks?


To do this, create static physics bodies around the area you wish to contain:

Here’s the example: (41.8 KB)


I feel this is very misleading. The video teaser gives the impression this is much easier than it really is. I really feel the teaser was “HYPED”. I know, you’ve heard that one before.

I'm sorry you feel that way, Ray. I feel like we've integrated a pretty complex set of interactions (Physics, based on Matter.js) into a very easy to use GUI. Copying and pasting static bodies is not a difficult thing to do to create this type of physics container.

And we had a lot of fun making these!


Hi Daniel,

I was playing balls with gravity, and I found your castle example has the same issue, when I preview with iOS safari(iPad3),it seems a very short of the beginning is gone, just like when I load your castle example, I don’t see cannon fire, it jumps to brick fall on ground directly.

Is it because the device is slow or we need a preloader?

I may be naive, but I just assumed the physics interface would recognize actual vector edges. When I realize I have to create a multi-element “cage” to create a static, curved container, I’m a little disappointed. I’ll get over it. I have LOTS of questions about buiding a “physics-based” animation. Where can I go for help? The “Element Physics” section in Documentation seems pretty lean. For example: I have several circular symbol instances set as “Dynamic”. How do I get them to actually touch while animating? They include a drop shadow.

Looks like the future implementation of Matter.js could be fun with chains ect. or is this possible now?

What exactly are you trying to do with the elements in the animation?
Here is a basic circle bouncing physics animation but not sure if you are trying to have your elements work on a path change timelines etc.
I would be happy to help you out. (20.6 KB)

The iPad 3 doesn't perform well with graphics at all. While I'm not normally the kind of person who blames the device (we want Hype animations to be very performant) the iPad 3 is notably slow.

One part of that documentation that might help you:

Dynamic elements will not interact with other physics bodies within other symbols. Physics bodies within a symbol will likewise not interact with bodies outside of the symbol.

So if you have separate symbols, each represents its own Physics world. They won't be able to interact with each other.

Can you share your document and explain what you're trying to do?

Here is my file. I would like the “red blood cells” to act more randomly and fill in the space. Very early experiments with physics options. Now I realize I’ll need to build a “static cage” instead of relying on the curved SVG shapes. (32.1 KB)

The one thing that you want to do is to make each element have it’s own physics air drag, bounce and density that will give each one a different way to fall.
Second make your static elements out of circles if you can it gives you more individual bumps on a surface and can create some interesting ricochets.

I kept the fill and stroke on the wall cells and then I removed the fill and strokes on the valve cells.
This way you can get the blood cells to interact closer with the curve of the valve drawing.
To see how those are built just ungroup a valve and fill in the circles to see how they are stacked.

I have also included 2 experimental pieces I made based on a Galton Box.
This shows how you can distribute the friction of the physics elements and also make them either float or drop.

You will notice a couple of balls escape and this is a bug in Hype. If the bounce is too strong and the static physics body is the same width or less than the width of your dynamic element the dynamic element will break through sometimes.

The big take away is there are ways to make your physics work for you with the basic elements.
Then save those structures as symbols or groups and reuse them later to speed up your process.

HTML5 and polygonal collision tools are still in their infancy. Many of the javascript game engines are using simple bounding boxes. I definitely like the circle approach. Pointillism with physics :wink: (31.0 KB)

Galton (140.2 KB) Galton (78.8 KB)

1 Like

Here is another one,
depending on your friction settings for the static wall cells you can make it slicker or stickier.
Adjusting the position and all the characteristics you could get the ball to “fall” around a path that at times goes uphill and down hill. (21.1 KB)

1 Like