Liu Xiangqi-Project03

sketch

// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-03
var backR = 255;
var backG = 219;
var backB = 77;
var radian = 0;
var size = 150;
var roundR = 255;
var roundG = 102;
var roundB = 0;
function setup() {
    createCanvas(640, 480)
}
 
function draw() {
    background(backR, backG, backB);
    noStroke();
    //change the background color 
    backR = map(mouseX, 0, width, 255, 0);
    backG = map(mouseX, 0, width, 219, 20);
    backB = map(mouseX, 0, width, 77, 51);
    
    if (mouseX > width ) {
        backR = 0;
        backG = 20;
        backB = 51;
    }
    
    if (mouseX < 0) {
        backR = 255;
        backG = 219;
        backB = 77;
    }
    
    //change the position of the moon/sun
    push();
    radian = map(mouseX, 0, width, 0, 1.57);
    translate(320,0);
    rotate(radian);
    
    //change the color
    roundR = map(mouseX, 0, width, 255, 255);
    roundG = map(mouseX, 0, width, 102,255);
    roundB = map(mouseX, 0, width, 0, 0); 
    fill(roundR, roundG, roundB);
    ellipse(200, 75, 150, 150);
    
    //change the size of the breach
    size = map(mouseX, 0, width, 0, 150);
    fill(backR, backG, backB)
    ellipse(200, 150, size, size);
    pop();
}   

I don’t know why the moon stuck in the middle of the canvas. It moves smoothly to the upper-left corner on my browser.