Confine an SVG within an SVG?

[fd_alistair]

Hi there, I'm trying to build a game where you move an SVG up, down, left right, using cursor keys (let's say a blob), but when that blob touches the inner edge of another SVG (no matter what shape it is) it can no longer move beyond that edge.

Just wondering if this is possible with GSAP? - I know you can do collision detections with outer edges of SVGs...but not sure if possible for an SVG within an SVG?

 

Any help would be appreciated

Thanks

[_Greg _]

Hi @fd_alistair 

There is many variations for your idea

You can read forum about SVG and about Collision 

 

[fd_alistair]

15 minutes ago, _Greg _ said:

Hi @fd_alistair 

There is many variations for your idea

You can read forum about SVG and about Collision 

 

Thanks...so basically just go read a book? - I'd really like to know if this is possible first as there is nothing in the examples you have shared which demonstrates this.

[Cassie]

Thanks for sharing that thread Greg! @fd_alistair - This pen was in the thread he shared and shows collision detection with SVG elements - he wasn't telling you to go and read a book.

See the Pen xJepQx?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

If this isn't the setup you need would it be possible to expand on your question? Maybe you could knock up a minimal demo of the SVG setup so we can see what you need to accomplish?


 

[Shrug ¯\_(ツ)_/¯]

1 hour ago, fd_alistair said:

SVG (no matter what shape it is) it can no longer move beyond that edge. Just wondering if this is possible with GSAP?

 

The below linked thread has some things that may be helpful conceptually, however concerning GSAP inherently ...

 

On 4/22/2016 at 12:47 AM, GreenSock said:

No, sorry, irregular collision detection is not something GSAP handles. 

[fd_alistair]

7 minutes ago, Shrug ¯\_(ツ)_/¯ said:

 

The below linked thread has some things that may be helpful conceptually, however concerning GSAP inherently ...

 

 

Thank you! - that's exactly what I needed to know, I will try other methods

[_Greg _]

2 hours ago, fd_alistair said:

Thanks...so basically just go read a book?

There is two questions as i se:

• move svg with gsap - you can (on this forum you will find many answers and examples, its simple task for gsap)
• detect collision - you can (i sent a link with example of detection)

So if you will try and create a minimal demo we can give a more specific answer.
The same task you can create with pixi.js + gsap, three.js + gsap or native js 

[OSUblake]

4 hours ago, fd_alistair said:

Hi there, I'm trying to build a game where you move an SVG up, down, left right, using cursor keys (let's say a blob), but when that blob touches the inner edge of another SVG (no matter what shape it is) it can no longer move beyond that edge.

 

Yes, it's possible. It's just math. But it's not easy. Not only do you have to detect collision on every movement, but you have to figure out the response if there is a collision. Like how far to move the object back. And things get really tricky if your blobs have a concave parts in them. You have to break down your shapes into smaller areas.

 

Matter.js is a good library to check out. 

https://github.com/liabru/matter-js

 

And SAT.js

https://github.com/jriecken/sat-js

 

[fd_alistair]

23 minutes ago, OSUblake said:

 

Yes, it's possible. It's just math. But it's not easy. Not only do you have to detect collision on every movement, but you have to figure out the response if there is a collision. Like how far to move the object back. And things get really tricky if your blobs have a concave parts in them. You have to break down your shapes into smaller areas.

 

Matter.js is a good library to check out. 

https://github.com/liabru/matter-js

 

And SAT.js

https://github.com/jriecken/sat-js

 

Ok thanks for your help

[Shrug ¯\_(ツ)_/¯]

¯\_(ツ)_/¯ I was merely pointing out that nothing natively concerning such hit-tests with GSAP itself. In that linked thread I quoted above you will find many examples from Blake on the broader subject. Of course anything is possible, you can do all types of collision testing if you build the logic for it and then leverage GSAP for your animations, etc. Take the SVG Path Collider library for example.