mery2

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var rid = null;
var frames = 0;
var index = 0;
var fontSize = 50;

var lines = [];
var points = [];

var speed = 11;

var ctx = canvas.getContext("2d");
var btx = buffer.getContext("2d");

var bw = buffer.width = fontSize;
var bh = buffer.height = fontSize;
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = 300;
btx.fillStyle = ctx.fillStyle = "#fff";
btx.font = ctx.font = fontSize + "px Courier New";

var text = ["Kita hanya orang asing yang tak mengenal satu sama lain,",
"Lalu dipertemukan",
"Oleh rutinitas kehidupan",
"Kita sering berpapasan",
"Namun terlewatkan",
"Sebab kita tak mengenal satu sama lain",
"Sebenarnya timbul rasa penasaran",
"Untuk ingin berkenalan",
"Bukan aku tak memiliki keberanian",
"Namun aku pernah dihiraukan",
"Dan diabaikan",
"Dan aku menerima itu sebagai sebuah kenyataan",
"Dan aku juga menerima kekalahan",
"Karena sesungguhnya dalam kehidupan",
"Adalah bagaimana menerima keadaan dan kenyataan",
"Sebagai sebuah kedewasaan",
"Sekian :)",];

text.map(function (t, i) {
  text[i] = t.toUpperCase();
});

var Line = function () {
  function Line(text) {
    _classCallCheck(this, Line);

    this.text = text;
    this.width = ctx.measureText(this.text).width;
    this.startingPoint = -this.width / 2;
    this.letters = [];

    this.lettersRy();
  }

  _createClass(Line, [{
    key: "lettersRy",
    value: function lettersRy() {
      for (var i = 0; i < this.text.length; i++) {
        var letter = this.text[i];
        var _start = this.startingPoint + ctx.measureText(this.text.substring(0, i)).width;
        var pos = { x: _start, y: (ch - fontSize) / 2 };
        this.letters.push(new Letter(i, pos, letter));
      }
    }
  }]);

  return Line;
}();

var Letter = function () {
  function Letter(i, pos, letter) {
    _classCallCheck(this, Letter);

    this.index = index;
    this.letter = letter;
    this.pos = pos;
    this.points = [];
    this.addToPointsRy();
  }

  _createClass(Letter, [{
    key: "addToPointsRy",
    value: function addToPointsRy() {
      btx.clearRect(0, 0, bw, bh);
      btx.fillText(this.letter, 2, bh - 2);
      var imgData = btx.getImageData(0, 0, bw, bh);
      var pixels = imgData.data;

      for (var i = 0; i < pixels.length; i += 4) {
        if (pixels[i] == 255) {
          var x = 0.25 * i % bw;
          var y = ~~(0.25 * i / bw);
          this.points.push(new Particle(x + this.pos.x, y + this.pos.y));
        }
      }
    }
  }]);

  return Letter;
}();

var Particle = function () {
  function Particle(x, y) {
    _classCallCheck(this, Particle);

    this.x = x;
    this.y = y;
    this.pos = { x: x, y: y };
    this.pn = {
      // positive or negative
      x: Math.random() > 0.2 ? 1 : -1,
      y: Math.random() > 0.2 ? -1 : 1
    };
    this.vel = {
      x: this.pn.x * (this.pn.x + Math.random() * 10) / 90,
      y: this.pn.y * (this.pn.y + Math.random() * 10) / 90,
      alp: (0.1 + Math.random()) / 60
    };
    this.alp = 1;
  }

  _createClass(Particle, [{
    key: "draw",
    value: function draw() {
      ctx.fillStyle = "rgba(255,255,255," + this.alp + ")";
      ctx.beginPath();
      ctx.fillRect(this.pos.x, this.pos.y, 1, 1);
    }
  }, {
    key: "update",
    value: function update() {
      this.pos.x += this.vel.x;
      this.pos.y += this.vel.y;
      this.alp -= this.vel.alp;
    }
  }]);

  return Particle;
}();

for (var i = 0; i < text.length; i++) {
  lines.push(new Line(text[i]));
}

var numLine = 0;
var line = lines[numLine];

ctx.translate(cw / 2, 0);
function Frame() {
  rid = window.requestAnimationFrame(Frame);

  ctx.clearRect(-cw, -ch, 2 * cw, 2 * ch);
  points.map(function (p, i) {
    p.update();
    p.draw();
    if (p.alp <= 0) {
      points.splice(i, 1);
    }
  });

  if (frames % speed == 0) {
    line.letters[index].points.map(function (p) {
      p.pos = { x: p.x, y: p.y };
      p.alp = 1;
    });
    points = points.concat(line.letters[index].points);
    index++;
  }

  if (index == line.letters.length) {
    numLine++;
    line = lines[numLine % text.length];
    index = 0;
    frames = 0;
  }
  frames++;
}
//Frame();

function Init() {
  cw = canvas.width = window.innerWidth;
  ctx.translate(cw / 2, 0);
  //let imgHeight = window.getComputedStyle(LC, null).getPropertyValue("height");
  //canvas.style.bottom = imgHeight + "px";
  if (rid) {
    window.cancelAnimationFrame(rid);
    rid = null;
  }
  Frame();
}

setTimeout(function () {
  Init();
  window.addEventListener("resize", Init, false);
}, 15);