JSFiddle - React, Tailwind, and code Playground

by flek

HTML

<script src="https://unpkg.com/[email protected]/dist/pixi.min.js"></script>
<div id="root"></div>

CSS

#root {
  width: 250px;
  height: 250px;
}

JavaScript

const root = document.getElementById('root');
const bBox = root.getBoundingClientRect();
const app = new PIXI.Application({
  width: bBox.width,
  height: bBox.height,
  backgroundColor: 0x1099bb
});
root.appendChild(app.view);

const array = [
  [1.0, 0.1, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0],
  [0.1, 0.1, 0.1, 1.0], [0.1, 1.0, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0],
  [0.1, 0.1, 0.1, 1.0], [0.1, 0.1, 0.1, 1.0], [0.1, 0.1, 1.0, 1.0],
]
const floatarray = new Float32Array(array.flatMap(x => x));

// create a new Sprite from an image path
const texture = new PIXI.Texture.fromBuffer(floatarray, 3, 3);
const sprite = new PIXI.Sprite(texture);
sprite.scale.x = 10
sprite.scale.y = 10

// center the sprite's anchor point
sprite.anchor.set(0.5);

// move the sprite to the center of the screen
sprite.x = bBox.width / 2;
sprite.y = bBox.height / 2;

app.stage.addChild(sprite);

console.log(app.renderer.extract.pixels(sprite));

// Listen for animate update
/* app.ticker.add((delta) => {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent transformation
    //sprite.rotation += 0.1 * delta;
}); */