JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.1.0-rc.2/pixi.js"></script>
<input type="range" min=0 max=180 value=0 id="slider" step="1"/>

CSS

body{
  display: flex;
  flex-direction: column;
}

JavaScript

const url = "https://media.gettyimages.com/vectors/two-women-jump-and-highfive-each-other-vector-id1207202567?b=1&k=6&m=1207202567&s=612x612&w=0&h=4aSgSDLbwYuUYEi7Kb1bd2oTitPYsRb24NMgyqi2MW4=";
let vertShader = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;

varying vec2 vTextureCoord;

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

vertShader = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat4 projection;

uniform vec2 transform;
uniform float theta;
varying vec2 vTextureCoord;

highp mat4 transpose(in highp mat4 inMatrix) {
    highp vec4 i0 = inMatrix[0];
    highp vec4 i1 = inMatrix[1];
    highp vec4 i2 = inMatrix[2];
    highp vec4 i3 = inMatrix[3];

    highp mat4 outMatrix = mat4(
                 vec4(i0.x, i1.x, i2.x, i3.x),
                 vec4(i0.y, i1.y, i2.y, i3.y),
                 vec4(i0.z, i1.z, i2.z, i3.z),
                 vec4(i0.w, i1.w, i2.w, i3.w)
                 );

    return outMatrix;
}

void main(void) {
float tx = 0.3;
float ty = 0.05;

mat4 translate = mat4(
  	1.0, 0.0, 0.0, tx,
    0.0, 1.0, 0.0, ty,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0 ,1.0
);

mat4 translate1 = mat4(
  	1.0, 0.0, 0.0, -tx,
    0.0, 1.0, 0.0, -ty,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0 ,1.0
);


float sinn = sin(theta * 3.14 / 180.0);
float coss = cos(theta * 3.14 / 180.0);

mat4 rotate = mat4(
	  coss, 0.0, sinn, 0.0,
    
    0.0, 1.0, 0.0, 0.0,
    
    -sinn, coss, 0.0, 0.0,
    
    0.0, 0.0, 0.0, 1.0
);

mat4 scale = mat4(
	  0.005, 0.0, 0.0, 0.0,
    0.0, 0.005, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0, 1.0
);

	vec4 position = vec4(aVertexPosition, 0.0, 1.0);	
	vec4 result = projection * (transpose(translate) * transpose(rotate) *  transpose(translate1)) *  transpose(scale) * position;
	gl_Position = result; //vec4(result.xy, 0.0,...