Pixel City - Meli

About Pixel City

Pixel city is one of my best JavaScript art pieces. Pixel city is also realy cute.

I made arrays that hold data of the pixel colours, where the pixel is starting, and which direction the pixels go.

After that, I made them have a baby every time a pixel overlaps a pixel.

The baby pixel will have a mixed colour of the parents colour.

Further Work

I am going to make it so that if one of the pixels overlaps a red pixel, that pixel will turn red.
I am also thinking of giving the pixels energy bars, so pixels need energy to have babies.

let width = 10;
let height = 10;
let maxPixels = 150;

let pixels = [
  [120, 120, 1, 1, 255, 0, 0],
  [200, 200, 0, -1, 255, 0, 255],
  [100, 100, 0, -1, 0, 255, 0],
  [150, 150, 0, -1, 0, 255, 255],
  [170, 170, 0, -1, 255, 255, 0],
]

function setup() {

  createCanvas(width, height).parent("container");
  frameRate(30);

  for (let potato = 0; potato < pixels.length; potato++) {
    pixels[potato][0] = random(0, width);
    pixels[potato][1] = random(0, height);
  }
}

function draw(update = true) {
  background('black');
  strokeWeight(0);
  for (let index = 0; index < pixels.length; index++) {

    // fill the pixel colour
    fill(pixels[index][4], pixels[index][5], pixels[index][6]);

    // roll a random number 
    directionRoll = random(0, 100)

    // if the random number is greater than 90 (10% chance)
    if (directionRoll > 90) {
      // pick a new directionX randomly
      pixels[index][2] = random(-1, 1);
      // pick a new direction Y randomly
      pixels[index][3] = random(-1, 1);
    }

    // add directionX to positionX
    pixels[index][0] = pixels[index][0] + pixels[index][2];
    // add directionY to position Y
    pixels[index][1] = pixels[index][1] + pixels[index][3];

    if (pixels[index][0] > width) {
      pixels[index][0] = 0;
    }
    else if (pixels[index][0] < 0) {
      pixels[index][0] = width;
    }

    if (pixels[index][1] > height) {
      pixels[index][1] = 0;
    }
    else if (pixels[index][1] < 0) {
      pixels[index][1] = height;
    }

    // draw rectangle
    rect(pixels[index][0], pixels[index][1], 5, 5);
  }

  if (update) {
    for (let index = 0; index < pixels.length; index++) {
      let parent1 = pixels[index];

      for (let index2 = index + 1; index2 < pixels.length; index2++) {
        let parent2 = pixels[index2];

        if (pixels.length < maxPixels &&
          (round(parent1[0]) == round(parent2[0])) &&
          (round(parent1[1]) == round(parent2[1]))) {
          pixels.push([
            parent1[0] + random(2, 5),
            parent1[1] + random(2, 5),
            parent1[2],
            parent2[3],
            (parent1[4] + parent2[4]) / 2,
            (parent1[5] + parent2[5]) / 2,
            (parent1[6] + parent2[6]) / 2
          ])

          if (width < 600 || height < 600) {
            if (width < 600) {
              width += 10;
            } if (height < 600) {
              height += 10;
            }

            resizeCanvas(width, height)
            draw(false)
          }
        }
      }
    }
  }

}

drawing with javascript ['p5js'] Pixel City

About Pixel City

Further Work