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()函数会使用纯色（或图像）填充窗口，并绘制您之前绘制的任何内容。

解决这个问题的方法不是“覆盖”background()功能。这是重组您的程序，以便您的东西得到正确的绘制。具体如何做到这一点取决于你想要发生什么。

选项1：只调用一次background()功能。

如果您只想在开头使用黑色背景，而您在draw()功能中所做的一切仍然会加起来，那么您可能只想调用一次background()功能。例如，您可以将其作为setup()函数的最后一行。

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

这可能是最典型的情况。如果你想在移动的形状后面绘制背景，你将不得不将这些形状存储在某种数据结构中，然后在每一帧中绘制所有这些形状。

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

这是前两个选项之间的混合。您可以将所有内容（背景除外）绘制到屏幕外PImage，然后将背景绘制到屏幕，然后将图像绘制到屏幕上。这使您可以使用背景来更改颜色，而无需重新绘制其他所有内容。

您选择哪个选项实际上取决于您想要发生的事情。

覆盖p5.js中的background（）函数？

1 个答案: