从数组位置在画布上绘制粒子

Question

我一直在使用粒子系统绘制<canvas>，现在我正在尝试用数组中的粒子创建一个“图像”。

不幸的是，我似乎无法弄清楚如何根据阵列的结构来定位和着色粒子。

我试图制作图像的数组是“defs”数组。希望我接近实现目标，但我需要一些帮助。

这就是我所拥有的。

0 = White 1 = Black 2 = Red

（Stackoverflow不会因为某些原因让我输入Javascript，这里有一个指向小提琴的链接 - http://jsfiddle.net/arcbpred/）

// Creating the Canvas
var canvas = document.createElement("canvas"),
    c = canvas.getContext("2d"),
    particles = {},
    particleIndex = 0,
    particleNum = 87;
document.body.appendChild(canvas);

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.id = "canvas";

// Setting needed varialbes
var xmin = 1;
var xmax = +canvas.width;
var bgcolor = "#FFF";

// Setting color which is just one big square
c.fillStyle = bgcolor;
c.fillRect(0, 0, canvas.width, canvas.height);

var defs = {
  [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0], [0, 1, 2, 2, 2, 1, 0, 1, 2, 2, 2, 1, 0], [1, 2, 3, 3, 2, 2, 1, 2, 2, 2, 2, 2, 1], [1, 2, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1], [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1], [0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 0], [0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 1, 0, 0], [0, 0, 0, 1, 2, 2, 2, 2, 2, 1, 0, 0, 0], [0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 2, 1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0]
};

function Particle() {
  this.x = canvas.width / 2 - 15;
  this.y = canvas.height / 2 / 2;

  this.vx = 0;
  this.vy = 0;

  this.gravity = 0;

  particleIndex++;
  particles[particleIndex] = this;
  this.id = particleIndex;
  this.beat = 1;

  this.size = 30;
  this.color = "rgba(191,30,46,0)";




}

Particle.prototype.draw = function() {
  this.x += this.vx;
  this.y += this.vy;
  this.vy += this.gravity;



  c.fillStyle = this.color;
  c.fillRect(this.x, this.y, this.size, this.size);
};

setInterval(function() {
  c.fillStyle = bgcolor;
  c.fillRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < particleNum; i++) {
    new Particle();
  }
  for (var i in particles) {
    particles[i].draw();
  }
}, 30);

body{
  margin: 0;
  padding: 0;
  background-color: rgba(100,0,0,1);
  overflow:hidden;
}

感谢您的任何意见。