testing pixijs examples in jsfiddle or anywhere else?

Question

I'm just getting started learning Pixijs, and I'd like to test some of the examples.

When I copy this example: https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js

into JSFiddle: https://jsfiddle.net/ripmurdock/42h7fckx/4/

I get a black box and this error in the console: Invalid X-Frame-Options header was found when loading “https://fiddle.jshell.net/_display/?editor_console=true”: “ALLOWALL” is not a valid directive.

I'm more familiar with codepen. Codepen support said running this example was Pro feature.

What's a good way to test the Pixijs examples in JSfiddle or anywhere else?

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

app.stage.interactive = true;

const container = new PIXI.Container();
app.stage.addChild(container);

const flag = PIXI.Sprite.from('examples/assets/pixi-filters/flag.png');
container.addChild(flag);
flag.x = 100;
flag.y = 100;

const displacementSprite = PIXI.Sprite.from('examples/assets/pixi-filters/displacement_map_repeat.jpg');
// Make sure the sprite is wrapping.
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.padding = 10;

displacementSprite.position = flag.position;

app.stage.addChild(displacementSprite);

flag.filters = [displacementFilter];

displacementFilter.scale.x = 30;
displacementFilter.scale.y = 60;

app.ticker.add(() => {
    // Offset the sprite position to make vFilterCoord update to larger value. Repeat wrapping makes sure there's still pixels on the coordinates.
    displacementSprite.x++;
    // Reset x to 0 when it's over width to keep values from going to very huge numbers.
    if (displacementSprite.x > displacementSprite.width) { displacementSprite.x = 0; }
});

Answer 1

In order to use pixi.js in a code snippet platform, you first need to load the library in the way that the tool offers.

In JSFiddle, you'll find an input field when you expand the Resources section of the sidebar.

In Codepen, you can load arbitrary external scripts from the settings menu. You'll find a text field under Settings -> JS -> Add External Scripts/Pens where any external JavaScript file can be imported.

These fields usually offer auto completion for popular libraries delivered by various CDNs. After typing pixi.js, it automatically gets imported as https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.3/pixi.min.js.

Additionally, you need to update the URLs of the assets imported in the examples. Change the relative URLs (hosted in the same directory as the example) to absolute URLs. Instead of examples/assets/pixi-filters/flag.png, you need to provide the complete route to the external resource https://pixijs.io/examples/examples/assets/pixi-filters/flag.png. This applies to all other assets that the example might load, including the displacement map.

This is a working Codepen with all these fixes in place. And this is the same example running on JSFiddle.