Перемещение функции фона() в p5.js?

Question

Я сделал эскиз галактики в p5.js, используя вращение и радианы, но он стирается каждый раз, когда фон() загружается как выполняется draw(). Есть ли способ перегрузить функцию 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, а затем нарисовать фон на экране, а затем нарисовать изображение на экране. Это позволяет вам иметь фон, который меняет цвета, не перерисовывая все остальное.

Какой вариант вы выбираете, действительно зависит от того, что вы хотите.