import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container",

    "fullScreen": true

});

​

const image = new Image();

image.crossOrigin = "Anonymous";

​

image.addEventListener("load", (event) =>

{

    const { Sprite, Shape, BitmapData, BitmapDataChannel } = next2d.display;

    const { Point } = next2d.geom;

    const { DisplacementMapFilter, DisplacementMapFilterMode } = next2d.filters;

​

    const bitmapData = new BitmapData();

    bitmapData.image = event.target;

​

    const sprite = root.addChild(new Sprite());

​

    sprite

        .graphics

        .beginBitmapFill(bitmapData)

        .drawRect(0, 0, bitmapData.width, bitmapData.height);

​

    sprite.scaleX = sprite.scaleY = 0.8;

    sprite.x = 80;

    sprite.y = 60;

​

    const filterBitmapData = new BitmapData(40, 40, true, 0xff808080);

    const shape = new Shape();

    shape

        .graphics

        .beginFill()

        .drawCircle(20, 20, 20);

​

    filterBitmapData.draw(shape);

​

    const filters = new DisplacementMapFilter();

​

    filters.mapBitmap  = filterBitmapData;

    filters.mapPoint   = new Point(30, 30);

    filters.componentX = BitmapDataChannel.RED;

    filters.componentY = BitmapDataChannel.BLUE;

    filters.scaleX     = 20;

    filters.scaleY     = 20;

    filters.mode       = DisplacementMapFilterMode.COLOR;

    filters.color      = 0xffffff;

    filters.alpha      = 1;

​

    sprite.filters = [filters];

});

​

image.src = "https://next2d-demonstration.herokuapp.com/image/character.svg";