Particle-like Background Difficulty

Questions
1

Hello Everybody,

I hope you are having a good day.

Let me preface this post by mentioning that I am still a complete newbie to the general field of web design, and I only recently started experimenting with babylon.js. So far, my experiences have been quite enjoyable, and I am gradually getting used to the different terminology. I was previously getting used to three.js before discovering babylon.js.

Now, onto my issue. I am interested in creating my own personal website (much to the dismay of many web designers, I am sure). While it likely won’t see the light of anyone else’s monitors or phones, it is a source of immense interest. In my ever-expanding quest to find inspiration and ideas I stumbled upon this French web designer website https://www.lahautesociete.com/

To say the least, I am utterly enthralled by their shifting background, the waves that protrude from the center, and the particles/twisted grid rotating around their symbol. As a result, I have decided to take the tall task of creating a similar background. I have a multitude of modifications in mind, some feasible, and some highly unlikely. The main difficulty I am having is trying to find the general description of what exactly this effect is (for further research and analysis) and what exactly this type of background would be called? A particle mesh seems like it could be in the right direction, but I can’t find much with more similarities.

Through some research on my issue, I did find particles.js - A lightweight JavaScript library for creating particles ,which has some similarities to the website background in question. The main difference is that the points and lines cross each other. This single point stumped me quite a bit along with the fact that the interactive options that were listed only pertained to the mouse, rather than a separate object which could have a similar repulse mode. This has made me think that I will likely have to create my own totally custom particle system, which is NOT an issue. I enjoy the challenges and the general process of creating things.

Honestly, my issue likely stems from my lack of experience. This is either something far ahead of me, or it is something I have overlooked for thinking it is more difficult then it is.

To summarize, I would like someone to help point me in the right direction. Definitely not asking anyone to do the actual process of design.

Apologies for this lengthy post and maybe not 100% accurate or up to date terminology. Thank you for reading this far and thank you to those who reply. This slightly overreaching newbie looks forward to developing a beautiful background and I hope this silly question isn’t too silly.

Lastly, is this a good amount of detail for a post, or should I be utterly straight to the point next time?

2

Hi @Kailen and welcome to Babylon.js and the forum. Hope this playground (PG) is useful.

Note in particular the use of setting the mesh to updatable to enable vertex positions to change line 29, the use of clones Line 30, wireframe material line 33 and pointsCloud material line 38.

It shows in principle how your project could be achieved. Of course you would need to build your own custom mesh and do your own calculations to move the vertices.

Useful docs would be
https://doc.babylonjs.com/how_to/custom
https://doc.babylonjs.com/how_to/updating_vertices
https://doc.babylonjs.com/snippets/increasing_facets

Start small and build slowly. As you progress and especially if you have questions post a playground focusing on your success or the issue you have. Good luck and we look forward to seeing your project develop.

No need we have a wide range available https://doc.babylonjs.com/features/particles

4 Likes
3

Hello @JohnK,

Thank you for your reply, and I am quite glad to have joined the forum. This is a very active community that I look forward to being a part of.

Yes, the playground you provided does show in principle how I could achieve the effect I am looking for. It will be a lot of fun to tinker with the different vertex positions and do some calculations. The docs you provided are also quite helpful, and I am sure I will be referencing them a lot.

Thank you for the advice, and I will return to the forum and post my playground once I have any questions or to show my success/progress. Not to sound like a broken record but thank you once again. I would have likely been stuck on this for quite a while longer without your help.

Have a good day!

4

You will find great particle examples (made with Babylon.js) at Naker.back - Free Interactive Backgrounds For Your Website .

For the final effect of your example (like wave or water drop) you may have a look at https://codepen.io/ge1doot/pen/VYXGoo
Please note, that you can use 2D canvas inside Babylon 3D canvas; or change (deform, scale etc) your whole canvas with the means of CSS or JS too.

1 Like