如何增加椭圆的亮度

时间:2019-07-15 10:53:32

标签: javascript p5.js

我有一个小代码,该代码基于太阳随着时间的推移落下,月亮出现在天空中而图像变暗,好像变成了夜间。问题在于,月亮也随着覆盖整个屏幕的矩形而变暗,从而使每个刻度线越来越透明。我怎样才能使月亮脱颖而出,使它明亮白净?

我已经尝试过使用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


}

预期:太阳下降,而月亮每秒变亮。随着月亮变得明亮而光荣,屏幕变得更暗。 输出:太阳下降,月亮显得更亮,但是随着屏幕变暗,亮度会降低。

1 个答案:

答案 0 :(得分:1)

如安德鲁·莫顿(Andrew Morton)的评论中所述,您正在用复制黑暗的矩形覆盖场景:

<div class="box-body table-responsive">
          <table id="datatable" class="table table-bordered table-striped">
            <thead> 
              <tr>
                <th>NO</th>
                <th>MODEL</th>
                <th>MATERIALNO</th>
                <th>MATERIALDESC</th>
                <?php

                  $trkh_d = "";

                    $tday_month = date("t",mktime(0,0,0,$trkh_m,1,$trkh_y));
                    if ($trkh_d != "") 
                    {
                      $tday_month = $trkh_d;
                      $trkh_start_day = $trkh_d;

                    } else {
                      $tday_month = $tday_month;
                      $trkh_start_day = 1;
                    }

                    for ($t = $trkh_start_day; $t <= $tday_month; $t++) {   

                        echo '<th>'.str_replace('_',' ',strtoupper($t)).'</th>';


                       }  ?>
              </tr>
            </thead>
            <tbody>
              <?php $no =1;
              if (isset($result_display)) 
              {
                echo "<p>Result :<b> " . $trkh_m . " - " . $trkh_y . "</b></p>";
                if ($result_display == 'No record found !') {
                echo $result_display;
              } else {
                for ($i=0; $i < count($result_display); $i++) { ?>

                <tr>
                  <td><?=$no++ ?></td>
                  <td><?=$result_display[$i]['MODEL'] ?></td>
                  <td><?=$result_display[$i]['MATERIALNO'] ?></td>
                  <td><?=$result_display[$i]['MATERIALDESC'] ?></td>

                  <?php 

                    for($baris = $trkh_start_day; $baris <= $tday_month; $baris++) {
                      if ($baris == $result_display[$i]['STARTDATE']){
                        echo "<td>". $result_display[$i]['STARTDATE']. "</td>" ;
                      } else {
                        echo "<td>". "-". "</td>" ;
                      }

                      }
                      } ?>
                <?php } ?>
                <?php } ?>
                </tr>
            </tbody>
          </table>
        </div>

问题在于它也覆盖了月亮,这也使月亮也变暗了。如果您在变暗的矩形之后移动月亮代码的绘图,那么晚上您将拥有一个漂亮的明亮月亮!

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


}