Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Cassie

Christmas Bauble-physics (help)

Recommended Posts

Hey folks.

 

? Having a bit of trouble with how to approach this.

A client's asked for some x-mas baubles to "drop in all dangly" from the top of the screen, I've made a rough SVG of the structure of the bauble.

 

The 'string' is made of circles (and other shapes, like little ribbons and bells and stuff) instead of a path.

 

I was looking at the physics plugin, (in the attached codepen) But it kinda needs a bit of a bounce ease? And you can't mix physics and eases...

 

Has anyone done anything like this? Any ideas of a good approach?

See the Pen 91486890e1fe6b91fd9b71c9d88a95eb?editors=1010 by cassie-codes (@cassie-codes) on CodePen

Link to comment
Share on other sites

Yeah, that's really cool. Not quite what I need though.

I don't need to join them up with a path, and there's 20 baubles with 30 or so shapes on each 'string'... so I don't really want to have to hand code the x and y values for each shape.

 

I'll carry on experimenting!

(also blake is mad clever)

Link to comment
Share on other sites

If have a path, you can figure out where stuff would be located on that path for every animation frame. Google how to calculate points on a quadratic Bezier. That's what the path in the demo Mikel posted is using.

 

Sorry, I'm on mobile, or I would make a demo.

  • Like 3
Link to comment
Share on other sites

2 hours ago, Cassie said:

A client's asked for some x-mas baubles

TIL what a "bauble" is. We (very intelligently) call them "Christmas balls", hah.

 

It sounds to me like you want a chain. That'd probably be easiest to use a physics engine for; something like this: https://brm.io/matter-js/demo/#chains

  • Like 1
Link to comment
Share on other sites

Ok, here's a simple demo. If you can get a good looking path animation, then placing baubles shouldn't be too hard. You can use cubic beziers if needed, it just uses a different calculation.

 

See the Pen 7b238a209825cd951d768f41715b8fd7 by osublake (@osublake) on CodePen

 

 

  • Like 7
Link to comment
Share on other sites

12 minutes ago, OSUblake said:

You can use cubic beziers if needed, it just uses a different calculation.

 

And if you cubic beziers, you can use MotionPathPlugin to do the calculations.

  • Like 1
Link to comment
Share on other sites

31 minutes ago, ZachSaucier said:

It sounds to me like you want a chain. That'd probably be easiest to use a physics engine for; something like this: https://brm.io/matter-js/demo/#chains

 

This is little bit simpler than a full-blown physics engine.

https://subprotocol.com//system/verlet-hello-world.html

https://github.com/subprotocol/verlet-js

 

 

  • Like 4
Link to comment
Share on other sites

I'm not sure how fancy you want to be with all the wobbling and the string part, but sometimes you can use simple tweens with an elastic ease to get a decent effect: 

See the Pen 423ab27d771e09f17fec162766848a1c by GreenSock (@GreenSock) on CodePen

 

You could also do that just for the main Bauble and then use an onUpdate to handle bending the string accordingly to whatever the new position is. Just a thought. 

  • Like 5
Link to comment
Share on other sites

Thanks for all the help folks! 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×