在 p5.js 中覆盖 background() 函数？

Question

我在 p5.js 中使用旋转和弧度绘制了一个星系草图，但每次在运行 draw() 时加载 background() 时它都会被擦除。有没有办法覆盖 background() 函数？我希望星系保持在视野中。

 var stars;

function preload(){
//for (var i = 0; i < planetArray.length; i++) {
//stars = loadImage('Assets/stars.png');
}

function setup(){
  createCanvas(windowWidth, windowHeight);

}
function draw() {
  //background(0);
  star()
  //function mousepressed(){
}
  function star(){
  //angle = map(mouseX, 0,width, 0,360);
  //rotate(radians(angle*100));  
  noStroke();
  //translate(width/2, height/2);
  translate(mouseX,mouseY);
  fill(0);
  rotate(radians(frameCount%360)); //rotates output of ellipses
  rotate(radians(1000*frameCount%360));
  for(var i =0; i < 20; i++){
    push();
    noStroke();
    fill(random(200),0,random(150),random(2));
   // fill(random(125),random(250),random(100));
    ellipse(10*frameCount % (width/10),0,10,10);
    //image(stars, 10*frameCount % (width/2),0,10,10)
    //image((10*frameCount % (width/2),0,10,10)
    //
    pop();
  }
}

Answer 1

好吧，它真的没有任何魔力。调用 background() 函数会用纯色（或图像）填充 window 并覆盖您之前绘制的任何内容。

此问题的解决方案不是 "over-ride" background() 函数。这是为了重组您的程序，以便正确绘制您的东西。具体如何操作取决于您希望发生什么。

选项1：只调用一次background()函数。

如果您只想在开始时使用黑色背景，并且您在 draw() 函数中所做的所有操作仍然应该相加，那么也许您只想调用一次 background() 函数。例如，您可以将其作为 setup() 函数的最后一行。

选项 2：将要绘制的所有内容存储在数据结构中。

这可能是最典型的案例。如果要在移动的形状后面绘制背景，则必须将这些形状存储在某种数据结构中，然后每一帧绘制所有这些形状。

选项 3：绘制到屏幕外的图像，然后将该图像绘制在背景之上。

这是前两个选项的混合体。您可以将所有内容（除了背景）都绘制到屏幕外 PImage，然后将背景绘制到屏幕，然后将图像绘制到屏幕。这允许您拥有一个可以改变颜色的背景，而无需重新绘制其他所有内容。

您选择哪个选项完全取决于您想要发生什么。

在 p5.js 中覆盖 background() 函数？

Over-riding the background() function in p5.js?

processing

graphics

background

p5.js