Make a ball bounce inside a circle

[tardy fern]

Hello, I'm practicing my creative coding skills and I've seen on tiktok this animation where there's a ball bouncing inside of a circle, I would like to recreate it, but I'm struggling with the math behind it

I've made this sketch : https://editor.p5js.org/Superbot/sketches/Rzn-47m7u (you can click the play button on top left to see the animation) and right now the ball is bouncing on the borders, but I have no idea how to make it bounce inside the circle. I think it might have something to do with tangents, but I'm pretty bad at math (I do like math but it's really hard) and I would love some help!

I need to be able to detect when the ball hit part of the circle, and then be able to calculate its new trajectory

I hope this is fine to post here even though it's related to code and not just math, but I'm stuck and I have no idea where to get help otherwise.

Thank you!

[jovial stratus]

I see what's happening here lol

You need to set up a separate collision function for each circle, currently your just drawing the circles but there's nothing detecting collisions between them, if u properly integrate the collision, there's no need for tangent lines or complex geometry, just your initial x/y speed and some downwards force

[tardy fern]

I don't know how to setup the collision, the fact that it's a circle confuses me :c

[jovial stratus]

Oh xd

Take the radius of both, and as the endpoint of the smaller circles radius positions touched the bigger circles, return 1 to say a collision has occurred, use that return value in some loops to set new velocity values, usually by just timesing current x/y values by -1

It's not a super rigid or adaptive collision implementation, but it works in this use case

[tardy fern]

what's the formula to know if two circles touched ?
distance between the circles >= radius of both circles ?

but I won't know where the ball touched the circle

[jovial stratus]

Kay

So

First you check the distance between the center of both circles

Then check if the distance between both plus the radius of small circle is greater than or equal to the radius of the big circle

If distancd IS larger or equal to, times x and y velocities by -1 to switch direction

[tardy fern]

ohhh

okay that kinda works

https://editor.p5js.org/Superbot/sketches/Rzn-47m7u

but it's bouncing in the same direction forever

[jovial stratus]

oh

multiply by -0.95 or whatever number you want, any number between 0 and -1, doing that will slowly reduce the speed each time, just make sure to set x and y velocity equal to the multiplies version

I assumed you had a gravity variable or something, but if not just doint that works

closer to 0 the faster itll slow down

[tardy fern]

I want the ball to bounce forever but I would like for it to change direction, I don't know if I make sense

There are no other force involved yet

[jovial stratus]

oooh

uuuh, thats kinda hard honestly

[tardy fern]

that why I was thinking about tangents

[jovial stratus]

since by default the nature of a circle makes that challenging, you could randomize the x and y positive/negative i guess?

[tardy fern]

I'll give it a try

[jovial stratus]

kk

[tardy fern]

I'm not getting anywhere, I think I should convert cartesian coordinates to polar coordinates but I'm not sure how

[jovial stratus]

I mean your trying to do this without any loss of force or anything, which means its going to bounce back and forth between the same two points without any force being lost

mathematically, what your trying to accomplish isnt realistic and the computer is showing that, the only realistic way to do it is to simulate some accelerated force or energy loss

[tardy fern]

I don't want it to be realistic

I need to know at which angle the ball collide with the circle but I don't know how

[jovial stratus]

OH

have you ever taken a classical physics class?

[tardy fern]

no

[jovial stratus]

kay, well basically, you need to seperate the x and y velocities, then use inverse tangent(opposite/adjacent) to find the angle its going relative to 90 degrees in the direction your facing

then take the 90, minus your current angle, reverse x velocity and y using modulus 2 interchangebly each time, and set the new angle to the calculated one

I explained that horribly

[tardy fern]

i don't understand :c

[jovial stratus]

just search up circle collisions javascript on youtube, its hard to show you without just outright programming it for you

[tardy fern]

okay I will thank you 🙏

[jovial stratus]

np! just to do what you want you need to decompose the vector basically and do weird stuff with them

[tardy fern]

I looked up circle collisions javascript but it just tells me about pythagorean theorem and calculate distance between circles but not so much about decomposing vectors or angles

I'm gonna check this video it seems more in depth than the other https://www.youtube.com/watch?v=eED4bSkYCB8

[tardy fern]

It doesn't really cover my use case unfortunately, I still need help if someone familiar with this field of math/physics sees this

[tardy fern]

https://p5js.org/examples/math-and-physics-non-orthogonal-reflection/ this should be able to help me, I have to study vectors, matrix and the field of physics that's about reflection

I found a course on khanacademy I'll check it out

[tardy fern]

Well I'm still confused, I don't understand the method, and I'm struggling to find examples about this that would make me understand better, I read about Snell-Descartes law, but it's still blurry in my mind... I might juste give up