CODEWITHSUNDEEP
javascriptp5.js
Max
Max

Reputation: 23

How to increase the brightness of an ellipse

I have a small code based on the sun setting down over time and the moon appearing in the sky and the image darkens as if it becomes night time. The issue is that the moon also darkens with the rectangle that covers the whole screen to darken gaining its transparency more and more every tick. How can I make the moon stand out so it is bright and white?

I have tried using the brightness() command but can't get my head over it.

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


}

Expected: Sun descends while moon appears brighter every second. The screen gets darker as the moon is visible bright and glorious. Output: Sun descends, moon appears brighter but the brightness is reduced as the screen gets darker.

Upvotes: 2

Views: 678

Answers (1)

Luke Garrigan
Luke Garrigan

Reputation: 5011

As mentioned in the comments by Andrew Morton, you are overlaying the scene with a rectangle which replicates darkness:

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

The issue with this is that it also overlays the moon, which makes the moon darken too. If you move the drawing of the moon code so that is is after the darkening rectangle, you'll have yourself a nice bright moon at night!

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>

Upvotes: 2

Related Questions