Marching Ants

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>

JavaScript

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

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

uniform vec2 size;
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 = vec4(1.0,0.,0.,1.);
  
  float lineGap = 8.;
  float lineLength = 24.;
  float lineWidth = 4.;
  
  float xDist = distance(coord.x,0.);
  float yDist = distance(coord.y,0.);
  
  float t = time * 0.05;
  
  if (xDist < lineWidth && mod(coord.y+t, lineLength) > lineGap) {
  	endCol *= 1.0;
  } else if (xDist > size.x-lineWidth && mod(coord.y-t, lineLength) > lineGap) {
  	endCol *= 1.0;
  } else if (yDist < lineWidth && mod(coord.x-t, lineLength) > lineGap) {
  	endCol *= 1.0;
  } else if (yDist > size.y-lineWidth && mod(coord.x+t, lineLength) > lineGap) {
		endCol *= 1.0;
	} else {
  	endCol *= 0.1;
  }
  
  gl_FragColor = endCol;
}`

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

function LightFilter(size) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.size = defaultValue(size, [256,256])
    this.uniforms.time = performance.now()
}

LightFilter.prototype = Object.create(PIXI.Filter.prototype);
LightFilter.prototype.constructor = LightFilter;

LightFilter.prototype.apply = function (filterManager, input, output, clear) {
    this.uniforms.time = performance.now();
    filterManager.applyFilter(this, input, output, clear);
}

var stage = new PIXI.Container();

var renderer = PIXI.autoDetectRenderer(512,512);
renderer.roundPixels = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

var healthTex = new PIXI.Texture(PIXI.Texture.WHITE);
var...