Class scope Problem.

DDv2FF

Hi again.
I've been trying to make this creature with particles around it. I have 4 issues, that maybe someone can help me to solve.
1- After some time I figured out how to make the particles follow the creature. But the code doenst seem clean(? I would like to make it right.
2- The scope issue. In the Particle Class, the particle is showed using "this.xtotal" and "this.ytotal", and I know that those variables wherent declared in the constructor function. But if I do it, then I have no animation for my particles. This generate multiple messages in the console.
https://preview.ibb.co/k1wwpn/Captura.png
How can I fix it ?
3- I want to constrain the random position that the particles might have. I think that for this issue, I could simply do :

this.xtotal = constrain(this.xtotal, this.x - this.dist, this.x + this.dist);
this.ytotal = constrain(this.ytotal, this.y - this.dist, this.y + this.dist);

but that generate errors to.
4- The last issue is focused in the optimization of my code. Because I have lagg with more than 5 particles. That might be related to the first issue.

let particulas = [];
let criatura;

function setup() {
    createCanvas(1200, 600);
    criatura = new Criatura(600, 300);

    for(var i = 0; i < 5; i++){
        particulas.push(new Particula(criatura));
    }

}

function draw() {
    background(60);

    criatura.show();
    criatura.update();

    for(let partic of particulas){
        partic.show();
        partic.update();

        //the part that I dont like to have in the sketch file,
        //it just doesnt seem belong here.
        partic.x = criatura.x;
        partic.y = criatura.y;

    }

}

function keyPressed(){

    if(keyCode === 39){
        criatura.xvelocidad = 1;
    } else if(keyCode === 37){
        criatura.xvelocidad = -1;
    }

    if(keyCode === 38){
        criatura.yvelocidad = -1;
    } else if(keyCode === 40){
        criatura.yvelocidad = 1;
    }

}

function keyReleased(){
    criatura.xvelocidad = 0;
    criatura.yvelocidad = 0;
}

The classes

class Particula{
  constructor(object){
    this.x = object.x;
    this.y = object.y;
    this.dist = object.r;
    //give random positions araound the creature
    this.xm = random(-object.r, object.r);
    this.ym = random(-object.r, object.r);

    //for the particle efect
    this.history = [];

  }

  update(){
    //vibration effect
    this.xm+= random(-5, 5);
    this.ym+= random(-5, 5);

    //the problem with the scope
    this.xtotal = this.x + this.xm;
    this.ytotal = this.y + this.ym;
    //track of the particle
    let v = createVector(this.xtotal, this.ytotal);
    this.history.push(v);
    if(this.history.length > 20){
      this.history.splice(0, 1);
    }

  }

  show(){
    push();
    fill(50, 150);
    ellipse(this.xtotal, this.ytotal, 40);
    pop();

    for(var i = 0; i < this.history.length; i++){
      fill(random(200), random(200), random(200));
      let pos = this.history[i];
      ellipse(pos.x, pos.y, i);
    }

  }


}

The criature

class Criatura{
  constructor(x, y){

    this.x = x;
    this.y = y;
    this.r = 125;

    this.xvelocidad = 0;
    this.yvelocidad = 0;
  }

  update(){
    this.x+= this.xvelocidad * 5;
    this.y+=this.yvelocidad * 5;

    if(this.x > width - this.r){
      this.x = width - this.r;
    } else if(this.x < this.r){
      this.x = this.r;
    }
    if(this.y > height - this.r){
      this.y = height - this.r;
    } else if (this.y < this.r){
      this.y = this.r;
    }

  }

  show(){
    push();
    fill(250, 50, 100);
    ellipse(this.x, this.y, this.r * 2);
    pop();
  }

}

10x 4 reading

GoToLoop

I've copied & pasted your whole code in https://OpenProcessing.org/sketch/create

And it seemed to work alright for me. :-\"

DDv2FF

Yes. It seems work fine, but then why my browser console is full of errors !?? Maybe the errors are not in the code. I use firefox, and it is updated. Can it be my library ? Also I cant use println();, wich is annoying. (I can in https://openprocessing.org/sketch/create )

GoToLoop

println() was removed many months ago. It's just print().
Or use console.log() which is much more guaranteed to work.