# Petals 2020 (for NY contest)

**URL:** <https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623>\
**Category:** Showcase\
**Tags:** points, shaders\
**Created:** [December 18, 2019, 7:41pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623 "2019-12-18T19:41:46Z")\
**Posts on this page:** 11\
**Page:** 1

<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:** [December 18, 2019, 7:41pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/1 "2019-12-18T19:41:46Z")

</div>

Hi, community!

Here is a picture:

 ![Petals2020](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7a251b123015998e70d3a329977f1dd66d308d93.png)

And here is a live demo:  
https://codepen.io/prisoner849/embed/preview/YzPWGRY?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=YzPWGRY

Partially inspired by visuals of Shangri-La locations from “Far Cry 4”.  
It was very pleasant to work on it. The scene consists of several elements: a circle mesh (ground), a loaded model of tree, two point clouds (one for tree flowers, another one for petals themselves).  
I like the result I achieve for that effect of imitation of floating petals in the whirl. It was created with shaping functions and rotation of UV coordinates (for more details, see the [prototype](https://www.shadertoy.com/view/3l3GzB)).  
Distribution of flowers on the tree became possible thanks to [`MeshSurfaceSampler`](https://rawcdn.githack.com/mrdoob/three.js/99b8caf90ffd380336ae835f9623dcb86c4b457b/examples/webgl_instancing_scatter.html) (from @donmccurdy 🤘), shaping and colouring are done in shaders.

The scene was made for the contest on this [discord server](https://discourse.threejs.org/t/discord-server-with-three-js/7901).

PS A short instruction: 1. Wait till it loads 100%, 2. See a soundcloud widget, 3. Click its “Play” button and enjoy. 🙂

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [December 18, 2019, 8:27pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/2 "2019-12-18T20:27:37Z")

</div>

Hey @prisoner849,

Looks awesome!

A couple of comments:

- I love the rotating petals, they looks very pretty
- I like animation on the ground, also lovely
- 2020 is not very clear, i suggest looking into it a bit more, add a faint text geometry around it or something, to make it easier for a human brain to see it as 2020
- Maybe add a bit of noise to the motion if you can 😛

Looks really magical as is, great job

---

<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:** [December 18, 2019, 8:36pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/3 "2019-12-18T20:36:05Z")

</div>

> [@Usnul](#):
>
> 2020 is not very clear, i suggest looking into it a bit more, add a faint text geometry around it or something, to make it easier for a human brain to see it as 2020

True, I had that idea with a slightly visible text-shaping mesh, but in the end I decided to leave it as is to keep it more abstract 🙂

---

<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:** [December 18, 2019, 8:36pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/4 "2019-12-18T20:36:38Z")

</div>

Another great thing for the New Year 👍 👍 👍

> [@Usnul](#):
>
> 2020 is not very clear, i suggest looking into it a bit more, add a faint text geometry around it or something, to make it easier for a human brain to see it as 2020

I wear 👓 and am not the youngest, but the 2020 is clearly in front of my mind. The new year is as relaxed as the tree blossoms.

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [December 18, 2019, 8:42pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/5 "2019-12-18T20:42:12Z")

</div>

![tenor](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fc1a5f8fa78f6a27fc7bdf1ab06c99627160fc7b.gif)

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 19, 2019, 2:45am UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/6 "2019-12-19T02:45:32Z")

</div>

Simply awesome !

---

<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:** [December 19, 2019, 7:35am UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/7 "2019-12-19T07:35:48Z")

</div>

@Usnul @hofk @ben @felixmariotto Thanks, guys 😉 🍻

---

<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:** [December 19, 2019, 11:59am UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/8 "2019-12-19T11:59:08Z")

</div>

> [@Usnul](#):
>
> I like animation on the ground, also lovely

Hey, Alex! 🙂  
I didn’t get what animation you mean. The ground stays still (so the scene a whole), it’s just camera’s `.autoRotate` is set to `true`. And `2020` follows the azimuthal angle of the camera on XZ plane 🙂

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [December 19, 2019, 1:40pm UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/9 "2019-12-19T13:40:37Z")

</div>

I mean the petals, they spin around on the ground. I figured that it’s all the same shader later, following your link to shadertoy. Great job 🙂

---

<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:** [December 20, 2019, 3:21am UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/10 "2019-12-20T03:21:23Z")

</div>

Very beautiful and serene 😌

By the way if you can’t see the 2020 letters easily you can try squinting or viewing through a tiny gap in your fingers.

---

<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:** [December 20, 2019, 8:56am UTC](https://discourse.threejs.org/t/petals-2020-for-ny-contest/11623/11 "2019-12-20T08:56:48Z")

</div>

> [@looeee](#):
>
> Very beautiful and serene

Thanks! 🍻

> [@looeee](#):
>
> viewing through a tiny gap in your fingers.

That’s what I did myself 😅