Jump to content
Search Community

Christmas Bauble-physics (help)

Cassie test
Moderator Tag

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

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

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.
×
×
  • Create New...