在 p5.js 中翻译后绘图偏离中心

Question

我试图在月食之后创造一个星夜，但开始的方向不对。现在星星位于右下角。我认为这与

translate

有关。有什么建议吗？

let slider ;
let val ;
var stars = [];

function setup() {
  createCanvas(600, 600);
  slider = createSlider(-80,0,-80);
  slider.position(10,10);
  slider.style('width', '100px');
  slider.style('border-radius', '50&');
  colorMode(HSB);
  
  for (var i = 0; i < 100; i++) {
    stars[i] = new Star();
  }
}

function draw() {
  background(30);
  
  val = slider.value();
  
  background(color(204,30,map(abs(val),0,80,10,80)));
  translate(width/2,height/2);
  
  fill('yellow');
  circle(0,0,80);
  //fill(color(204,30,map(abs(val),0,80,10,80)));
  //stroke(color(205,30,map(abs(val),0,80,50,90),.3));
  fill('white');
  circle(val,0,80);
    
  for (var i = 0; i < stars.length; i++) {
    stars[i].draw();   
  }
}


// star class //
class Star {
    constructor() { 
      
        this.x = random(width);
        //this.x = (width);
        this.y = random(height);
        this.size = random(.25,3);
        this.t = random(TAU);
    }
    
    draw() {
        this.t += 0.1;
        var scale = this.size + sin(this.t) * 2;
        noStroke();
        ellipse(this.x, this.y, scale, scale);
    }

}

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

当使用滑块月亮经过太阳时，日光应该消失，并且应该出现繁星点点的夜空。

Answer 1

您对

translate

的预感是正确的。通常，当使用全局画布转换时，您希望在

push()

操作之前使用

translate

保存上下文，然后

pop()

恢复它：

let slider;
const stars = [];

function setup() {
  createCanvas(600, 600);
  slider = createSlider(-80, 0, -80);
  slider.position(10, 10);
  slider.style("width", "100px");
  slider.style("border-radius", "50&");
  colorMode(HSB);

  for (let i = 0; i < 100; i++) {
    stars[i] = new Star();
  }
}

function draw() {
  background(30);
  const val = slider.value();
  background(color(204, 30, map(abs(val), 0, 80, 10, 80)));
  stars.forEach(e => e.draw());

  push();
  translate(width / 2, height / 2);
  fill("yellow");
  circle(0, 0, 80);
  fill("white");
  circle(val, 0, 80);
  pop();
}

class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(0.25, 3);
    this.t = random(TAU);
  }

  draw() {
    this.t += 0.1;
    const scale = this.size + sin(this.t) * 2;
    noStroke();
    ellipse(this.x, this.y, scale, scale);
  }
}

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

另一种选择是使用

translate(width / -2, height / -2);

撤消翻译，但是

push()

和

pop()

更通用，更容易推理。

我在太阳和月亮之前画星星，这在天文学上更正确。

顺便说一句，避免使用

var

，而使用

const

和

let

。