@pixi/filter-noise

What is @pixi/filter-noise?

@pixi/filter-noise is a package that provides a noise filter for use with the PixiJS library. It allows developers to add noise effects to their graphics, which can be useful for creating textures, backgrounds, or visual effects that require a randomized or grainy appearance.

What are @pixi/filter-noise's main functionalities?

Add Noise Filter to a Sprite

This feature allows you to apply a noise filter to a sprite in a PixiJS application. The code sample demonstrates how to create a PixiJS application, add a sprite, and apply a noise filter to it. The noise level can be adjusted using the 'noise' property of the NoiseFilter.

const app = new PIXI.Application();
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from('path/to/image.png');
app.stage.addChild(sprite);

const noiseFilter = new PIXI.filters.NoiseFilter();
sprite.filters = [noiseFilter];

noiseFilter.noise = 0.5; // Adjust the noise level

Animate Noise Filter

This feature demonstrates how to animate the noise effect by changing the seed value over time. By updating the seed value in the app's ticker, the noise pattern changes continuously, creating an animated noise effect on the sprite.

const app = new PIXI.Application();
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from('path/to/image.png');
app.stage.addChild(sprite);

const noiseFilter = new PIXI.filters.NoiseFilter();
sprite.filters = [noiseFilter];

app.ticker.add(() => {
  noiseFilter.seed = Math.random(); // Change the seed to animate the noise
});

Other packages similar to @pixi/filter-noise

three.js

three.js is a popular 3D library that includes post-processing effects, including noise. While it is primarily used for 3D graphics, it can also be used to apply noise effects to 2D textures. It is more complex than @pixi/filter-noise and is used for a wider range of graphics applications.

README

@pixi/filter-noise

Installation

npm install @pixi/filter-noise

Usage

import '@pixi/filter-noise';