How do you redraw an object created from a class in p5.js javascript

Question

I have a class which draws a tree, however I would like to be able to draw another tree when the mouse is pressed, however I can't currently as redraw(); simply adds a tree on top of the current canvas. I would like to be able to draw a new tree each click.

I have tried to find a way of deleting objects or resetting the class attributes however I have been unsuccessful. I have used the p5.js editor and the code below can be found here: https://editor.p5js.org/remcqueen/sketches/Sk0smd8G4

var a;

function setup() {
  createCanvas(600, 600);
  a = new clCreateTree();
}

function draw() {
  noLoop();
  background(220);
  a.draw();
}

function mousePressed() {
  redraw();

}

class clCreateTree {

  constructor() {
    this.tree = createGraphics(width, height);
    this.n = 0;
    this.leafs = [];
    this.treeHeight = 150;
    this.treeDensity = 3;
    this.treeAge = 70;
  }

  sketch() {
    this.tree.beginShape();
    this.tree.noStroke();
    this.tree.background(0, 0);

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
  }

  draw() {
    this.sketch();
    image(this.tree, 5, 5);

  }


  branch(x, y, bSize, theta, bLength, pos) {

    this.n += 0.01;
    var diam = lerp(bSize, 0.7 * bSize, pos / bLength);
    diam *= map(noise(this.n), 0, 1, 0.4, 1.6);

    this.tree.ellipse(x, y, diam, diam);
    if (bSize > 0.6) {
        if (pos < bLength) {
            x += cos(theta + random(-PI / 10, PI / 10));
            y += sin(theta + random(-PI / 10, PI / 10));
            this.branch(x, y, bSize, theta, bLength, pos + 1);
        } else {
            this.leafs.push(createVector(x, y));
            var drawLeftBranch = random(1) > 0.1;
            var drawRightBranch = random(1) > 0.1;
            if (drawLeftBranch) this.branch(x, y, random(0.5, 0.7) *  bSize, theta - random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);
            if (drawRightBranch) this.branch(x, y, random(0.5, 0.7) * bSize, theta + random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);

            if (!drawLeftBranch && !drawRightBranch) {
                this.tree.push()
                this.tree.translate(x, y);
                this.tree.rotate(theta);
                this.tree.quad(0, -diam / 2, 2 * diam, -diam / 6, 2 * diam, diam / 6, 0, diam / 2);
                this.tree.pop();
            }
        }
     }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

The expect result should be that when the mouse is pressed, a new tree is drawn without any overlap which currently occurs.

Rabbid76 · Accepted Answer · 2019-01-11T20:21:43.740

You have to clear() the graphics object before you draw the tree:

sketch() {
    this.tree.beginShape();
    this.tree.clear(); // <--- clear
    this.tree.noStroke();

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
}

Or you have to draw a solid background (alpha = 255) before you draw the tree:

sketch() {
    this.tree.beginShape();

    this.tree.noStroke();
    this.tree.background(255,255);

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
}

var a;

function setup() {
  createCanvas(600, 600);
  a = new clCreateTree();
}

function draw() {
  noLoop();
  background(220);
  a.draw();
}

function mousePressed() {
  redraw();

}

class clCreateTree {

  constructor() {
    this.tree = createGraphics(width, height);
    this.n = 0;
    this.leafs = [];
    this.treeHeight = 150;
    this.treeDensity = 3;
    this.treeAge = 70;
  }

  sketch() {
    this.tree.beginShape();
    this.tree.clear();
    this.tree.noStroke();

    for (var i = 0; i < this.treeDensity; i++) {
        this.tree.fill(map(i, 0, 2, 60, 20));
        this.branch(width/2, height, this.treeAge, -HALF_PI, this.treeHeight, 0);
    }
    this.tree.endShape();
  }

  draw() {
    this.sketch();
    image(this.tree, 5, 5);

  }


  branch(x, y, bSize, theta, bLength, pos) {

    this.n += 0.01;
    var diam = lerp(bSize, 0.7 * bSize, pos / bLength);
    diam *= map(noise(this.n), 0, 1, 0.4, 1.6);

    this.tree.ellipse(x, y, diam, diam);
    if (bSize > 0.6) {
        if (pos < bLength) {
            x += cos(theta + random(-PI / 10, PI / 10));
            y += sin(theta + random(-PI / 10, PI / 10));
            this.branch(x, y, bSize, theta, bLength, pos + 1);
        } else {
            this.leafs.push(createVector(x, y));
            var drawLeftBranch = random(1) > 0.1;
            var drawRightBranch = random(1) > 0.1;
            if (drawLeftBranch) this.branch(x, y, random(0.5, 0.7) *  bSize, theta - random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);
            if (drawRightBranch) this.branch(x, y, random(0.5, 0.7) * bSize, theta + random(PI / 15, PI / 5), random(0.6, 0.8) * bLength, 0);

            if (!drawLeftBranch && !drawRightBranch) {
                this.tree.push()
                this.tree.translate(x, y);
                this.tree.rotate(theta);
                this.tree.quad(0, -diam / 2, 2 * diam, -diam / 6, 2 * diam, diam / 6, 0, diam / 2);
                this.tree.pop();
            }
        }
     }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

How do you redraw an object created from a class in p5.js javascript

1 Answers1