let y1_noise = 0.1;

​

let x2_noise = 0.02;

let y2_noise = 0.01;

​

let x3_noise = 0.05;

let y3_noise = 0.04;

​

let x1_noise_inc;

let y1_noise_inc;

let x2_noise_inc;

let y2_noise_inc;

let x3_noise_inc;

let y3_noise_inc;

​

let threshold = 50;

let moveDist = 1;

​

let d;

let allPixels;

​

function setup() {

  createCanvas(400, 400);

  d = pixelDensity();

  allPixels = 4 * (width * d) * (height * d);

  x1_noise_inc = random(0.1, 0.001);

  y1_noise_inc = random(0.1, 0.001);

  x2_noise_inc = random(0.1, 0.001);

  y2_noise_inc = random(0.1, 0.001);

  x3_noise_inc = random(0.1, 0.001);

  y3_noise_inc = random(0.1, 0.001);

  background(0);

}

​

function draw() {  

  //noLoop();

  // red color

  let x1_location_value = map(noise(x1_noise), 0, 1, 0, width);

  let y1_location_value = map(noise(y1_noise), 0, 1, 0, height);   

  let location_1 = {x:x1_location_value, y:y1_location_value};

  // green color

  let x2_location_value = map(noise(x2_noise), 0, 1, 0, width);

  let y2_location_value = map(noise(y2_noise), 0, 1, 0, height);   

  let location_2 = {x:x2_location_value, y:y2_location_value};

  // blue color

  let x3_location_value = map(noise(x3_noise), 0, 1, 0, width);

  let y3_location_value = map(noise(y3_noise), 0, 1, 0, height);   

  let location_3 = {x:x3_location_value, y:y3_location_value};

  loadPixels();

  const d = pixelDensity();

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

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

      let dist_color_1 = map(dist(x, y, location_1.x, location_1.y), 0, width, 0, 255);   

      let dist_color_2 = map(dist(x, y, location_2.x, location_2.y), 0, width, 0, 255);      

      let dist_color_3 = map(dist(x, y, location_3.x, location_3.y), 0, width, 0, 255);      

      const i = 4 * d*(y * d*width + x);   

      pixels[i] = dist_color_1;

      pixels[i + 1] = dist_color_2;

      pixels[i + 2] = dist_color_3;

      pixels[i + 3] = 255;

      pixels[i + 5] = dist_color_1;

      pixels[i + 6] = dist_color_2;

      pixels[i + 7] = dist_color_3;

      pixels[i + 8] = 255;

      pixels[i + -1] = dist_color_1;

      pixels[i + -2] = dist_color_2;

      pixels[i + -3] = dist_color_3;

      pixels[i + -4] = 255;

    }

  }

  /*

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

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

    if (distSquared(location_1.x, location_1.y, location_2.x, location_2.y) <= threshold){

        location_1.x -= moveDist;

        location_1.y -= moveDist;

        location_2.x += moveDist;

        location_2.y += moveDist;

     }

    if (distSquared(location_1.x, location_1.y, location_3.x, location_3.y) <= threshold){

        location_1.x -= moveDist;

        location_1.y -= moveDist;

        location_3.x += moveDist;

        location_3.y += moveDist;

     }

   if (distSquared(location_2.x, location_2.y, location_3.x, location_3.y) <= threshold){

        location_2.x -= moveDist;

        location_2.y -= moveDist;

        location_3.x += moveDist;

        location_3.y += moveDist;

   }    

      let dist_color_1 = map(dist(x, y, location_1.x, location_1.y), 0, width, 0, 255);   

      let dist_color_2 = map(dist(x, y, location_2.x, location_2.y), 0, width, 0, 255);      

      let dist_color_3 = map(dist(x, y, location_3.x, location_3.y), 0, width, 0, 255);      

​

      set(x, y, color(dist_color_1, dist_color_2, dist_color_3));

      for (j = 0; j <= 10; j++){

        set(x+j, y+j, color(dist_color_1, dist_color_2, dist_color_3));

        set(x-j, y-j, color(dist_color_1, dist_color_2, dist_color_3));

      }

    }

  }

  */

  updatePixels();

  noStroke();

  /*

  beginShape();

  fill(255, 255, 255, 100);

  vertex(location_1.x, location_1.y);

  vertex(location_2.x, location_2.y);

  vertex(location_3.x, location_3.y);

  endShape(CLOSE);

  */

  /*

  beginShape();

  fill(255, 0, 0, 100);

  vertex(location_1.x, location_1.y);

  endShape(CLOSE);

  beginShape();

  fill(0, 255, 0, 100);

  vertex(location_2.x, location_2.y);

  endShape(CLOSE);  

​

  beginShape();

  fill(0, 0, 255, 100);

  vertex(location_3.x, location_3.y);

  endShape(CLOSE);

  */

  noStroke();  

  noStroke();

  fill(255, 0, 0, 100);

  ellipse(location_1.x, location_1.y, 25, 25);

  fill(0, 255, 0, 100);

  ellipse(location_2.x, location_2.y, 25, 25);

  fill(0, 0, 255, 100);

  ellipse(location_3.x, location_3.y, 25, 25);

  noStroke();

  x1_noise += x1_noise_inc;

  y1_noise += y1_noise_inc;

  x2_noise += x2_noise_inc;

  y2_noise += y2_noise_inc;

  x3_noise += x2_noise_inc;

  y3_noise += x3_noise_inc;

}

​

function distSquared(x1, y1, x2, y2) {

    let dx = x2 - x1;

    let dy = y2 - y1;

    return dx * dx + dy * dy;

}