如何增加椭圆的亮度

Question

我有一个小代码，基于太阳随着时间的推移而落下，月亮出现在天空中，图像变暗，好像变成了夜晚。问题是，月亮也会随着覆盖整个屏幕的矩形变暗，每次滴答时越来越透明。怎样才能把月亮弄得又亮又白？

我试过使用 brightness() 命令，但无法理解它。

var groundHeight;
var mountain1;
var mountain2;

var tree;

var moon;
var sun;
var darkness;

var moonB;

function setup()
{
createCanvas(800, 600);
//set the groundHeight proportional to the canvas size
groundHeight = (height / 3) * 2;

//initialise the the mountain objects with properties to help draw them 
to the canvas
mountain1 = {
    x: 400,
    y: groundHeight,
    height: 320,
    width: 230
};
mountain2 = {
    x: 550,
    y: groundHeight,
    height: 200,
    width: 130
};

//initalise the tree object
tree = {
    x: 150,
    y: groundHeight + 20,
    trunkWidth: 40,
    trunkHeight: 150,
    canopyWidth: 120,
    canopyHeight: 100
};

//initalise the sun 
sun = {
    x: 150,
    y: 70,
    diameter: 80,
};

moonB = 0

moonX = 700


//set the initial darkness
darkness = 0


}



function draw()
{


//draw the sky
background(150, 200, 255);
noStroke();

//draw the sun
fill(255, 255, 0);
ellipse(sun.x, sun.y, sun.diameter + 10);

//TASK: you'll need to draw the moon too. Make sure you use brightness to adjust the colour
fill(250, moonB)
ellipse(moonX,50, sun.diameter - 5);

//drawhe ground and make it green
fill(70, 200, 0);
rect(0, groundHeight, width, height - groundHeight);

//draw the mountains
fill(120);
triangle(mountain1.x, mountain1.y,
    mountain1.x + mountain1.width, mountain1.y,
    mountain1.x + (mountain1.width / 2), mountain1.y - mountain1.height);

triangle(mountain2.x, mountain2.y,
    mountain2.x + mountain2.width, mountain2.y,
    mountain2.x + (mountain2.width / 2), mountain2.y - mountain2.height);



//make the scene dark by drawing a rectangle that covers the whole canvas.
//Use the alpha value of fill to determine how dark to make it
fill(50, darkness);
rect(0,0,800,600)
sun.y = sun.y + 3;
darkness = min(darkness + 1,150);
moonB = moonB + 3


}

预期：太阳下山，月亮每秒都在变亮。屏幕变暗，因为月亮是可见的明亮和光荣。输出：太阳下山，月亮看起来更亮，但亮度随着屏幕变暗而降低。

Answer 1

正如 Andrew Morton 在评论中提到的，您正在用一个复制黑暗的矩形覆盖场景：

fill(50, darkness);
rect(0, 0, 800, 600);

这个问题是它也覆盖了月亮，这使得月亮也变暗了。如果你将月亮代码的绘图移动到变暗的矩形之后，你将在晚上拥有一个漂亮的明月！

var groundHeight;
var mountain1;
var mountain2;

var tree;

var moon;
var sun;
var darkness;

var moonB;

function setup() {
    createCanvas(800, 600);
    //set the groundHeight proportional to the canvas size
    groundHeight = (height / 3) * 2;


    mountain1 = {
        x: 400,
        y: groundHeight,
        height: 320,
        width: 230
    };
    mountain2 = {
        x: 550,
        y: groundHeight,
        height: 200,
        width: 130
    };

    //initalise the tree object
    tree = {
        x: 150,
        y: groundHeight + 20,
        trunkWidth: 40,
        trunkHeight: 150,
        canopyWidth: 120,
        canopyHeight: 100
    };

    //initalise the sun 
    sun = {
        x: 150,
        y: 70,
        diameter: 80,
    };

    moonB = 0

    moonX = 700


    //set the initial darkness
    darkness = 0


}



function draw() {


    //draw the sky
    background(150, 200, 255);
    noStroke();

    //draw the sun
    fill(255, 255, 0);
    ellipse(sun.x, sun.y, sun.diameter + 10);

 

    //drawhe ground and make it green
    fill(70, 200, 0);
    rect(0, groundHeight, width, height - groundHeight);

    //draw the mountains
    fill(120);
    triangle(mountain1.x, mountain1.y,
        mountain1.x + mountain1.width, mountain1.y,
        mountain1.x + (mountain1.width / 2), mountain1.y - mountain1.height);

    triangle(mountain2.x, mountain2.y,
        mountain2.x + mountain2.width, mountain2.y,
        mountain2.x + (mountain2.width / 2), mountain2.y - mountain2.height);



    //make the scene dark by drawing a rectangle that covers the whole canvas.
    //Use the alpha value of fill to determine how dark to make it
    fill(50, darkness);
    rect(0, 0, 800, 600)
    sun.y = sun.y + 3;
    darkness = min(darkness + 1, 150);
    moonB = moonB + 3
  
     //TASK: you'll need to draw the moon too. Make sure you use brightness to adjust the colour
    fill(250, moonB)
    ellipse(moonX, 50, sun.diameter - 5);


}

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

如何增加椭圆的亮度

How to increase the brightness of an ellipse

javascript

p5.js