examples/points_animation/main.js
function getPointsOnPicture(selector) {
  var img = document.querySelector(selector);
  var width = img.width;
  var height = img.height;

  var canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);
  var imgData = ctx.getImageData(0, 0, width, height);

  var points = [];
  var xStep = 8;
  var yStep = 8;
  for (var x = 0; x < width; x += xStep) {
    for (var y = 0; y < height; y += yStep) {
      var i = (y * width + x) * 4;

      // not collect the points for alpha is zero
      if (imgData.data[i + 4] <= 0) {
        continue;
      }

      points.push({
        x: x - width / 2,
        y: -(y - height / 2),
        z: 0,
        r: imgData.data[i] / 255,
        g: imgData.data[i + 1] / 255,
        b: imgData.data[i + 2] / 255,
        a: imgData.data[i + 3] / 255,
      });
    }
  }

  return points;
}
function getPointsOnPicture(selector) {
  var img = document.querySelector(selector);
  var width = img.width;
  var height = img.height;

  var canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);
  var imgData = ctx.getImageData(0, 0, width, height);

  var points = [];
  var xStep = 8;
  var yStep = 8;
  for (var x = 0; x < width; x += xStep) {
    for (var y = 0; y < height; y += yStep) {
      var i = (y * width + x) * 4;

      // not collect the points for alpha is zero
      if (imgData.data[i + 4] <= 0) {
        continue;
      }

      points.push({
        x: x - width / 2,
        y: -(y - height / 2),
        z: 0,
        r: imgData.data[i] / 255,
        g: imgData.data[i + 1] / 255,
        b: imgData.data[i + 2] / 255,
        a: imgData.data[i + 3] / 255,
      });
    }
  }

  return points;
}
function getPointsOnPicture ( selector ) { var img = document . querySelector ( selector ) ; var width = img . width ; var height = img . height ; var canvas = document . createElement ( 'canvas' ) ; document . body . appendChild ( canvas ) ; canvas . width = width ; canvas . height = height ; var ctx = canvas . getContext ( '2d' ) ; ctx . drawImage ( img , 0 , 0 , width , height ) ; var imgData = ctx . getImageData ( 0 , 0 , width , height ) ; var points = [ ] ; var xStep = 8 ; var yStep = 8 ; for ( var x = 0 ; x < width ; x += xStep ) { for ( var y = 0 ; y < height ; y += yStep ) { var i = ( y * width + x ) * 4 ; // not collect the points for alpha is zero if ( imgData . data [ i + 4 ] <= 0 ) { continue ; } points . push ( { x : x - width / 2 , y : - ( y - height / 2 ) , z : 0 , r : imgData . data [ i ] / 255 , g : imgData . data [ i + 1 ] / 255 , b : imgData . data [ i + 2 ] / 255 , a : imgData . data [ i + 3 ] / 255 , } ) ; } } return points ; }
Translate a picture to a set of points

@param {String} selector The DOM selector of image
@returns {Array} return the set of points
Translate a picture to a set of points