Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@pixi/filter-displacement
Advanced tools
Filter that allows offsetting of pixel values to create warping effects
@pixi/filter-displacement is a filter for the PixiJS library that allows developers to create displacement effects on display objects. This can be used to create a variety of visual effects such as water ripples, heat haze, or any effect that requires the distortion of pixels based on a displacement map.
Basic Displacement Effect
This code demonstrates how to apply a basic displacement effect to a sprite using a displacement map. The displacement map is another image that defines how the pixels of the original image should be displaced.
const app = new PIXI.Application();
document.body.appendChild(app.view);
const sprite = PIXI.Sprite.from('path/to/image.png');
app.stage.addChild(sprite);
const displacementSprite = PIXI.Sprite.from('path/to/displacement_map.png');
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
app.stage.addChild(displacementSprite);
sprite.filters = [displacementFilter];
displacementSprite.x = app.renderer.width / 2;
displacementSprite.y = app.renderer.height / 2;
Animating Displacement
This code snippet shows how to animate the displacement effect by moving the displacement map over time. This can create dynamic effects like moving water or shifting heat haze.
app.ticker.add(() => {
displacementSprite.x += 1;
displacementSprite.y += 1;
});
pixi-filters is a collection of filters for PixiJS, including displacement, blur, and more. It offers a broader range of filters compared to @pixi/filter-displacement, which focuses specifically on displacement effects.
three.js is a 3D library that includes shaders and effects similar to displacement mapping. While it is more complex and geared towards 3D graphics, it can achieve similar visual effects in a 3D context.
npm install @pixi/filter-displacement
import '@pixi/filter-displacement';
FAQs
Filter that allows offsetting of pixel values to create warping effects
The npm package @pixi/filter-displacement receives a total of 86,893 weekly downloads. As such, @pixi/filter-displacement popularity was classified as popular.
We found that @pixi/filter-displacement demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.