CODEWITHSUNDEEP
javascriptcssdomp5.js
Harsha Satya Vardhan
Harsha Satya Vardhan

Reputation: 57

My p5.js code is lagging i dont know why?

I was trying to draw while moving the circle when we press the mouse. But eventually, when I move it after some time the rotating circle and the Big circle are getting slowed. I don't know what is the reason, I was thinking it because the list is accumulated with the coordinates and making the code lag eventually please help.

If you press the mouse and wait for some time you can observe the circles getting slowed eventually. correct me if I am wrong.

class Particle{
  constructor(){
    this.center = createVector(0,0);
    this.radius = 20;
    this.theta = 0;
    this.line = createVector(0,0);
    this.history = [];
    this.velocity = createVector();

    

  }
  
  render(){
    translate(60,60);
    circle(this.center.x,this.center.y,this.radius);
    
    
    circle(this.line.x+this.center.x, this.line.y+this.center.y,10); 

    beginShape();
    for(let i=0;i < this.history.length; i++){
      let pos = this.history[i];
      noFill();
      vertex(pos.x, pos.y);
      endShape();
    }

    }
  

  update(){
    this.line.x = this.radius*cos(this.theta);
    this.line.y = this.radius*sin(this.theta);
    
    
    
    if (mouseIsPressed){
      this.center.x = (1-0.025)*this.center.x + 0.025*(this.line.x + this.center.x);
      this.center.y = (1-0.025)*this.center.y + 0.025*(this.line.y + this.center.y);


    let v = createVector(this.center.x, this.center.y);
    this.history.push(v);

    
      } else{

        this.theta += 0.01;
      } 
    
    


  }
 }
 
let particle;


function setup() {
  
  createCanvas(windowWidth, windowHeight);
  
  particle = new Particle();
}

function draw() {
  background(220);
  particle.render();
  particle.update();
  
  
}
<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
  </body>
</html>

Upvotes: 1

Views: 1382

Answers (1)

Rabbid76
Rabbid76

Reputation: 210968

There is a misalignment of beginShape() and endShape() in your code. beginShape() is before the loop, but endShape() is in the loop. Move endShape() after the loop:

beginShape();
for(let i=0;i < this.history.length; i++){
    let pos = this.history[i];
    noFill();
    vertex(pos.x, pos.y);
}
endShape();

Very likely the code is lagging, because the number of points in the history increase. Try to reduce the number of points. Pixels can only be display on integral positions. Avoid adding duplicate items to the list:


update(){
    this.line.x = this.radius*cos(this.theta);
    this.line.y = this.radius*sin(this.theta);

    if (mouseIsPressed){
        this.center.x = (1-0.025)*this.center.x + 0.025*(this.line.x + this.center.x);
        this.center.y = (1-0.025)*this.center.y + 0.025*(this.line.y + this.center.y);
        let v = createVector(this.center.x, this.center.y);
        
        let h = this.history;
        if (h.length == 0 || 
            Math.trunc(h[h.length-1].x) != Math.trunc(v.x) || 
            Math.trunc(h[h.length-1].y) != Math.trunc(v.y)) { 
            
            this.history.push(v);
        }
    
    } else{
        this.theta += 0.01;
    } 
}

If the application is still lagging, you can try drawing the dots on a p5.Renderer object the size of the canvas (createGraphics()). Draw this object on the canvas like a background image.

Upvotes: 1

Related Questions