let img;

​

function preload() {

  img = loadImage("mandrill.png");

}

​

function setup() {

  createCanvas(400, 400);

  pixelDensity(1);

}

​

function draw() {

  background(0);

  switch (mode) {

    case 0:

      tvNoise();

      break;

    case 1:

      gradient();

      break;

    case 2:

      getImageColor();

      break;

    case 3:

      pixelsFromImage();

      break;

    case 4:

      glowingOrb();

      break;

  }

}

​

function tvNoise() {

  // to access pixels you need to load them

  loadPixels();

​

  //4 spots for each pixel, we have width and height,pixels are sotred individually, transparenct value is the fourth.  Stired in RGB values and the fourth one is transparency. transparency is i+3

  let numPixels = 4 * width * height;

//

  for (let i = 0; i < numPixels; i += 4) {

    let c = random(255);

    pixels[i] = c;

    pixels[i + 1] = c;

    //blue color 

    pixels[i + 2] = c;

  }

​

  // to have changes to pixels take effect, you need to update them

  updatePixels();

}

​

function gradient() {

  loadPixels();

​

  let numPixels = 4 * width * height;

​

  for (let y = 0; y < height; y++) {

    for (let x = 0; x < width; x++) {

      let index = 4 * (x + y * width);

      let c = random(255);

      pixels[index] = map(x, 0, width, 0, 255);

      pixels[index + 1] = 0;

      pixels[index + 2] = 0;

    }

  }

​

  updatePixels();

}

​

function getImageColor() {

​

  let numPixels = 4 * img.width * img.height;

  let circleSize = 10;

​

  for (let y = circleSize/2; y < img.height; y+=circleSize) {

    for (let x = circleSize/2; x < img.width; x+=circleSize) {

      let c = img.get(x,y);

      fill(c);

      noStroke();

      circle(x,y,circleSize);

    }

  }

}

​

function pixelsFromImage() {

  loadPixels();

  // to access the image's pixels you need to load them on the image itself

  img.loadPixels();

​

  let numPixels = 4 * img.width * img.height;

​

  for (let y = 0; y < img.height; y++) {

    for (let x = 0; x < img.width; x++) {

      let index = 4 * (x + y * img.width);

      if (x < mouseX) {

        // mao 1 to 0 becasue 1 will be red & green all the way on,

        // and will make it look normal

        pixels[index] = img.pixels[index] * map(x, 0, width, 1, 0);

        pixels[index + 1] = img.pixels[index + 1] * map(x, 0, width, 1, 0);

        pixels[index + 2] = img.pixels[index + 2];

      } else {

        pixels[index] = img.pixels[index];

        pixels[index + 1] = random(255);

        pixels[index + 2] = img.pixels[index + 2];

      }

    }

  }

​

  // to have changes to pixels take effect, you need to update them

 img.updatePixels();

  updatePixels();

}

​

function glowingOrb() {

  loadPixels();

​

  let numPixels = 4 * width * height;

​

  for (let y = 0; y < height; y++) {

    for (let x = 0; x < width; x++) {

      let index = 4 * (x + y * width);

      let d = dist(x, y, mouseX, mouseY);

      if (d > 0) d = 1 / d;

      //don't divide by zero

      else d = 1;

      let radius = 0.015; //number between 0 & 1 mostly, smaller is larger size

      d = map(d, 0, radius, 0, 255);

      pixels[index] = d * 0.9;

      pixels[index + 1] = d * 0.5;

      pixels[index + 2] = d * 0.3;

    }

  }

​

  updatePixels();

}

​

function keyPressed() {

  switch (key) {

    case "0":

      mode = 0;

      break;

    case "1":

      mode = 1;

      break;

    case "2":

      mode = 2;

      break;

    case "3":

      mode = 3;

      break;

    case "4":

      mode = 4;

      break;

  }

}

​