#How can I create/replicate this type of animation?

27 messages · Page 1 of 1 (latest)

broken hemlock
#

Hello all! I was wondering if you guys might be able to help Me out. So TLDR, I'm looking to create/replicate this type of animation > see attached GIF, I was told that I might be able to do so via R3F/Three.js, am not 100% sure and that's why I'm here, just getting back into JavaScript/etc.. 😅 Anyway so, the circular light grey circle animation I think I can handle, but I'm really stuck on how I'd be able to do the red-line sort of, node(?) line animation which jumps around.

Would appreciate if someone can help Me out or give Me an example of how to replicate it, sorta.
Please & Thanks ❤️

Example.gif
broken hemlock
#

Anyone able to help? Prayge

formal stag
#

full trigo

#

use pure math use trigonometry

broken hemlock
#

Hmm? Could You elaborate?

formal stag
#

direction, radiant ...

broken hemlock
#

Hmm I see, do You know of any guides/etc..- that can get Me started?

#

Because I'm just getting back into JS/CSS and I dunno where to continue on from, lol

formal stag
#

what you need is
let angle = Math.atan2(y, x);

broken hemlock
#

I'm guessing that would be for the directions? Or the trigonometry itself?

formal stag
#

and reverse with sin and cos

#

is to get angle in radian from a position

#

and you need angle et distance to position

broken hemlock
#

Ohh okay

#

What does the radian mean by the way?; Is that to like, measure(?) the position and distance?

formal stag
#

x = radius * Math.cos(angle)
y = radius * Math.sin(angle)

#

radian is angle unit can be convert to degré

broken hemlock
#

Ah okay

formal stag
#

cos and sin work only with radians

#

but to do this animation
you have to make big function

broken hemlock
#

Yeah true, but hey it will make for a fun little project I guess 😅 Whilst trying to re-learn CSS/JS/etc..

formal stag
#

good luck is look like data representation

broken hemlock
#

Yeah I thought that as well

boreal prairie
broken hemlock
#

Update #1:

I've been able to make this so far, I think I have the "line drawing" part nailed, it's not perfect (yet) but I'm getting there. Slowly. Lol 😅 The timings are way off and still need to be adjusted.

I went a tiny off-track last night and decided to add a sort of, random-placement logic which adds > places white dots which then makes a circle as shown (See GIF), although I wanna change it so that they turn/transition into white lines which then will (hopefully) make the circle as shown in the original GIF.

Attempt_1.gif
broken hemlock