​

//tail

var numt = 60;

var mxt = [];

var myt = [];

var mx = [];

var my = [];

var prevt = 0;

​

function preload() {

  img = loadImage("https://ichef.bbci.co.uk/news/800/cpsprodpb/420D/production/_104990961_gettyimages-481229372.jpg");

}

​

function setup() {

  setupTail();

  setupBrightness();

}

​

​

function draw() {

  drawBrightness();

  updatePixels();

  drawTail();

}

​

function setupTail(){

  createCanvas(800, 450);

  noStroke();

  //fill(255,153);

  for (var i = 0; i < numt; i++) {

    mxt[i] = 0;

    myt[i] = 0; 

  }

}

​

function setupBrightness() {

  var canvas = createCanvas(800, 450);

  pixelDensity(1);

  frameRate(30);

  for (var i = 0; i < numt; i++) {

    mx[i] = 0;

    my[i] = 0; 

  }

​

  img.loadPixels();

  // Only need to load the pixels[] array once, because we're only

  // manipulating pixels[] inside draw(), not drawing shapes.

  loadPixels();

}

​

function drawTail(){

​

  var diff = frameCount - prevt;

  // Cycle through the array, using a different entry on each frame. 

  // Using modulo (%) like this is faster than moving all the values over.

  var which = frameCount % numt;

  mxt[which] = mouseX;

  myt[which] = mouseY;

  var count = 0;

  for (var i = 0; i < numt; i++) {

    // which+1 is the smallest (the oldest in the array)

    var index = (which + 1 + i) % numt;

    ellipse(mxt[index], myt[index], i, i);

    ellipseMode(CENTER);

    fill(255,255,255,14);

  }

​

  which = 0;

  prevt = frameCount;

}

​

function drawBrightness() {

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

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

      // Calculate the 1D location from a 2D grid

      var loc = (x + y * img.width) * 4;

      // Get the R,G,B values from image

      var r, g, b;

      r = img.pixels[loc];

      //g = green (img.pixels[loc]);

      //b = blue (img.pixels[loc]);

      // Calculate an amount to change brightness based on proximity to the mouse

      var maxdist = 50;//dist(0,0,width,height);

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

      var adjustbrightness = 255 * (maxdist - d) / maxdist;

      r += adjustbrightness;

      //g += adjustbrightness;

      //b += adjustbrightness;

      // Constrain RGB to make sure they are within 0-255 color range

      r = constrain(r, 0, 255);

      //g = constrain(g, 0, 255);

      //b = constrain(b, 0, 255);

      // Make a new color and set pixel in the window

      //color c = color(r, g, b);

      var pixloc = (y * width + x) * 4;

      pixels[pixloc] = r;

      pixels[pixloc + 1] = r;

      pixels[pixloc + 2] = r;

      pixels[pixloc + 3] = 255;

    }

  }

​

}

​