lilgallon / particles.js

✨ An easy way to make your website look sexy.

Former student of:

• 🇫🇷 Bordeaux Institute of Technology
• 🇫🇷 University of Bordeaux
• 🇺🇸 University of California, Santa Cruz.

I’ve got some experience in every domain of computer science . I am currently focusing on kotlin (couroutines and advanced features).

---

Experiment: Dynamic LED Strips

A C# software that connects any Bluetooth LED Strip to your computer using Bluetooth LE. The color and brightness then change according to your activity. Dynamic Led Strips. A bit like Philips Hue but for any BLE-compatible device.

My Minecraft Mods

Developer of Dofus Mage Calculator

• 150 daily users: https://gallon.dev/dofus-tools/forgemagie.html
• 10k total users
• 100k impressions

---

⚡ Latest Releases

🎁 Project	📝 Description
Daily Wallhaven Wallpaper 1.0.0	A script that changes your wallpaper everyday by picking one on Wallhaven
BettercolorsEngine 1.1.0 (published on maven central)	The Engine of the Minecraft mod Bettercolors. Can be used for anything else that requires an automatically generated GUI
LatencyMod 0.1.0	A Minecraft mod that displays your latency
Aim Assistance Mod 1.3.0	A Minecraft mod that helps you aiming
Bettercolors 7.3.0	A Minecraft assistance mod
Quick Search Mod 1.0.0	A Minecraft mod to search for items
Horse Stats Mod 1.3.1	A Minecraft mod that shows the statistics of the ridden horse
Anvil Tooltip Mod 1.0.0	A Minecraft mod that shows the number of anvil uses as well as the repair cost of an item
Dynamic Led Strips 0.1.0	A program that takes control of cheap Led Strips controllers to make them look expensive

⚡ Recent Github Activity

1. 🎉 Merged PR #10 in lilgallon/HorseStatsMod
2. 🗣 Commented on #10 in lilgallon/HorseStatsMod
3. 🗣 Commented on #10 in lilgallon/HorseStatsMod
4. ❗️ Closed issue #93 in lilgallon/Bettercolors
5. 🗣 Commented on #93 in lilgallon/Bettercolors

⚡ Github Stats

⚡ EVEN MORE statistics (since September 2020)

Yeah, I like Windows

---

Where to find me

Also [email protected]

particles.js's Issues

Add a loader

Here are the loaders: https://connoratherton.com/loaders
I have to check if it is worth it to put it in

the canvas size is not adjusted correctly if an other unit than "px" is used to define its height and its width

The canvas sometimes do not fit perfectly the parent container

Add mobile browser detection

Here is an idea on how to do it :
https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

Particles are blag with MS Edge

Improve mouse interaction by adding an option

Often, the canvas in put under other containers, and so, the mouse interaction is ignored. To prevent this, we could provide an option to define the container id with which the mouse interaction will be set.

It needs an optimization

What is happening:

• Iteration over all the particles to update them, O(n)
• Iteration over all the particles, then for each particle, we iterate over all the particles except this one to draw springs, O(n*(n - 1))
• Iteration over all the particles to draw them O(n)

We can clearly do better with a better code design.

Add min & max amount of particles

It is primordial because when the setting "dynamicAmount" is turned on, it is possible that a ton of particles are generated if the user increases the size of the window a lot.

Dynamically update particle amount after resize event

The script should decrease the amount of particles if the window is resized.

Blurring when window resizing

cos / sin inverted in setSpeed and setDirection

fix:

    setSpeed(speed){
        const direction = this.getDirection();
--      this.vx = Math.cos(direction) * speed;
--      this.vy = Math.sin(direction) * speed;
++      this.vx = Math.sin(direction) * speed;
++      this.vy = Math.cos(direction) * speed;
    }

[...]
    setDirection(direction){
      const speed = this.getSpeed();
--      this.vx = Math.cos(direction) * speed;
--      this.vy = Math.sin(direction) * speed;
++      this.vx = Math.sin(direction) * speed;
++      this.vy = Math.cos(direction) * speed;
    }

Default particle amount is too high

Add an option to re-init when the canvas is resized

If the particles does not re-initialize, they are resized with the canvas which create a sort of blur.

Add a getter / setter to update settings in real time

If we have a getter and a setter for the settings, we can update them in real time. For example, we could change the color of the springs to make a gradient according to the time.

When their size is increased, the particles are cut when they bounce

it happens when the mouse is over and the multiplier is != 1

Change position setting when resizing to prevent particles from spawning in the right

Some methods should not be used and should be private

Following ECMA 6, we just need to add "_" prefix

Re-init only if the canvas' parent was resized, and not the window itself

Add a security to prevent users from calling start() multiple times

Because it calls a new redraw request every time. So it looks like the particles are going faster.

It does not work properly if the parent container is rounded

In the code, we should check for the border-radius property (atm it only uses width and height).

Color for lines between particles

Hello my friend, in case of a white background it could be nice to let the user define the color of lines between particles in the settings. Thanks man good surf