# Perlin Particles

**URL:** <https://discourse.threejs.org/t/perlin-particles/3603>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [July 30, 2018, 10:20am UTC](https://discourse.threejs.org/t/perlin-particles/3603 "2018-07-30T10:20:41Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [July 30, 2018, 10:20am UTC](https://discourse.threejs.org/t/perlin-particles/3603/1 "2018-07-30T10:20:42Z")

</div>

Is there an example or good hint how to achieve this in Threejs as well:

> **[\[Tutorial\] Particle Sea in Unity3D – Rafal Wilinski – Medium](https://medium.com/@rafalwilinski/tutorial-particle-sea-in-unity3d-70ff1350fa9e)**
>
> When I saw it, I was totally shocked. Firstly — it looked amazing, Secondly — it was playing smoothly in my browser on a non-high-end PC…

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [July 30, 2018, 1:36pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/2 "2018-07-30T13:36:01Z")

</div>

Did some tutorials and ended up with this - wasn´t that hard at the end…

```
    geometry.vertices.forEach(function(v) {
        var zPos = self._snoise2d(v.x * 0.2, v.z * 0.2) * 0.5; 
        v.y += zPos;
    });

    geometry.verticesNeedUpdate = true;
```

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [July 30, 2018, 1:37pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/3 "2018-07-30T13:37:09Z")

</div>

Now it would be “ace” to get a hint or tipp where to find an animated “ribbon” example as well…

---

<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:** [July 30, 2018, 1:43pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/4 "2018-07-30T13:43:04Z")

</div>

Hi!  
`THREE.Points()` with `THREE.PlaneBufferGeometry()` and `THREE.ShaderMaterial()` will help.  
Have a look at these topics:

> [@Grids of Waves (shaders)](https://discourse.threejs.org/t/grids-of-waves-shaders/1168):
>
> I just wanted to have a grid of quads, but couldn’t find an appropriate solution. So I’ve invented my own bicycle from THREE.PlaneBufferGeometry() and THREE.LineSegments(). [Waves] [https://jsfiddle.net/prisoner849/mcdtatpv/show/](https://jsfiddle.net/prisoner849/mcdtatpv/show/)

> [@Clouds of cubes](https://discourse.threejs.org/t/clouds-of-cubes/3218):
>
> Hi, community! slight_smile There is a picture of a scene: And here is a working demo: [https://jsfiddle.net/prisoner849/z7bn61jg/show](https://jsfiddle.net/prisoner849/z7bn61jg/show) Recently, I was surfing the Internet and bumped into one picture: They say, it possbly was made with the Houdini, a program for procedural generation. Looking at it, I thought if it’s possible to create something very similar with Three.js. I’ve never used instanced geometry and noise, so I deci…

“Clouds of cubes” has implementation of Perlin noise in shaders.

Or if you want Perlin noise at the side of javascript, take a look at this example:  
[https://threejs.org/examples/?q=terrain#webgl\_geometry\_terrain](https://threejs.org/examples/?q=terrain#webgl_geometry_terrain)  
or this one 🙂

> [@Three.js + noisejs](https://discourse.threejs.org/t/three-js-noisejs/3449):
>
> Hi, community! Here is a picture of a scene: And there is a working demo: [https://jsfiddle.net/prisoner849/omahwxLe/show](https://jsfiddle.net/prisoner849/omahwxLe/show) Cool story of creation slight_smile There are 3 factors, why this scene was created: A symphonic metal song (this is the main factor, yes); I’ve found an interesting [library](https://github.com/josephg/noisejs) for generating noise in javascript; That [forum thread](https://discourse.threejs.org/t/alphamap-texture-not-working/3440) Watching the video with the song, I’ve had a wish to create a flag, similar to one that shown in the video. Okay, so far…

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [July 30, 2018, 1:54pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/5 "2018-07-30T13:54:06Z")

</div>

All so cool, thank you - will have a look!  
You don´t have a proper and good example of how to animate Ribbons or CatmullRomCurve3 in Threejs too?

---

<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:** [July 30, 2018, 2:19pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/6 "2018-07-30T14:19:13Z")

</div>

> [@blackInk](#):
>
> how to animate Ribbons or CatmullRomCurve3

Sounds a bit enigmatic. Could you provide an explanatory picture with the desired result?

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [July 30, 2018, 2:23pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/7 "2018-07-30T14:23:31Z")

</div>

True!  
More something like those ribbons move in here:  
[https://www.airtightinteractive.com/demos/ribbons/](https://www.airtightinteractive.com/demos/ribbons/)

---

<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:** [July 30, 2018, 2:49pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/8 "2018-07-30T14:49:45Z")

</div>

You can easily have a look into the source code of this great example. 🙂

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [July 30, 2018, 2:59pm UTC](https://discourse.threejs.org/t/perlin-particles/3603/9 "2018-07-30T14:59:44Z")

</div>

Oh oh - mostly I don´t dare to do it cause today everything is bundled and minified… but will do. I was just hoping for some´ like an Threejs example or else that explains the “basics” if that makes sense…