Category: 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.

var bgR = 255;
var bgG = 0;
var bgB = 127.5;
var rad = 20;

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

function draw() {
    background(0);
    fill(255);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 540), 100);
    changes(m);
    //rotates rectangle according to mouseX position
    push();
    translate(width/2,height/2);
    rotate(radians((mouseX/2)%180));
    rect(0, 0, 50,50);
    pop();
    //creates two ellipses whose size/color/position are based on mouseX position
    fill(bgR, bgG, bgB);
    ellipse(m, 100,rad, rad);
    ellipse(width-m, 380, rad, rad);
}

function changes(x){
	var unit = 255/600.00
	//color changes based on mouseX and mouseY
	bgR = 255-unit*mouseY;
	bgB = 0 + unit*mouseX;
	if (x <= 300) {
		bgG = 127.5+unit*mouseY;
	}else {
		bgG = 127.5-unit*mouseY;
	}
	//radius of ellipses changes based on mouseX position
	rad = mouseX/8;
}