如何重绘从 class in p5.js javascript 创建的对象

Question

我有一个 class 可以绘制一棵树，但是我希望能够在按下鼠标时绘制另一棵树，但是我目前不能像 redraw();只需在当前 canvas 之上添加一棵树。我希望每次点击都能绘制一棵新树。

我试图找到一种删除对象或重置 class 属性的方法，但一直没有成功。我使用了 p5.js 编辑器，下面的代码可以在这里找到：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>

预期的结果应该是当按下鼠标时，绘制一棵新树，没有任何当前发生的重叠。

Answer 1

你必须 clear() 在你画树之前 graphics object:

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();
}

或者在绘制树之前必须先绘制纯色背景 (alpha = 255):

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>

如何重绘从 class in p5.js javascript 创建的对象

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

javascript

processing

class

redraw

p5.js