Snow Effect with PixiJS

WebGL

PixiJS is a powerful 2D rendering engine that allows you to create stunning visual effects for the web. In this tutorial, we'll create a beautiful snow effect using PixiJS.

1import * as PIXI from 'pixi.js';
2
3// Create the application
4const app = new PIXI.Application({
5  width: window.innerWidth,
6  height: window.innerHeight,
7  backgroundColor: 0x1a1a2e,
8});
9
10document.body.appendChild(app.view);
11
12// Snowflake class
13class Snowflake {
14  constructor() {
15    this.sprite = new PIXI.Graphics();
16    this.sprite.beginFill(0xffffff);
17    this.sprite.drawCircle(0, 0, Math.random() * 3 + 1);
18    this.sprite.endFill();
19
20    this.reset();
21    app.stage.addChild(this.sprite);
22  }
23
24  reset() {
25    this.sprite.x = Math.random() * app.screen.width;
26    this.sprite.y = -10;
27    this.speed = Math.random() * 2 + 1;
28    this.drift = Math.random() * 0.5 - 0.25;
29  }
30
31  update() {
32    this.sprite.y += this.speed;
33    this.sprite.x += this.drift;
34
35    if (this.sprite.y > app.screen.height) {
36      this.reset();
37    }
38  }
39}
40
41// Create snowflakes
42const snowflakes = [];
43for (let i = 0; i < 200; i++) {
44  snowflakes.push(new Snowflake());
45}
46
47// Animation loop
48app.ticker.add(() => {
49  snowflakes.forEach(flake => flake.update());
50});

This code creates 200 snowflakes that fall from the top of the screen with random speeds and slight horizontal drift, creating a realistic snow effect.