Create pulse animation and beating heart

Questions
,
1

Good day everyone!

Here is the design of how this should look:

ex
ex1752×425 401 KB

The pulse should be depends on audio that will be generated. The main problem that i don’t understand is how to make particles like that.

Is there any ideas how to create this kind of effect?

2

Hi!

Like what?
If you want particles in formation of a heart, then you can:

  • Create a model of a heart in a software like Blender, export and load it, and use its vertices for THREE.Points()
  • Use a sphere geometry with a slight shifting of its vertices on a sphere surface and then deform the sphere, making a heart
  • Deform a sphere geometry to a heart, then use MeshSurfaceSampler (an example of its using) for random distributing of particles on the surface of the heart

And for connecting particles with lines, take a look at this example: three.js examples

Creativity is up to you :slight_smile:

5 Likes
3

Thank you for ideas! I realized how to make heart. But what about sound line behind heart? It is also need to be dependable on beat data of the sound. Big troubles with this… How to make those lines to curve like that, sounds like smth impossible for me T_T

4

There’s a good example :slight_smile:
https://threejs.org/examples/?q=audio#webaudio_visualizer

2 Likes
5

thank you! great example! and what about that shiny dots on the heart, i’ve created 3d model of a heart, and can access each sphere individually… i’ve tried to create point lights to each of them, so then can shine, but it cause an error, any ideas?

6

You can also do Karaoke.

I don’t know anything about music, but for a friend I did a test in 2018.
There are also some links.

A simple test result (Firefox only) is in the Collection of examples from discourse.threejs.org

see https://hofk.de/main/discourse.threejs/2018/Xindex2018.html

see Audio Recording Audio Recorder

7

thank you! i’ll try it!

8

That’s not going to work. You should aim for only a couple of lights in the scene in total or performance will be terrible.

9

yeah, i’ve already understood that, cause my browser crashed several times :smiley:

Any advices?

10

Use bloom or selective bloom effects: https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom_selective

Some examples of the using of bloom: Sci-fi Scene that I made, Bokeh & Unreal Bloom Website header or something

Some examples of the using of selective bloom: Totentanz (Selective Bloom), Robeast (selective bloom), Nocturnal (selective bloom)
Also, take a look at this cool option from @looeee: Selective UnrealBloomPass issues

2 Likes
11

Yeah, I think a selective bloom pass would be the easiest way to get the shiny dots.

However, you might run into a problem with anti-aliasing due to all the small thin lines. When you use a post-processing effect (at least with WebGL1) you have to disable the built-in AA and use a post AA pass such as FXAA or SMAA.

In my experience these don’t always give nice results with thin lines. The examples I was testing with were architectural models so the lines were largely vertical and horizontal, you might have better luck here since your lines are at many angles and animated.

By the way @prisoner849, your selective bloom examples don’t use AA at all, right? They look surprisingly clean considering.

2 Likes
12

No, I don’t use AA. It’s noticeable (at least for me) on the lines of the spider web in the Totentanz scene.

1 Like
13

Yes, but less than I would expect. Probably I’m just so in awe of the cool scenes that I don’t notice the jaggies :wink:

1 Like
14

In the Nocturnal scene I’ve got horrible steps-like contours for the “ramp buildings”, when I’ve put them before the “flat building”, so I’ve just put them on the very background and made them as darken as possible :slight_smile: That’s the trick :slight_smile:

2 Likes
15

Thanks! I’ll try it!