var eg;

var parent = [];

var parentCost = Number.POSITIVE_INFINITY;

var mut;

var count = 0;

​

var counter;

​

function preload() {

  ml = loadImage('ML.jpg');

}

​

function setup() {

  createCanvas(810, 605);

  eg = createGraphics(400, 605);

  eg.noStroke();

  mut = new Mutator(10, 15);

  for (var i = 0; i < 1400; i++) parent[i] = random(-1, 1); //200 circles x,y,rgba,radius 

  image(ml, 0, 0);

  ml.loadPixels();

  frameRate(1000);

}

​

function draw() {

  mut.mutate(parent);

  make();

  var cost =costL2();

  if (cost < parentCost) {

    parentCost = cost;

    fill(0);

    rect(410, 0, 400, 605);

    image(eg, 410, 0);

  } else {

    mut.undo(parent);

  }

  if(!counter){

    fill(0);

    rect(4, 16, textWidth(frameCount)+2, -11);

    fill(255);

    text(frameCount, 5, 15);

  }

}

​

function keyReleased() {

  counter = !counter;

  if(counter) image(ml, 0, 0);

}

​

function costL2() {

  var cost = 0;

  for (var i = 0; i < ml.pixels.length; i += 4) {

    var d = ml.pixels[i] - eg.pixels[i];

    cost += d * d;

    d = ml.pixels[i + 1] - eg.pixels[i + 1];

    cost += d * d;

    d = ml.pixels[i + 2] - eg.pixels[i + 2];

    cost += d * d;

  }

  return cost;

}

​

function costL1() {

  var cost = 0;

  for (var i = 0; i < ml.pixels.length; i += 4) {

    var d = ml.pixels[i] - eg.pixels[i];

    cost += abs(d);

    d = ml.pixels[i + 1] - eg.pixels[i + 1];

    cost += abs(d);

    d = ml.pixels[i + 2] - eg.pixels[i + 2];

    cost += abs(d);

  }

  return cost;

}

​

function make() {

  eg.background(0);

  for (var j = 0; j < 1400; j += 7) {

    var x = 250 * parent[j] + 200;

    var y = 350 * parent[j + 1] + 300;

    var r = 127.5 * parent[j + 2] + 127.5;

    var g = 127.5 * parent[j + 3] + 127.5;

    var b = 127.5 * parent[j + 4] + 127.5;

    var a = 127.5 * parent[j + 5] + 127.5;

    var rad = 50 * parent[j + 6] + 51;

    eg.fill(r, g, b, a);

    eg.circle(x, y, rad);

  }

  eg.loadPixels();

}

​

class Mutator {

  constructor(size, precision) {

    this.previous = new Float32Array(size);

    this.pIdx = new Int32Array(size);

    this.precision = precision;

  }

  mutate(vec) {

    for (var i = 0; i < this.previous.length; i++) {

      var rpos = int(random(vec.length));

      var v = vec[rpos];

      this.pIdx[i] = rpos;

      this.previous[i] = v;

      var m = 2 * exp(random(-this.precision, 0));

      if (random() < 0.5) m = -m;

      var vm = v + m;

      if (vm >= 1) vm = v;

      if (vm <= -1) vm = v;

      vec[rpos] = vm;

    }

  }

  undo(vec) {

    for (var i = this.previous.length - 1; i >= 0; i--) {

      vec[this.pIdx[i]] = this.previous[i];

    }

  }

}

​