// counting from left to right 

// starting from 0 line by line

// each pixel = 4 values (R,G,B,A)

// each pixel location (pix) = (x + y * size) * 4;

// each sub-pixel value + pix + 0, 1, 2, 3

​

// pixelDensity(1) is ter voorkoming van HD (mac) resolutie welk is 4x hoger

​

let size = 400;

let i, j, R, G, B, A, pix;

​

function setup() {

  createCanvas(size, size);

  pixelDensity(1);

}

​

function draw() {

 // background(220);

  loadPixels();

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

    for (y = 0; y < width; y++){

      pix = (x + y * size) * 4;

      // pixels[pix + 0] = map (x, 0, size, 0, 255);

      // pixels[pix + 1] = map (x, 0, size, 0, 255);

      // pixels[pix + 2] = map (x, 0, size, 255, 0);

      // pixels[pix + 3] = map (y, 0, size, 200, 255);

     // pixels[pix + 3] = 255;

     // bright = map (x + y, 0, size + size, 0, 255);

     // pixels[i](51);

     // pixels[i](51);

      // pixels[pix + 0] = map (x, 0, size, 0, 255);

      // pixels[pix + 1] = map (y, 0, size, 0, 255);

      // pixels[pix + 2] = map (x+y, 0, size, 255, 0);

      // pixels[pix + 3] = map (dist(x,y,mouseX,mouseY), 0, size, 0, 255);

​

      // Mouse Spotlight colored

      pixels[pix + 0] = map (x, 0, size, 0, 255);

      pixels[pix + 1] = map (y, 0, size, 0, 255);

      pixels[pix + 2] = map (dist(x,y,mouseX,mouseY), 0, size, 255, 0);

      pixels[pix + 3] = map (dist(x,y,mouseX,mouseY), 0, size * .5, 0, 255);

​

      //Colors from the corners

      pixels[pix + 0] = map (dist(0,0,x,y), 0, size * 1.6, 255,0);

      pixels[pix + 1] = map (dist(size,0,x,y), 0, size * 1.6, 255,0);

      pixels[pix + 2] = map (dist(0,size,x,y), 0, size * 1.6, 255,0);;

      pixels[pix + 3] = map (dist(x,y,mouseX,mouseY), 0, size * .4, 0, 255);

      // pixels[pix + 3] = map (dist(size,size,x,y), 0, size * 1.6, 150, 255);

      // pixels[pix + 1] = 51;

      // pixels[pix + 2] = 51;

      // pixels[pix + 3] = 255;

    }  

  }

  updatePixels();

  // noLoop();

}