在P5.js中绘制日食

Question

我试图在月食之后创造一个星夜，但开始的方向不对。现在星星位于右下角。我认为这与“翻译”有关 有什么建议吗？

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;
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)));
  push();
  translate(width / 2, height / 2);
  fill("yellow");
  circle(0, 0, 80);
  fill("white");
  circle(val, 0, 80);
  pop();

  for (var i = 0; i < stars.length; i++) {
    stars[i].draw();
  }
}

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;
    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>