EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

"use strict";

/*
  Johan Karlsson (DonKarlssonSan)
*/
function Particle() {
  this.x = random([0, w]);
  this.y = random([0, h]);
  this.oldX = this.x;
  this.oldY = this.y;
}

Particle.prototype.move = function (stepSize) {
  this.oldX = this.x;
  this.oldY = this.y;
  this.x += random(-stepSize, stepSize);
  this.y += random(-stepSize, stepSize);
  if (this.x < 0) this.x = 0;
  if (this.x > w) this.x = w;
  if (this.y < 0) this.y = 0;
  if (this.y > h) this.y = h;
};

Particle.prototype.draw = function () {
  line(this.oldX, this.oldY, this.x, this.y);
};

var particles;
var iterations;
var px;
var w;
var h;

function setup() {
  cursor(HAND);
  iterations = 5;
  w = windowWidth;
  h = windowHeight;
  createCanvas(w, h);
  reset();
  stroke(0, 10);
}

function draw() {
  for (var i = 0; i < iterations; i++) {if (window.CP.shouldStopExecution(1)){break;}
    particles.forEach(function (p) {
      var x = floor(p.x);
      var y = floor(p.y);
      var off = (y * w + x) * 4;
      var stepSize = 30;
      if (px[off + 3] > 100) {
        stepSize = 2;
      }
      p.move(stepSize);
      p.draw();
    });
  }
window.CP.exitedLoop(1);

}

function initParticles() {
  particles = [];
  for (var i = 0; i < 50; i++) {if (window.CP.shouldStopExecution(2)){break;}
    particles.push(new Particle());
  }
window.CP.exitedLoop(2);

}

function initImage() {
  var message = "I love you";
  var tSize = 150;
  textSize(tSize);
  var tWidth = textWidth(message);
  text(message, w / 2 - tWidth / 2, h / 2 + tSize / 2);
  var image = get(0, 0, w, h);
  image.loadPixels();
  px = image.pixels;
  background(255);
}

function reset() {
  initParticles();
  clear();
  initImage();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  w = windowWidth;
  h = windowHeight;
  reset();
}

function mouseClicked() {
  reset();
}

CSS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script>
"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(o){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(o){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){var t=window.CP.PenTimer.shouldStopLoop(o);return t===!0&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"),t},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
  </script>

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: