soyunk – project- 03 – Dynamic Drawing

sketch

var midWidth = 320;
var midHeight = 240;
var diam = 40;
var midWidthR = 480;
var midWidthL = 160;
var midHeightT = 120;
var midHeightB = 360;


function setup() {
    createCanvas(640,480);
  
}

function draw() {


    var ColorR = map(mouseY,0,midHeight,173,74);
    var ColorG = map(mouseY,0,midHeight,216,0);
    var ColorB = map(mouseY,0,midHeight,230,128);

    background(ColorR,ColorG,ColorB); //background changing color when mouse moves up and down

    
    var moonR = map(mouseY,0,midHeight,255,255); //colors for the center circle
    var moonG = map(mouseY,0,midHeight,102,255);
    var moonB = map(mouseY,0,midHeight,0,179);

    fill(moonR,moonG,moonB); // center circle
    noStroke();
    ellipse(midWidth,midHeight,diam*2,diam*2);
    

    if (mouseY >= midHeight) { //center circle increases size depending on mouseY
    	diam += (diam + 5) <= 120;
    } else {
    	diam -= (diam - 5) >= 20;
    }



    fill(255); //text 
    textSize(30);
    textFont("Britanic Bold");


    if (mouseY <= midHeight) { //text indicates changing time depending on mouseY
    	text("7:00 a.m.",midWidthR,midHeightT);
    } else {
    	text("11:59 p.m.",midWidthR,midHeightT);
    }

        //stars 
        //stars move in and out depending on mouseY by using variable diam.
    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthL,midHeightT-(diam/3),8,8);
    }
    
    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	}else {
    		stroke(0);
    	}
    	ellipse((midWidthL/2)-(diam/4),midHeightT/2,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthR,midHeightB+(diam/2),8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthR+(diam/2),midHeightT/2,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthL-(diam/2),midHeightB,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthL-diam,midHeight,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidthR+diam,midHeight,8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidth,midHeightT-(diam/2),8,8);
    }

    if (mouseIsPressed) {
    	if (mouseButton == LEFT) {
    		stroke('yellow');
    	} else {
    		stroke(0);
    	}
    	ellipse(midWidth,midHeightB+(diam/2),8,8);
    }

}

Creating each stars was a task but finding out that using my diam variable on the stars will move it inward and outward due to the previous code was an accident which helped me learned more.