# Points Animation + AI Image Generation

**URL:** <https://discourse.threejs.org/t/points-animation-ai-image-generation/78723>\
**Category:** Showcase\
**Tags:** points, animation\
**Created:** [February 27, 2025, 9:06am UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723 "2025-02-27T09:06:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anton\_Sheptunov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anton_sheptunov/32/57172_2.png) [@Anton\_Sheptunov](https://discourse.threejs.org/u/Anton_Sheptunov)\
**Post date:** [February 27, 2025, 9:06am UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/1 "2025-02-27T09:06:02Z")

</div>

Hi everyone!

I’ve been trying to animate some points and here is what I’ve got so far:  
[https://asheptunov.ru](https://asheptunov.ru)

You can switch between animations by clicking the tabs at the top and the controls.  
Also the “Colors” tab will allow you to generate AI image with your prompt and will apply it to the points.  
Animations are realtime and may take some performance so there is a lighter version of it with less points: [https://asheptunov.ru/?mode=lite](https://asheptunov.ru/?mode=lite)

 ![Screenshot_3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/8/c826471a2c7f924022c976a43d407da5ce68b5eb.jpeg)  
 ![Screenshot_2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/e/9efb8408ddba57607f1fe1949c50841b1836088e.jpeg)

---

<div class="post-metadata">

**Author:** ![ThisIsBacya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thisisbacya/32/55151_2.png) [@ThisIsBacya](https://discourse.threejs.org/u/ThisIsBacya)\
**Post date:** [February 28, 2025, 6:10am UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/2 "2025-02-28T06:10:18Z")

</div>

Hi! It’s very beautiful. Do you have a source code? And what optimization methods did you use?

---

<div class="post-metadata">

**Author:** ![Anton\_Sheptunov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anton_sheptunov/32/57172_2.png) [@Anton\_Sheptunov](https://discourse.threejs.org/u/Anton_Sheptunov)\
**Post date:** [February 28, 2025, 7:43am UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/3 "2025-02-28T07:43:22Z")

</div>

Hi! Thank you for your comment.  
I didn’t post the project on github or smth but you can check it out in brouser console, the code is not confuscated.  
Well, in terms of optimization the main issue was to reduce the number of calculations made for each point in each frame. Most operations are performed not every frame but a certain number of times per second. There is also a fuse that starts skipping points in the animation loop when the fps drops below a certain value.

---

<div class="post-metadata">

**Author:** ![ThisIsBacya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thisisbacya/32/55151_2.png) [@ThisIsBacya](https://discourse.threejs.org/u/ThisIsBacya)\
**Post date:** [February 28, 2025, 8:14am UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/4 "2025-02-28T08:14:01Z")

</div>

Thank you very much!

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [February 28, 2025, 12:32pm UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/5 "2025-02-28T12:32:30Z")

</div>

Great idea, I like it !

Here is something similar, for inspiration 🙂

> **[DustSim](https://www.kodub.com/apps/dustsim)**
>
> Simulate millions of independent particles in realtime with this physics sandbox.

---

<div class="post-metadata">

**Author:** ![yesbird](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yesbird/32/46097_2.png) [@yesbird](https://discourse.threejs.org/u/yesbird)\
**Post date:** [February 28, 2025, 12:46pm UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/6 "2025-02-28T12:46:20Z")

</div>

And maybe you have seen these examples, but if not, they can help:

[https://threejs.org/examples/?q=gpu#webgpu\_tsl\_compute\_attractors\_particles](https://threejs.org/examples/?q=gpu#webgpu_tsl_compute_attractors_particles)  
[https://threejs.org/examples/?q=gpu#webgpu\_skinning\_points](https://threejs.org/examples/?q=gpu#webgpu_skinning_points)

---

<div class="post-metadata">

**Author:** ![Anton\_Sheptunov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anton_sheptunov/32/57172_2.png) [@Anton\_Sheptunov](https://discourse.threejs.org/u/Anton_Sheptunov)\
**Post date:** [February 28, 2025, 1:08pm UTC](https://discourse.threejs.org/t/points-animation-ai-image-generation/78723/7 "2025-02-28T13:08:07Z")

</div>

Thanks! Yeah, saw them, but couldn’t use some webgpu features couse it’s API was not fully supported.