JSFiddle - React, Tailwind, and code Playground

by Hackerham

HTML

<script src="https://pixijs.download/dev/pixi.js"></script>

JavaScript

let width = window.innerWidth;
let height = window.innerHeight;
console.log(height,width);

let app = new PIXI.Application(width, height);
document.body.appendChild(app.view);

// shaders
const PIXI_SVG_PROGRAM = PIXI.Program.from(`
  precision mediump float;
  attribute vec2 aVertexPosition;
  
  uniform mat3 translationMatrix;
  uniform mat3 projectionMatrix;
  varying vec2 worldPosition;
  
  void main() {
      worldPosition = (translationMatrix * vec3(aVertexPosition, 1.0)).xy;
      gl_Position = vec4((projectionMatrix * vec3(worldPosition, 1.0)).xy, 0.0,  1.0);
  }`,
    `
    precision mediump float;
    
    varying vec2 worldPosition;
    
    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;
      
    uniform vec2 a_point1;
    uniform vec2 a_point2;
    uniform vec2 center;
    
 
    const int pNum = 128;
    uniform float controlPointsArray[pNum];
    uniform vec4 controlPointsColors[pNum];
 
    void main() {
       
       vec2 tCenter = center;
       
        //相对于中心的距离
        float r = 0.0;        
        //长轴与短轴长度
        float l1 = distance(a_point1,vec2(0.0,0.0));
        float l2 = distance(a_point2,vec2(0.0,0.0));
        
        //主轴对应的角度
        float mainAngle = atan(a_point1.y,a_point1.x);
        
        //当前点对应的角度
        float currentAngle = atan(worldPosition.y-tCenter.y, worldPosition.x - tCenter.x);
        
        //纠正后的角度
        float stdAngle = currentAngle - mainAngle;
        
        //当前点对应角度上对应椭圆的距离
        float dist = sqrt((1.0 + pow(tan(stdAngle),2.0)) * pow(l1,2.0) *pow(l2,2.0)/(pow(l2,2.0) + pow(l1,2.0) * pow(tan(stdAngle),2.0)));
        r = distance(worldPosition,tCenter) / dist;
        
        vec4 color = mix(controlPointsColors[pNum-2], controlPointsColors[pNum-1], smoothstep(controlPointsArray[pNum-2], controlPointsArray[pNum-1], r));
        for(int i = pNum-2;i >= 0;i--){
            color = mix(controlPointsColors[i],color,smoothstep(controlPointsArray[i], controlPointsArray[i+1],...