Pixel array - OpenProcessing

mySketch
xxxxxxxxxx
 
var bunker = [];
var bunker1 = [];
var ball;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  ball = new Ball(0, 470, 5);
  for (var i = 0; i < 1; i++) {
    bunker1[i] = new Bunker2(-50 + 280*i, 330, 220, 500, 60);
  }
  pixelDensity(1);
  bunker = new PixelBunker();
}
​
function draw() {
  background(255);
  bunker2();
  image(leg, 900, 450);
  leg.updatePixels(); 
  for (var i = 0; i < bunker1.length; i++) {
    bunker1[i].display();
    if (bunker1[i].hitBunker(ball)) {
      bunker1[i].changeColor();
      ball.changeColor();
     }else {
      bunker1[i].changeColor2();
      ball.changeColor2();
    }
  }
  loadPixels();
  bunker.display();
  updatePixels();
​
  ball.display(); 
  ball.move();
}
​
//uses the pixel array, middle leg
function PixelBunker() {
  this.display = function() { 
    for (var y = 0; y < 100; y++) {
      for (var x = 0; x < 20; x++) {
        var index = (x + y * width)*4;
        pixels[index + 2200000] = 18;
        pixels[index + 2200001] = 68;
        pixels[index + 2200002] = 14;
        pixels[index + 2200003] = 255;
      }
    }
  }
}
 //this is the bunker. 
function Bunker2(x, y, x1, y1, r) {
  this.x = x;
  this.y = y;
  this.x1 = x1;
  this.y1 = y1;
  this.r = r;
  this.col = color(18, 68, 14);
​
  this.changeColor2 = function() {
    this.col = color(18, 68, 14);
  }
​
  this.changeColor = function() {
    this.col = color(255, 0, 255);
  }
​
  this.hitBunker = function(ball) {
    //fill(this.col);
    var d = dist(this.x1, this.y1, ball.x, ball.y);
    if (d < this.r + ball.r) {
      return true;
    } else 
    return false;
  }
​
  this.display = function() {
    //noFill();
    //stroke(0);
    //ellipse(this.x1, this.y1, this.r*2, this.r*2-20);
    noStroke();
    fill(this.col);
    //scale(3);
    rect(this.x+213, this.y+152, 24, 60);
    rect(this.x+303, this.y+152, 25, 60);
    rect(this.x+236, this.y+128, 68, 60);
    rect(this.x+221, this.y+144, 16, 8);
    rect(this.x+228, this.y+136, 9, 8);
    rect(this.x+303, this.y+144, 16, 8);
    rect(this.x+303, this.y+136, 9, 8);
    rect(this.x+236, this.y+188, 18, 7);
    rect(this.x+287, this.y+188, 17, 7);
    rect(this.x+236, this.y+194, 10, 9);
    rect(this.x+295, this.y+194, 9, 9);
  }
}
​
//set() the last pillar
function bunker2() {
  leg = createImage(25, 110);
  leg.loadPixels();
  for (i = 0; i < leg.width; i++) {
    for (j = 0; j < leg.height; j++) {
      leg.set(i, j, color(18, 68, 14));
    }
  }
}
​
function Ball(x, y, r) {
  this.x = x;
  this.y = y;
  this.r = r;
  this.speed = 10;
  this.col = color(255);
​
  this.changeColor2 = function() {
    this.col = color(255);
  }
  this.changeColor = function() {
    this.col = color(255, 0, 255);
  }
​
  this.display = function() {
    stroke(0);
    fill(this.col);
    ellipse(this.x, this.y, this.r*2, this.r*2);
  }
  this.move = function() {
    this.x = this.x + this.speed;
    if (this.x >= width || this.x <= -2) {
      this.speed = this.speed*-1;
      this.y = this.y+10;
    }
  }
}