JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.6.1/gl-matrix-min.js"></script>
<input type="range" min=0 max=180 step=1 id='slider' value=0 />
<div class='parent' id="parent">
  <div id="container">


    <img id="img" />
  </div>
</div>

CSS

body {
  background: #ccc;
  padding-top: 50px;
  display: flex;
  flex-direction: column
}

.parent {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

img {
  /* width: 300px; */
}

canvas {
  margin-left: 10px;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

const containerProps = {
  width: 400,
  height: 400
};

const imgProps = {
  width: 350,
  height: 250,
  src: 'https://s3.ap-south-1.amazonaws.com/republic-invideo/animals_1626327610284.png'
}

const container = document.getElementById('container');
container.style.width = `${containerProps.width}px`;
container.style.height = `${containerProps.height}px`;

const img = document.getElementById('img');
img.width = imgProps.width;
img.height = imgProps.height;
img.src = imgProps.src;

const matrix = [
  0.506786, 0, 0.862072, -0.000431036, 
  0,1, 0, 0, 
  -0.862072,0, 0.506786, -0.000253393,
  0, 0, 0, 1
].join(',');

img.style.transform = `matrix3d(${matrix})`;
//img.style.transform = `rotate3d(0, 1, 0, 0deg)`;

/******** PIXI PART **********/
const app = new PIXI.Application({
  width: containerProps.width,
  height: containerProps.height,
  backgroundColor: 0xffCCCC,
  antialias: true,
  resolution: 1
});

document.getElementById('parent').appendChild(app.view);

const sprite = new PIXI.Sprite(PIXI.Texture.from(imgProps.src));
sprite.width = imgProps.width;
sprite.height = imgProps.height;
sprite.y = app.renderer.height * 0.5 - (sprite.height * 0.5);
sprite.x = app.renderer.width * 0.5 - (sprite.width * 0.5);
/* sprite.pivot.x = sprite.width * 0.5;
sprite.pivot.y = sprite.height * 0.5; */
app.stage.addChild(sprite);


const vertex = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat4 uMatrix;

varying vec2 vTextureCoord;

void main(void)
{
    gl_Position = uMatrix * vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
    vTextureCoord = aTextureCoord;
}
`;

const fragment = `
varying vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void)
{
   gl_FragColor = texture2D(uSampler, vTextureCoord);
}
`;
function v(x, y, z) {
    var v = vec3.create();
    vec3.set(v, x, y, z);
    return v;
  }

  function calcMatrix(
    container,
    domWidth,
    domHeight,
    flipX,
    flipY
 ...