rgroves – Dynamic Drawing – Section B

sketch

 var x = 565


function setup() {
    createCanvas(600, 600);
}

function draw() {


//still objects
	rectMode(CORNER);

	//solid shapes for walls and floor
    background(113, 146, 128)
    noStroke();
    fill(96, 129, 118);
    rect(375, 0, width - 375, height);
    fill(119, 89, 79);
    beginShape();
    vertex(0, (1/2) * height);
    vertex(375, (1/2) * height);
    vertex(width, height);
    vertex(0, height);
    endShape();

    //window; slope of top is -1/2, slope of bottom is -3/4
    stroke(230);
    strokeWeight(6);
    fill(209, 213, 207);
    beginShape();
    vertex(390, 50);
    vertex(590, 150);
    vertex(590, 350);
    vertex(390, 200);
    vertex(390, 50);
    endShape();

    //landscape
    noStroke();
    fill(165, 158, 74);
    beginShape();
    vertex(393, 160);
    vertex(420, 150);
    vertex(470, 190);
    vertex(500, 185);
    vertex(520, 200);
    vertex(575, 195);
    vertex(587, 210);
    vertex(587, 344);
    vertex(393, 197);
    vertex(393, 175);
    endShape();

    //sun
    fill(254, 247, 146);
    ellipse(540, 170, 15, 15);

    //window frame
    stroke(230);
    strokeWeight(6);
    line(390, 125, 590, 250);

    //bedframe back
    noStroke();
    fill(115, 73, 74);
    rect(187, 150, 188, 70);
    stroke(100, 60, 60);
    line(190, 150, 372, 150);
    noStroke();
    fill(183, 153, 120);
    rect(187, 135, 15, 185);
    rect(360, 135, 15, 185);

    //mattress 
    fill(36, 68, 116);
    beginShape();
    vertex(367, 235);
    vertex(521, 420);
    vertex(521, 460);
    vertex(228, 460);
    vertex(195, 275);
    vertex(195, 235);
    endShape();

    //pillow
    rectMode(CENTER);
    fill(238, 215, 216);
    rect(281, 225, 80, 60, 15);
    fill(137, 113, 113);
    ellipse(281, 225, 8, 8);
    strokeWeight(2);
    stroke(137, 113, 113);
    line(266, 210, 296, 240);
    line(266, 240, 296, 210);



    //nightstand  
    rectMode(CORNER);
    stroke(187, 82, 49);
    strokeWeight(10);
    line(45, 230, 55, 320);
    line(155, 230, 145, 320);
    stroke(167, 62, 29);
    line(120, 230, 115, 305);
    noStroke();
    fill(187, 82, 49);
    ellipse(100, 230, 120, 36);

//interactive elements

	//left curtain
	fill(147, 75, 103);
	beginShape();
	vertex(385, 35);
	vertex(410, 50);
	vertex(410, 232.5);
	vertex(385, 210);
	endShape();

	beginShape();
	curveVertex(385, 210);
	curveVertex(385, 210);
	curveVertex(387, 225);
	curveVertex(400, 227);
	curveVertex(410, 232.5);
	curveVertex(410, 232.5);
	endShape();

	//right curtain
    if (490 < mouseX & mouseX < 565 & 100 < mouseY && mouseY < 352.5) {
    	quad(595, 140, 595, 375, 
    		mouseX, 352.5 - ((.75) * (565 - mouseX)), 
    		mouseX, 125 - ((.5) * (565 - mouseX)));
    	x = mouseX
    	//make the sunlight fade as the curtain closes
    	fill (242, 235, 177, (8/3) * mouseX - (3920/3)); 
    	quad(195 + 12.5, 265, 360, 265, 400, 325, 195 + 30, 325);
    	quad(195 + 12.5, 265, 195 + 30, 325, 195 + 30, 460, 195 + 12.5, 340);
    	quad(180, 340, 200, 460, 125, 460, 107.5, 340);
	} else {
		quad(595, 140, 595, 375, 
    		x, 352.5 - ((.75) * (565 - x)), 
    		x, 125 - ((.5) * (565 - x)));
    	fill (242, 235, 177, (8/3) * x - (3920/3)); 
    	quad(195 + 12.5, 265, 360, 265, 400, 325, 195 + 30, 325);
    	quad(195 + 12.5, 265, 195 + 30, 325, 195 + 30, 460, 195 + 12.5, 340);
    	quad(180, 340, 200, 460, 125, 460, 107.5, 340);
	}

	//bedframe front
	rectMode(CORNER);
    fill(115, 73, 74);
    rect(220, 350, 313, 90);
    stroke(100, 60, 60);
    line(225, 350, 528, 350);
    noStroke();
    fill(200, 163, 140);
    rect(220, 330, 20, 200);
    rect(513, 330, 20, 200);

    //lamp
	if(dist(115, 192, mouseX, mouseY) <= 40) {
		fill(87, 80, 63);
		ellipse(115, 230, 40, 20);
		rectMode(CENTER);
		rect(115, 211, 10, 37.5);
		fill(98, 131, 139);
		ellipse(115, 192, 50, 25);
		beginShape();
		vertex(90, 192);
		vertex(105, 152);
		vertex(125, 152);
		vertex(140, 192);
		endShape();
		//make the room darker
		rectMode(CORNER);
		fill(65, 78, 120, 150);
		rect(0, 0, 600, 600);
	} else {
		fill(161, 137, 137);
		ellipse(115, 230, 40, 20);
		rectMode(CENTER);
		rect(115, 211, 10, 37.5);
		fill(241, 253, 208);
		ellipse(115, 192, 50, 25);
		beginShape();
		vertex(90, 192);
		vertex(105, 152);
		vertex(125, 152);
		vertex(140, 192);
		endShape();
	}
}

This project turned out to be a lot harder than I expected it to be, and I wasn’t able to include all of the elements I wanted to. As of now, when you hover over the lamp the room gets darker and you can use the mouse to open and close the curtain and the intensity of the sunlight on the bed will change.

I particularly struggled with the curtain – first I couldn’t figure out how to make it move with the mouse and then I couldn’t figure out how to make it stay in the same place when the mouse moved away. I realized that when you translate the origin inside push, pop and try to use mouseX and mouseY, the position contained in them is not translated. That took me about 2 hours to work out!