How to change the fill the colour of a blob in javascript canvas?

Question

So I want the little circles to be green how do I do this? If you run the snippet you will see that you are the big circle. I want the little circle that you cannot control to be green. It would be better if you could help me make the big blob to be replaced by a picture lets just say pic.jpg. But it doesn't really matter to replace the big circle though...Thanks!

var blob;
var blobs = [];
var zoom = 1;
var xcan = 0; 
var ycan = 0;


function setup() {
  createCanvas(1000, 1000)
  blob = new Blob(0, 0, 60);
  for (var i = 0; i < 200; i++) {
    var x = random(-width, width);
    var y = random(-height, height);
    blobs[i] = new Blob(x, y, 6);
    
}
}

function draw() {
  background(200);

  translate(width / 2, height / 2);
  var newzoom = 64 / blob.r;
  zoom = lerp(zoom, newzoom, 0.1);
  scale(zoom);
  translate(-blob.pos.x, -blob.pos.y);

  for (var i = blobs.length - 1; i >= 0; i--) {
    blobs[i].show();
    if (blob.eats(blobs[i])) {
      blobs.splice(i, 1);
    }
  }

  blob.show();
  blob.update();
}

//=========================================================================================//

function Blob(x, y, r) {
  this.pos = createVector(x, y);
  this.r = r;
  this.vel = createVector(0, 0);

  this.update = function() {
    var newvel = createVector(mouseX - width / 2, mouseY - height / 2);
    newvel.setMag(3);
    this.vel.lerp(newvel, 0.2);
    this.pos.add(this.vel);
  };

  this.eats = function(other) {
    var d = p5.Vector.dist(this.pos, other.pos);
    if (d < this.r + other.r) {
      var sum = PI * this.r * this.r + PI * other.r * other.r;
      this.r = sqrt(sum / PI);
      //this.r += other.r;
      return true;
    } else {
      return false;
    }
  };

  this.show = function() {
    fill(255);
    ellipse(this.pos.x, this.pos.y, this.r * 2, this.r * 2);
  };
}

<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.4/lib/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>

Answer 1

Add a variable to your blob to track the color. Then use the color in the fill() method.

function Blob(x, y, r, c) {
  ...
  this.color = c;
  ...
  this.show = function() {
    fill(this.color);
    ...
  };
}