CODEWITHSUNDEEP
javascriptprocessingp5.js
Peanut Jams
Peanut Jams

Reputation: 384

p5.js shape update issue

Um. I need help with the following p5.js code to make the shapes stop "bluring" I mean how to make it so those shapes no longer have trails.

I believe the issue is relates to the "update" part. But i am not sure how to fix it.

Thanks

let cubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  backCol = color(40, 100, 124);
  background(backCol);

  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      let xPos = map(i, 0, 9, 50, width - 50);
      let yPos = map(j, 0, 9, 50, height - 50);

      cubes.push(new Cubes(xPos, yPos));

    }
  }

}

function draw() {
  noFill();
  noStroke();
  rect(0, 0, width, height);

  for (let a = 0; a < cubes.length; a++) {
    cubes[a].update();
  }

}

class Cubes {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 50;
  }

  update() {
    this.shape();
  }

  shape() {
    push();
    stroke(255);
    translate(this.x - width / 2, this.y - height / 2, 0);
    rotateX(millis() / 1000);
    rotateY(millis() / 800);
    ambientMaterial('clear');
    box(this.size);
    pop();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Upvotes: 1

Views: 284

Answers (1)

Rabbid76
Rabbid76

Reputation: 210968

You have to clear the background, by background() at begin of draw:

function draw() {
    background(backCol);  
    noFill();
    noStroke();
    rect(0, 0, width, height);

    for (let a = 0; a < cubes.length; a++) {
        cubes[a].update();
    }
}

Note, background() does not just set the background color, it actually clears the background. Invoking background() in draw(), ensures that the canvas is cleared in every frame.

See the example:

let cubes = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  backCol = color(40, 100, 124);
  background(backCol);

  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      let xPos = map(i, 0, 9, 50, width - 50);
      let yPos = map(j, 0, 9, 50, height - 50);

      cubes.push(new Cubes(xPos, yPos));

    }
  }

}

function draw() {
    background(backCol);  
    noFill();
    noStroke();
    rect(0, 0, width, height);

    for (let a = 0; a < cubes.length; a++) {
        cubes[a].update();
    }
}

class Cubes {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 50;
  }

  update() {
    this.shape();
  }

  shape() {
    push();
    stroke(255);
    translate(this.x - width / 2, this.y - height / 2, 0);
    rotateX(millis() / 1000);
    rotateY(millis() / 800);
    ambientMaterial('clear');
    box(this.size);
    pop();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

Upvotes: 2

Related Questions