anuraghazra / Verly.js

:red_circle::wavy_dash::large_blue_circle::wavy_dash::black_circle: Easy to integrate Verlet physics engine. :link:
https://anuraghazra.github.io/Verly.js
MIT License
663 stars 45 forks source link

is there some example or tutorial of rain and wind simulation with Verly.js? #12

Open augus1990 opened 3 years ago

augus1990 commented 3 years ago

hi! I would like to know please if there is some example or tutorial to simulate rain and wind using Verly.js?

thanks!

mreinstein commented 8 months ago

@augus1990 what do you have in mind? usually when I think of wind/rain effects they are simple isolated points or particles, which wouldn't really benefit from a verlet system. Do you have something specific in mind?

augus1990 commented 8 months ago

@augus1990 what do you have in mind? usually when I think of wind/rain effects they are simple isolated points or particles, which wouldn't really benefit from a verlet system. Do you have something specific in mind?

My objetive is to make a platformer video game with realistic fluids effects. Is Verly adequate for that?

mreinstein commented 8 months ago

My objetive is make platformer video game with realistic fluids effects

I would say if you just want to simulate rain and wind you can easily do that without verlet. A simple particle system that applies downward gravity, along with whatever wind force (probably just vertical left or right).

This is rough pseudo code, not runnable but gives you an idea of how you could do this:

const particles = [ ]

// add 1 rain particle at x, y.
particles.push({
   position: [ x, y],
   velocity: [ 0, 0 ],
   color: '#fff',
})

and somehere in your game loop:

const GRAVITY_FORCE = 10 // how much downward force to apply to the rain

let windForce = 0

for (const p of particles) {
    if (Math.random() < 0.1)  // roughly 1 in every 10 frames, calculate a new wind force
        windForce = randomInt(-2, 2)

   p.velocity[0] = windForce
   p.velocity[1] = GRAVITY_FORCE

   // update the rain particle's location
   p.position[0] += p.velocity[0]
   p.position[1] += p.velocity[1]

   // TODO: if the rain particle hits the ground, destroy it
}

Verly is useful when you want to define forces between particles, and make things like tires, cloth, ragdolls, etc.

augus1990 commented 8 months ago

My objetive is make platformer video game with realistic fluids effects

I would say if you just want to simulate rain and wind you can easily do that without verlet. A simple particle system that applies downward gravity, along with whatever wind force (probably just vertical left or right).

This is rough pseudo code, not runnable but gives you an idea of how you could do this:

const particles = [ ]

// add 1 rain particle at x, y.
particles.push({
   position: [ x, y],
   velocity: [ 0, 0 ],
   color: '#fff',
})

and somehere in your game loop:

const GRAVITY_FORCE = 10 // how much downward force to apply to the rain

let windForce = 0

for (const p of particles) {
    if (Math.random() < 0.1)  // roughly 1 in every 10 frames, calculate a new wind force
        windForce = randomInt(-2, 2)

   p.velocity[0] = windForce
   p.velocity[1] = GRAVITY_FORCE

   // update the rain particle's location
   p.position[0] += p.velocity[0]
   p.position[1] += p.velocity[1]

   // TODO: if the rain particle hits the ground, destroy it
}

Verly is useful when you want to define forces between particles, and make things like tires, cloth, ragdolls, etc.

@mreinstein Ok, I wanted to make realistic effects like rain water accumulating in ground for example. But now I understand Verly.js doesn't work with fluids. I thought Verly.js maybe has some API for SPH (Smoothed-particle hydrodynamics).

Thank you anyway!

mreinstein commented 8 months ago

Yeah, Verly doesn't have a notion of fluids. In fact the dots don't even collide with each other, which is usually how particles/fluids are simulated. Fortunately you can simulate this without a lot of complexity, either by integrating a "real" physics engine with a collision handling between spheres, or by rolling your own.