Stasis Field

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
<script type="x-data-url" id="tree-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var treeImg = document.getElementById('tree-preview');
var lightUrl = document.getElementById('light-url').textContent;
var lightImg = document.getElementById('light-preview');

treeImg.src = treeUrl;
lightImg.src = lightUrl;

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform highp vec4 inputSize;
uniform highp vec4 outputFrame;

uniform vec2 uPosition[64];
uniform int uPosCount;
uniform float uRadius;
uniform float uColFactor;
uniform float uStart;
uniform float time;

vec2 mapCoord( vec2 coord ) {
    coord *= inputSize.xy;
    coord += inputSize.zw;

    return coord;
}

vec2 unmapCoord( vec2 coord ) {
    coord -= inputSize.zw;
    coord /= inputSize.xy;

    return coord;
}

void main() {
  vec2 coord = mapCoord(vTextureCoord);
  vec4 endcol = texture2D(uSampler, vTextureCoord);
  
  float startTime = min(pow((time-uStart)/500., 2.), 1.);
  float xWave = cos(time*0.005+(50.*vTextureCoord.x));
  float yWave = sin(time*0.005+(50.*vTextureCoord.y));
  float thresh = 0.2*(xWave+yWave);
  float border = startTime*(uRadius+(thresh*uRadius*0.1));
  
  float avgdist = 1000000.;
  
  for (int i = 0; i < 64; i++) {
	  if (i >= uPosCount) { break; }
    float xDist = distance(coord.x, uPosition[i].x);
    float yDist = distance(coord.y, uPosition[i].y);
    float dist = min(xDist, yDist);
    dist = (dist + distance(coord, uPosition[i].xy))/2.;
    avgdist = min(dist, avgdist);
  }
  
  if (avgdist != 0. && avgdist < border) {
  	float grey = 0.21 * endcol.r + 0.71 * endcol.g + 0.07 * endcol.b;
  	endcol = mix(endcol, vec4(endcol.rgb * (1.0 - uColFactor) + (grey * uColFactor), endcol.a), 1.-(smoothstep(.9,1.,avgdist/border)));
	}
  
  gl_FragColor = endcol;
}`

function defaultValue(inputValue, defaultValue) {
    inputValue = typeof inputValue !== 'undefined' ? inputValue : defaultValue;
    return inputValue;
}


function...