Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
    <style>
        html, body {
            background-color: #000;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.0/pixi.min.js"></script>
<script>
​
    let width = window.innerWidth;
    let height = window.innerHeight;
    console.log(height, width);
​
    let app = new PIXI.Application(width, height);
    document.body.appendChild(app.view);
​
​
    const PIXI_SVG_PROGRAM = PIXI.Program.from(`
  precision mediump float;
  attribute vec2 aVertexPosition;
​
  uniform mat3 translationMatrix;
  uniform mat3 projectionMatrix;
  uniform vec2 pPoint;
​
  void main() {
      gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
  }`,
        `
    precision mediump float;
 
​
    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 = vec2((projectionMatrix * translationMatrix * vec3(center, 1.0)).xy);
        vec2 tCenter = vec2((projectionMatrix * translationMatrix * vec3(center, 1.0)).xy);
​
​
​
        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(gl_FragCoord.y-tCenter.y, gl_FragCoord.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(gl_FragCoord.xy,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], r));
        }
        gl_FragColor = vec4(color);
​
    }
`,
    );
​
    const shader = new PIXI.Shader(PIXI_SVG_PROGRAM);
​
    let v = 600;
    // 然后用PIXI.Mesh显示出来//除了边，再加几个点
    let data = [0, 0, v, 0, v, v, 0, v];
    // let data = [v,v, 2*v,v, 2*v,2*v, v,2*v]
​
    let result = [0, 1, 2, 0, 2, 3];
    const geometry = new PIXI.Geometry();
    geometry.addAttribute('aVertexPosition', data, 2);
    geometry.addIndex(result);
    console.log(shader);
    console.log(geometry);
​
    const combinedShapeMesh = new PIXI.Mesh(geometry, shader);
​
    let container = new PIXI.Container();
    // combinedShapeMesh.setTransform(0, 0, 0, 0, 6.2);
    // container.setTransform(0,0,0,0,6.2)
​
    container.addChild(combinedShapeMesh);
    app.stage.addChild(container);
​
    combinedShapeMesh.shader.uniforms.center = [100 * 400, -(600 * 300 - 400 * 300)];
    // combinedShapeMesh.shader.uniforms.center = [100,400];
    combinedShapeMesh.shader.uniforms.a_point1 = [0, 50];
    combinedShapeMesh.shader.uniforms.a_point2 = [50, 0];
    
    combinedShapeMesh.shader.uniforms.controlPointsArray = [0.0, 1.0];
    combinedShapeMesh.shader.uniforms.controlPointsColors = [
        0.9019607843137255, 0.13333333333333333, 0.13333333333333333, 1, 0.050980392156862744, 0.9411764705882353, 0.2784313725490196, 1,
    ];
​
    // Animate the filter
    app.ticker.add(function (delta)
    {
    });
​
</script>
​
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
cyh2020pro
0viewers