Posted on

Creating a Particles Galaxy with Three.js

In this new ALL YOUR HTML coding session we will look into recreating the particles galaxy from Viverse using Three.js.

Original: https://www.viverse.com/

Made by: https://ohzi.io/

This coding session was streamed live on June 19, 2022.

Check out the live demo.

Image credit goes to https://www.instagram.com/tre.zen/

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post Creating a Particles Galaxy with Three.js appeared first on Codrops.

Posted on

Replicating the Particles Animation from DNA Capital with Three.js

In this ALL YOUR HTML coding session you will learn how to recreate the beautiful particles animation from the website of DNA Capital using Three.js. The website was made by Immersive Garden.

This coding session was streamed live on October 17, 2021.

Check out the live demo.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post Replicating the Particles Animation from DNA Capital with Three.js appeared first on Codrops.

Posted on

Tropical Particles Rain Animation with Three.js

People always want more. More of everything. And there is nothing better in the world to fulfil that need than particle systems. Because you can have thousands of particles easily. And that’s what I did for this demo.

Creating a particle system

You start with just one particle. I like to use classes for that, because that perfectly describes the behaviour of particles. It usually it looks like this:

class Particle{
	// just setting initial position and speed
	constructor(){}
	// updating velocity according to position and physics
	updateVelocity(){}
	// finally update particle position, 
	// sometimes these last two could be merged
	updatePosition(){}
}

And after all of that, you could render them. Sounds easy, right? It is!

Physics

So the particles need to move. For that we need to establish some rules for their movement. The easiest one is: gravity. Implemented in the particle it would look like this:

updateVelocity(){
	this.speed.y = gravity; // some constant
}

updatePosition{
	// this could have been just one line, but imagine there are some other factors for speed, not just gravity.
	this.position.y += this.speed.y;

	// also some code to bring particle back to screen, once it is outside
}

With that you will get this simple rain. I also randomized gravity for each particle. Why? Because I can!

But just rain didn’t seem enough, and I decided to add a little bit of physics to change the speed of the particles. To slow them down or speed them up, depending on the… image. Yup, I took the physics for the particles from the image. My friend @EncharmDre proposed to use some oscillations for the particles, and I also added some colors palettes here. It looked amazing! Like a real tropical rain.

Still, the physics part is the computational bottleneck for this animation. It is possible to animate millions of particles by using GPGPU techniques, and the GPU to calculate the positions. But 10000 particles seemed enough for my demo, and I got away with CPU calculations this time. 10s of thousands also were possible because I saved some performance on rendering.

Rendering

There are a lot of ways to render particles: HTML, Canvas2D, WebGL, SVG, you name it. But so far the fastest one is of course WebGL. It is even faster than Canvas2D rendering. I mean, of course Canvas2D works perfectly fine for particles. But with WebGL you could have MORE OF THEM! Which is the point of this whole adventure =).

So, WebGL narrowed down the search for rendering to a couple of frameworks. PIXI.js is actually very nice for rendering 2D particle systems, but because I love three.js, and because its always nice to have another dimension as a backup (the more dimensions the better, remember?), I chose three.js for this job.

There is already an object specifically for this job: THREE.Points. I also decided to use shaders (because it’s cool) but you could actually easily avoid that for this demo.

The simplified code looks somewhat like this:

// initialization
for (let i = 0; i < numberOfParticles; i++) {
  // because we are animating them in 2D, z=0
  positions.set([x, y, 0], i * 3);
  this.particles.push(
    new Particle({
      x,
      y
    })
  );
}
geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(positions, 3)
);

// animation loop
particles.forEach(particle => {
  particle.updateSpeedAndPosition();
});

To make it even cooler, I decided to create trails for the particles. For that I just used the previous rendering frame, and faded it a little bit. And here is what I got:

Now combining everything, we could achieve this final look:

Final words

I beg you to try this yourself, and experiment with different parameters for particles, or write your own logic for their behavior. It is a lot of fun. And you could be the ruler of thousands or even millions of… particles!

GitHub link coming soon!

The post Tropical Particles Rain Animation with Three.js appeared first on Codrops.

Posted on

How to Code the Travelling Particles Animation from “Volt for Drive”

In this ALL YOUR HTML coding session you’ll learn how to recreate Volt for Drive’s glowing particles that endlessly travel through city streets. The website was made by the team of Red Collar. We’ll use Three.js and some shader magic to implement the animation.

This coding session was streamed live on January 31, 2021.

Check out the live demo.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post How to Code the Travelling Particles Animation from “Volt for Drive” appeared first on Codrops.

Posted on

Recreating the Exploding Particles Video Animation from M-trust.co.jp

Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!

In this live stream of ALL YOUR HTML, I’ll explore the video particles effect from m-trust.co.jp which was made by LIG agency from Japan. Connecting DOM Video and WebGL, we’ll make particles explode on the screen—a really interesting effect!

This coding session was streamed live on November 8, 2020.

Check out the live demo.

Original website: M-Trust

Developers of original website: LIG

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post Recreating the Exploding Particles Video Animation from M-trust.co.jp appeared first on Codrops.

Posted on

Particles Image Animation from Mathis Biabiany’s website

Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!

In this live stream of ALL YOUR HTML, I’m replicating the particles animation from Mathis Biabiany‘s website. The effect consists of 2^18 particles forming images and a colorful tunnel that creates an interesting transition from one image to another.

This coding session was streamed live on Oct 25, 2020.

Check out the live demo.

Original website: Mathis Biabiany

Developer of the original website: Mathis Biabiany

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post Particles Image Animation from Mathis Biabiany’s website appeared first on Codrops.

Posted on

Coding the Mouse Particle Effect from Mark Appleby’s Website

Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions plus the demo!

In this episode of ALL YOUR HTML, I decompile the particles effect from Mark Appleby’s website and show you how you can create a particle system from scratch, using no libraries at all. I also address some performance tips, and ideas about SDF in the 2D world.

This coding session was streamed live on Oct 11, 2020.

Check out the live demo.

Original website: Mark Appleby

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post Coding the Mouse Particle Effect from Mark Appleby’s Website appeared first on Codrops.

Posted on

Playing With Particles Using the Web Animations API

When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can.

In this post, we'll make even more particle magic using the Web Animations API to create a firework effect when clicking on a button.

Browser support

At the time I'm writing this article, all major browsers — with the exception of Safari and Internet Explorer — at least partially support the Web Animations API. Safari support can be enabled in the "Experimental Features" developer menu.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
8376No80TP

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
80688013.3

If you're interested in reproducing the Twitter heart animation you could also have a look at this cool article by Ana Tudor which is another great example of exploding particles on a button.

HTML setup

We won't need much HTML for this demo. We will use a <button> element but it could be another type of tag element. We could even listen to any click on the page to make particles pop from anywhere if we really wanted to.

<button id="button">Click on me</button>

CSS setup

Since every particle has a few CSS properties in common, we can set them in the global CSS of the page. As you can create custom tag elements in HTML, I will use a <particle> tag name to avoid using semantic tags. But truth is, you could animate <p>, <i> or any tag of your choice.

particle {
  border-radius: 50%;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
}

A couple thing to note here:

  • The particles should not interact with the layout of our page, so we're setting a fixed position with top and left at 0px each.
  • We're also removing pointer events to avoid any user interaction on the HTML particles while they are on the screen.

Because styling the button and the page layout is not really the purpose of this article I will leave that on the side.

JavaScript setup

Here are the six steps we will follow in our JavaScript:

  1. Listen to click event on the button
  2. Create 30 <particle> elements and append them into the <body>
  3. Set a random width, height and background for every particle
  4. Animate each particle from the mouse position to a random place as they fade out
  5. Remove the <particle> from the DOM when the animation is complete

Step 1: The click event

// We first check if the browser supports the Web Animations API
if (document.body.animate) {
  // If yes, we add a click listener on our button
  document.querySelector('#button').addEventListener('click', pop);
}

Step 2: The particles

// The pop() function is called on every click
function pop(e) { 
  // Loop to generate 30 particles at once
  for (let i = 0; i < 30; i++) {
    // We pass the mouse coordinates to the createParticle() function
    createParticle(e.clientX, e.clientY);
  }
}
function createParticle(x, y) {
  // Create a custom particle element
  const particle = document.createElement('particle');
  // Append the element into the body
  document.body.appendChild(particle);
}

Step 3: Particle width, height and background

function createParticle (x, y) {
  // [...]
  // Calculate a random size from 5px to 25px
  const size = Math.floor(Math.random() * 20 + 5);
  // Apply the size on each particle
  particle.style.width = `${size}px`;
  particle.style.height = `${size}px`;
  // Generate a random color in a blue/purple palette
  particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}

Step 4: Animate each particle

function createParticle (x, y) {
  // [...]
  // Generate a random x & y destination within a distance of 75px from the mouse
  const destinationX = x + (Math.random() - 0.5) * 2 * 75;
  const destinationY = y + (Math.random() - 0.5) * 2 * 75;

  // Store the animation in a variable because we will need it later
  const animation = particle.animate([
    {
      // Set the origin position of the particle
      // We offset the particle with half its size to center it around the mouse
      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
      opacity: 1
    },
    {
      // We define the final coordinates as the second keyframe
      transform: `translate(${destinationX}px, ${destinationY}px)`,
      opacity: 0
    }
  ], {
    // Set a random duration from 500 to 1500ms
    duration: 500 + Math.random() * 1000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    // Delay every particle with a random value from 0ms to 200ms
    delay: Math.random() * 200
  });
}

Because we have a random delay, the particles waiting to start their animation are visible on the top-left of the screen. To prevent this, we can set a zero opacity on every particle in our global CSS.

particle {
  /* Same as before */
  opacity: 0;
}

Step 5: Remove particles after the animation completes

It is important to remove the particle elements from the DOM. Since we create 30 new elements on every click, the browser memory can fill up pretty quickly and cause things to get janky. Here's how we can do that:

function createParticle (x, y) {
  // Same as before
  // When the animation is finished, remove the element from the DOM
  animation.onfinish = () => {
    particle.remove();
  };
}

Final result

Putting everything together gives us what we're looking for: a colorful explosion of particle goodness.

Not seeing the animation in the demo? Check if your browser supports the Web Animations API. in the support table at the top of the post.

Be creative!

Because all this is using CSS, it's pretty simple to modify the particle styles. Here are five examples using various shapes... and even characters!

Or hey, we can even explode the button itself like Zach Saucier did in this post.

A button with a gradient exploding into particles

The post Playing With Particles Using the Web Animations API appeared first on CSS-Tricks.