A big hairy idea

var img1, img2;
var imgString1 = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/151574/earth4.jpg";
var imgString2 = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/151574/earth5.jpg";
var music;
var agents = [];
var col = [];
var fieldIntensity = 10,
  noiseScale = 800,
  radius = 300,
  stepSize = 1;
var a = 0.25,
  bg = img1,
  c = 0;
var step = 15;
var targetHue = [255, 0, 0];

function preload() {
  img1 = loadImage(imgString1);
  img2 = loadImage(imgString2);
}

function setup() {
  myCanvas = createCanvas(img1.width, img1.height);
  background(img2);
  createStuff2();
}

function draw() {
  for (var i = 0; i < agents.length; i++) {
    agents[i].update();
    agents[i].paint();
  }
  if (frameCount % 100 === 0) c++;
  noStroke();
}

function createStuff2() {
  agents = [];
  for (var x = width / 2 - radius; x < width / 2 + radius; x += step) {
    for (var y = height / 2 - radius; y < height / 2 + radius; y += step) {
      var distance = dist(x, y, width / 2, height / 2);
      var pix = img2.get(x, y);
      if (distance < radius && (pix[0] + pix[1] + pix[2] > 30)) {
        agents.push(new Agent(createVector(x, y), pix));
      }
    }
  }
}

function Agent(position, couleur) {
  this.angle = random(TWO_PI);
  this.stepSize = stepSize;
  this.position = position;
  this.outside = false;
  this.pix = couleur;

  this.update = function() {
    this.angle = noise(this.position.x / noiseScale, this.position.y / noiseScale) * fieldIntensity;
    this.position.x += cos(this.angle) * this.stepSize / 2;
    this.position.y += sin(this.angle) * this.stepSize / 2;
  }

  this.paint = function() {
    var col2 = color(this.pix[0] + int((targetHue[0] - this.pix[0]) * c / 20), this.pix[1] + int((targetHue[1] - this.pix[1]) * c / 20), this.pix[2] + int((targetHue[2] - this.pix[2]) * c / 20), a * 255);
    fill(col2);
    noStroke();
    ellipse(this.position.x, this.position.y, this.stepSize, this.stepSize);
  }
}

function init() {
  background(img2);
  noiseSeed(random(9999));
  c = 0;
  createStuff2();
}

function windowResized() {
  //resizeCanvas(windowWidth, windowHeight-4);
}

function keyTyped() {
  if (key == 'r') init();
  if (key === 's') saveCanvas(myCanvas, 'hairy_ideas' + frameCount + ".png", 'png');
}

function keyPressed() {

  if (keyCode === UP_ARROW) {
    fieldIntensity *= 2;
    if (fieldIntensity > 3000) fieldIntensity = 3000;
    init();
  }
  if (keyCode === DOWN_ARROW) {
    fieldIntensity /= 2;
    if (fieldIntensity < 5) fieldIntensity = 5;
    init();
  }
  if (keyCode === RIGHT_ARROW) {
    noiseScale += 100;
    if (noiseScale > 1000) fieldIntensity = 1000;
    init();
  }
  if (keyCode === LEFT_ARROW) {
    noiseScale -= 100;
    if (noiseScale < 100) fieldIntensity = 100;
    init();
  }
}