# Create pulse animation and beating heart

**URL:** <https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857>\
**Category:** Questions\
**Tags:** animation, geometry\
**Created:** [January 5, 2020, 6:42am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857 "2020-01-05T06:42:17Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Insane](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/insane/32/6738_2.png) [@Insane](https://discourse.threejs.org/u/Insane)\
**Post date:** [January 5, 2020, 6:42am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/1 "2020-01-05T06:42:17Z")

</div>

Good day everyone!

Here is the design of how this should look:

 ![ex](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/90d0ff352418c3c29764574903c8b63b8b5ce73e.png)

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?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 5, 2020, 8:06am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/2 "2020-01-05T08:06:34Z")

</div>

Hi!

> [@Insane](#):
>
> to make particles like that

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`](https://threejs.org/examples/?q=scatter#webgl_instancing_scatter) (an [example](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623) 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](https://threejs.org/examples/?q=drawrange#webgl_buffergeometry_drawrange)

Creativity is up to you 🙂

---

<div class="post-metadata">

**Author:** ![Insane](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/insane/32/6738_2.png) [@Insane](https://discourse.threejs.org/u/Insane)\
**Post date:** [January 8, 2020, 10:25am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/3 "2020-01-08T10:25:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 8, 2020, 10:51am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/4 "2020-01-08T10:51:23Z")

</div>

There’s a good example 🙂  
[https://threejs.org/examples/?q=audio#webaudio\_visualizer](https://threejs.org/examples/?q=audio#webaudio_visualizer)

---

<div class="post-metadata">

**Author:** ![Insane](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/insane/32/6738_2.png) [@Insane](https://discourse.threejs.org/u/Insane)\
**Post date:** [January 9, 2020, 6:59am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/5 "2020-01-09T06:59:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 9, 2020, 8:31am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/6 "2020-01-09T08:31:49Z")

</div>

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.

> [@\[Solved\] Example of audio recording?](https://discourse.threejs.org/t/solved-example-of-audio-recording/3386):
>
> A friend (He’s a musician musical_score and he can program a little.) who saw my three.js examples asked me if I could also include a music recording with the microphone. Since I’m not musical, I never looked afterwards. I looked and found this: [Web Audio API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)[javascript - HTML5 record audio to file - Stack Overflow](https://stackoverflow.com/questions/16413063/html5-record-audio-to-file)[three.js docs](https://threejs.org/docs/) (and enter audio in the filter) [https://threejs.org/examples/#webaudio\_visualizer](https://threejs.org/examples/#webaudio_visualizer) Not to mention the musical cow: [JSFiddle](https://jsfiddle.net/prisoner849/z7bn61jg/show) But I don’t see an …

A simple test result (Firefox only) is in the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

see [https://hofk.de/main/discourse.threejs/2018/Xindex2018.html](https://hofk.de/main/discourse.threejs/2018/Xindex2018.html)

see Audio Recording [Audio Recorder](https://hofk.de/main/threejs/audioBasic/index.html)

---

<div class="post-metadata">

**Author:** ![Insane](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/insane/32/6738_2.png) [@Insane](https://discourse.threejs.org/u/Insane)\
**Post date:** [January 9, 2020, 10:59am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/7 "2020-01-09T10:59:08Z")

</div>

thank you! i’ll try it!

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 9, 2020, 11:30am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/8 "2020-01-09T11:30:15Z")

</div>

> [@Insane](#):
>
> i’ve tried to create point lights to each of them

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.

---

<div class="post-metadata">

**Author:** ![Insane](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/insane/32/6738_2.png) [@Insane](https://discourse.threejs.org/u/Insane)\
**Post date:** [January 9, 2020, 11:32am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/9 "2020-01-09T11:32:58Z")

</div>

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

Any advices?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 10, 2020, 10:49am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/10 "2020-01-10T10:49:23Z")

</div>

Use bloom or selective bloom effects: [https://threejs.org/examples/?q=bloom#webgl\_postprocessing\_unreal\_bloom\_selective](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom_selective)

Some examples of the using of bloom: [Sci-fi Scene that I made](https://discourse.threejs.org/t/sci-fi-scene-that-i-made/9176), [Bokeh & Unreal Bloom Website header or something](https://discourse.threejs.org/t/bokeh-unreal-bloom-website-header-or-something/10318)

Some examples of the using of selective bloom: [Totentanz (Selective Bloom)](https://discourse.threejs.org/t/totentanz-selective-bloom/8329), [Robeast (selective bloom)](https://discourse.threejs.org/t/robeast-selective-bloom/11098), [Nocturnal (selective bloom)](https://discourse.threejs.org/t/nocturnal-selective-bloom/11761)  
Also, take a look at this cool option from @looeee: [Selective UnrealBloomPass issues](https://discourse.threejs.org/t/selective-unrealbloompass-issues/9331/12)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 10, 2020, 11:01am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/11 "2020-01-10T11:01:36Z")

</div>

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](https://threejs.org/examples/#webgl_postprocessing_fxaa) or [SMAA](https://threejs.org/examples/webgl_postprocessing_smaa.html).

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 10, 2020, 11:05am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/12 "2020-01-10T11:05:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 10, 2020, 11:15am UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/13 "2020-01-10T11:15:07Z")

</div>

> [@prisoner849](#):
>
> It’s noticeable (at least for me) on the lines of the spider web in the Totentanz scene.

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 😉

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 10, 2020, 12:12pm UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/14 "2020-01-10T12:12:46Z")

</div>

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 🙂 That’s the trick 🙂

---

<div class="post-metadata">

**Author:** ![Insane](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/insane/32/6738_2.png) [@Insane](https://discourse.threejs.org/u/Insane)\
**Post date:** [January 10, 2020, 1:58pm UTC](https://discourse.threejs.org/t/create-pulse-animation-and-beating-heart/11857/15 "2020-01-10T13:58:50Z")

</div>

Thanks! I’ll try it!