manix · May 28, 2020 22:56
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <div id="app"></div>
 <script src="https://code.createjs.com/1.0.0/tweenjs.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.min.js"></script>
 <script>
  var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x003300,
    resolution: window.devicePixelRatio || 1,
  });
  document.getElementById("app").appendChild(app.view);
  var gr = new PIXI.Graphics();
  gr.beginFill(0xFFFFFF);
  gr.lineStyle(0);
  gr.drawCircle(30, 30, 30);
  gr.endFill();
  var texture = app.renderer.generateTexture(gr);
  class SplatterEffect extends PIXI.Container {
    dot(size) {
      let dot = new PIXI.Sprite(texture);
      dot.tint = this.entity.color || 0xff0000;
      dot.scale.set(size);

      let colorMatrix = new PIXI.filters.ColorMatrixFilter();
      dot.filters = [colorMatrix];
      colorMatrix.brightness(Math.random() * 0.5 + 0.5, false);

      let dir = Math.random() * Math.PI * 2;
      let dis = Math.random() * 256 * this.entity.force;
      this.addChild(dot);
      createjs.Tween.get(dot).to({
        x: Math.cos(dir) * dis,
        y: Math.sin(dir) * dis,
      }, Math.max(3000, 500 / this.entity.force), createjs.Ease.cubicOut).call(() => {
        createjs.Tween.get(dot).to({
          alpha: 0,
        }, Math.random() * 500)
      });

      return dot;
    }
    duration() {
      return 4000;
    }
    create() {
      let blur = new PIXI.filters.BlurFilter();
      blur.blur = 8;
      this.filters = [blur];

      for (let lg = 0; lg < 3 * this.entity.force; lg++) {
        this.dot(this.entity.size / 80, 0.4);
        for (let sm = 0; sm < 3 * this.entity.force; sm++) {
          this.dot(this.entity.size / 180, 1);
        }
      }
      setTimeout(() => this.destroy(), this.duration());
    }
  }
  window.onclick = function () {
    let w = window.innerWidth;
    let h = window.innerHeight;
    for (let x = 0; x < w; x += w / 30) {
      for (let y = 0; y < h; y += h / 10) {
        let effect = new SplatterEffect();
        effect.x = x;
        effect.y = y;
        effect.entity = {
          force: 1,
          size: 20
        };
        app.stage.addChild(effect)
        effect.create();
      }
    }
  }
 </script>
	<!DOCTYPE html>
	<div id="app"></div>
	<script src="https://code.createjs.com/1.0.0/tweenjs.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.min.js"></script>
	<script>
	var app = new PIXI.Application({
	width: window.innerWidth,
	height: window.innerHeight,
	backgroundColor: 0x003300,
	resolution: window.devicePixelRatio \|\| 1,
	});
	document.getElementById("app").appendChild(app.view);
	var gr = new PIXI.Graphics();
	gr.beginFill(0xFFFFFF);
	gr.lineStyle(0);
	gr.drawCircle(30, 30, 30);
	gr.endFill();
	var texture = app.renderer.generateTexture(gr);
	class SplatterEffect extends PIXI.Container {
	dot(size) {
	let dot = new PIXI.Sprite(texture);
	dot.tint = this.entity.color \|\| 0xff0000;
	dot.scale.set(size);

	let colorMatrix = new PIXI.filters.ColorMatrixFilter();
	dot.filters = [colorMatrix];
	colorMatrix.brightness(Math.random() * 0.5 + 0.5, false);

	let dir = Math.random() * Math.PI * 2;
	let dis = Math.random() * 256 * this.entity.force;
	this.addChild(dot);
	createjs.Tween.get(dot).to({
	x: Math.cos(dir) * dis,
	y: Math.sin(dir) * dis,
	}, Math.max(3000, 500 / this.entity.force), createjs.Ease.cubicOut).call(() => {
	createjs.Tween.get(dot).to({
	alpha: 0,
	}, Math.random() * 500)
	});

	return dot;
	}
	duration() {
	return 4000;
	}
	create() {
	let blur = new PIXI.filters.BlurFilter();
	blur.blur = 8;
	this.filters = [blur];

	for (let lg = 0; lg < 3 * this.entity.force; lg++) {
	this.dot(this.entity.size / 80, 0.4);
	for (let sm = 0; sm < 3 * this.entity.force; sm++) {
	this.dot(this.entity.size / 180, 1);
	}
	}
	setTimeout(() => this.destroy(), this.duration());
	}
	}
	window.onclick = function () {
	let w = window.innerWidth;
	let h = window.innerHeight;
	for (let x = 0; x < w; x += w / 30) {
	for (let y = 0; y < h; y += h / 10) {
	let effect = new SplatterEffect();
	effect.x = x;
	effect.y = y;
	effect.entity = {
	force: 1,
	size: 20
	};
	app.stage.addChild(effect)
	effect.create();
	}
	}
	}
	</script>