let walker;

let walker2;

let walker3;

​

let incrVal = 0.05; // Increment value for noise generation

let redpercnt;

let redpoint = [];

let greenpoint = [];

let bluepoint = [];

let visibileArea = 40; // Visible area for color checking

const maxPixelsToCheck = 100; // Maximum number of pixels to check for color difference

let walkersQuantity = 100;

let walkersList =[];

​

function setup() {

  createCanvas(500, 500);

  loadPixels(); // Load the pixel data of the canvas

  pixelDensity(1); // Set pixel density to 1

  // Create walker objects

  for(let i = 0; i < walkersQuantity; i++){

    walkersList[i] = new Walker();

  }

​

​

  // Define initial positions for red, green, and blue points

  redpoint[0] = width / 2;

  redpoint[1] = height - height / 3;

  greenpoint[0] = width / 4;

  greenpoint[1] = height + height / 3;

  bluepoint[0] = width - width / 4;

  bluepoint[1] = height + height / 3;

​

  // Paint the background with a color gradient based on the distance from points

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

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

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

      redprcnt = width / dist(int(redpoint[0]), int(redpoint[1]), x, y);

      greenprcnt = width / dist(int(greenpoint[0]), int(greenpoint[1]), x, y);

      blueprcnt = width / dist(int(bluepoint[0]), int(bluepoint[1]), x, y);

      pixels[index] = 6 * pow(redprcnt + 1, 3);

      pixels[index + 1] = 6 * pow(greenprcnt + 1, 3);

      pixels[index + 2] = 6 * pow(blueprcnt + 1, 3);

      pixels[index + 3] = 255;

    }

  }

  updatePixels(); // Update the canvas with the modified pixel data

}

​

function draw() {

  updatePixels();

  // Render walker objects

  for(let i = 0; i < walkersQuantity; i++){

    walkersList[i].render();

    walkersList[i].interact();

  }

}

​

// Define a Walker class to create and control walker objects

class Walker {

  constructor() {

    // Initialize walker properties

    this.x = 0;

    this.y = 0;

​

    this.moveXdir;

    this.moveYdir;

    this.moveX = random(width);

    this.moveY = random(height);

    this.t = [];

    this.n = [];

    this.mv = [];

    // Generate random values for color medians and initialize color vectors, so that each walker can have a distinct inital color

​

    this.cRmedian = round(random(20, 255));

    this.cGmedian = random(20, 255);

    this.cBmedian = random(20, 255);

    this.colorVector = createVector(

      round(this.cRmedian, 2),

      round(this.cGmedian, 2),

      round(this.cBmedian, 2)

    );

    this.cR = [];

    this.cG = [];

    this.cB = [];

    this.chance;

    this.diff;

​

    this.vrtcsX = [0, 0, 0, 0, 0];

    this.vrtcsY = [0, 0, 0, 0, 0];

    this.vrtcsListLength = 10;

    this.moveListLength = 10;

    this.surrounding = [];

    this.colordiff = [];

    this.colordiffSorted = [];

​

    this.smallestDiff = Infinity;

    this.smallestIndex = -1;

​

    for (let i = 0; i < this.vrtcsListLength + this.moveListLength; i++) {

      this.t[i] = int(random(20000));

       this.paintMovers();

    }

  }

  paintMovers(){

  for (let i = 0; i < this.vrtcsListLength; i++) {

      this.cR[i] = randomGaussian(this.cRmedian, 30);

      this.cG[i] = randomGaussian(this.cGmedian, 30);

      this.cB[i] = randomGaussian(this.cBmedian, 30);

    }

}

  prepareNoise() {

    // Calculate noise values based on time (t)

    for (let i = 0; i < this.vrtcsListLength + this.moveListLength; i++) {

      this.t[i] += incrVal;

      this.n[i] = noise(this.t[i]);

    }

​

    //map the noise values for the creatures points.

    for (let i = 0; i < this.vrtcsListLength; i++) {

      this.mv[i] = map(this.n[i], 0, 1, -1, 1);

    }

​

    //map the noise values for the creatures position

    for (

      let i = this.vrtcsListLength;

      i < this.vrtcsListLength + this.moveListLength;

      i++

    ) {

      if (

        i > this.vrtcsListLength &&

        i < this.vrtcsListLength + this.moveListLength / 2

      ) {

        this.mv[i] = map(this.n[i], 0, 1, -1.343, 1.5);

        this.mv[i] += randomGaussian(0, 0.1);

      } else {

        this.mv[i] = map(this.n[i], 0, 1, -1.348, 1.5);

        this.mv[i] += randomGaussian(0, 0.1);

      }

    }

  }

​

  shapeGen() {

    // Generate shapes based on noise values

    this.prepareNoise();

    for (let i = 0; i < this.vrtcsListLength / 2; i++) {

      this.vrtcsX[i] += this.mv[i];

      this.vrtcsX[i] = constrain(this.vrtcsX[i], -5, 5);

    }

    for (let i = 0; i < this.vrtcsListLength / 2; i++) {

      this.vrtcsY[i] += this.mv[i + this.vrtcsListLength / 2];

      this.vrtcsY[i] = constrain(this.vrtcsY[i], -5, 5);

    }

  }

  checksurroundings() {

    // Clear the existing colordiff array

    this.colordiff = [];

​

    // Generate random pixel coordinates within the visible area

    for (let i = 0; i < maxPixelsToCheck; i++) {

      const x = int(

        random(this.moveX - visibileArea, this.moveX + visibileArea)

      );

      const y = int(

        random(this.moveY - visibileArea, this.moveY + visibileArea)

      );

​

      // Ensure that x and y are within the canvas boundaries

      if (x >= 0 && x < width && y >= 0 && y < height) {

        var index = (x + y*2 * width) * 4;

        this.moveXdir = x - this.moveX;

        this.moveYdir = y - this.moveY;

​

        // Access pixel data directly from the pixels array

        this.surroundingColorVector = createVector(

          round(pixels[index], 2),

          round(pixels[index + 1], 2),

          round(pixels[index + 2], 2)

        );

​

        this.colordiff.push([

          this.colorVector.sub(this.surroundingColorVector),

          this.moveXdir,

          this.moveYdir,

        ]);

      }

    }

  }

  getsmallestIndex() {

    // Find the index of the smallest color difference

    for (let i = 0; i < this.colordiff.length; i++) {

      if (this.colordiff[i] && this.colordiff[i][0]) {

        this.diff = this.colordiff[i][0].mag(); // Calculate color difference magnitude

​

        if (this.diff < this.smallestDiff) {

          this.smallestDiff = this.diff;

          this.smallestIndex = i;

        }

      }

    }

  }

  interact(){

    let chance = random(300);

    if (chance < 0.3){

        for (let i = 0; i < 500 ; i++) {

      const x = int(

        random(this.moveX - 10, this.moveX + 10)

      );

      const y = int(

        random(this.moveY - 10, this.moveY + 10)

      );

        if (x >= 0 && x < width && y >= 0 && y < height) {

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

        this.colorList = get(this.moveX, this.moveY);

        this.colorList2 = [(this.cRmedian + this.colorList[0])/2, (this.cGmedian + this.colorList[1])/2, (this.cBmedian + this.colorList[2])/2, 255];

        set(x,y*2,this.colorList);

        }     

        }

        }else if (chance < 0.6){

         this.colorList = get(this.moveX, this.moveY);

         this.cRmedian = (this.cRmedian + this.colorList[0])/2;

         this.cGmedian = (this.cGmedian + this.colorList[1])/2;

         this.cBmedian = (this.cBmedian + this.colorList[2])/2;

         this.paintMovers();

        }else {

        }

  }

​

  move() {

    // Runs check surrounding function

    this.checksurroundings();

​

    // Move the walker by chance, either based on mapped noise, or based on color differences.

​

    for (

      let i = this.vrtcsListLength;

      i < this.vrtcsListLength + this.moveListLength;

      i++

    ) {

      if (

        i > this.vrtcsListLength &&

        i < this.vrtcsListLength + this.moveListLength / 2

      ) {

        this.chance = random(1);

        // 5% chance that a walker moves towards the colors similar to it.

        if (this.chance > 0.05) {

          this.moveX += this.mv[i];

        } else {

          this.getsmallestIndex();

          this.moveX += this.colordiff[this.smallestIndex][1] / 200;

        }

      } else {

        this.chance = random(1);

        if (this.chance > 0.05) {

          this.moveY += this.mv[i];

        } else {

          this.getsmallestIndex();

          this.moveY += this.colordiff[this.smallestIndex][2] / 200;

        }

      }

    }

​

    this.moveX = constrain(this.moveX, 0, width);

    this.moveY = constrain(this.moveY, 0, height);

  }

  render() {

    this.shapeGen();

    this.move();

    noFill();

    push();

    translate(this.moveX, this.moveY);

    strokeWeight(7);

​

    // Draws points that make up creatures

    beginShape();

    for (let i = 0; i < this.vrtcsListLength; i++) {

      stroke(this.cR[i], this.cG[i], this.cB[i]);

      point(this.vrtcsX[i], this.vrtcsY[i]);

    }

    endShape();

    pop();

  }

}

​