Week 2House D1 Variables

by zhennan hao

HTML

<div id="drawing"></div>

JavaScript

var draw = SVG('drawing').size(600, 400);

/*
For this project, you will need to give initial values to the variables provided below. You can find these values in your individually assigned house PDF.

Remember, the format for giving a variable an initial Number value is:

var myVariableName = 7;
*/

var win1x; win1x = 200
var win1y; win1y = 35

var win2x; win2x = 175
var win2y; win2y = 125

var win3x; win3x = 200
var win3y; win3y = 200

var doorx; win4x = 325
var doory; win4y = 125

/*
Write your house drawing code below this comment. HINT: You can adapt much of Part 1 of this assignment to work for this part. Just remember that every shape you draw for the 4 house components that match the variable names shown here MUST use those variables.
*/ 

//add outside red box. 
var polygon = draw.polygon('0,0 600,0 600,400 0,400').fill('none').stroke({
  width: 1,
  color: '#ff0000'
}) //this a red color.


//below is the main part of the treehouse.
//add a rectangle as the room on the top
var topRoom = draw.rect(150, 85).fill('#A0522D').//this is light brown color. 
stroke({
  width: 2
})
topRoom.move(190, 25);

function drawWin1() {
//add a rectangle as the window on the top room.
var win1 = draw.rect(115, 65).fill('#5a2d0c').//this is dark brown color. 
stroke({
  width: 2
})
win1.move(win1x, win1y);
}
drawWin1()

//add a rectangle as the biggest room.
var biggestRoom = draw.rect(275, 150).fill('#A0522D').//this is light brown color.
stroke({
  width: 2
})
biggestRoom.move(150, 110);

//add a rectangle as the left top window on the biggest room.
var win2 = draw.rect(75, 50).fill('#5a2d0c').//this is dark brown color.
stroke({
  width: 2
})
win2.move(win2x, win2y);

//add a rectangle as the left bottom window on the biggest room.
var win3 = draw.rect(75, 50).fill('#5a2d0c').//this is dark brown color.
stroke({
  width: 2
})
win3.move(win3x, win3y);

//add a rectangle as the door of the biggest room.
var door = draw.rect(75, 135).fill('#5a2d0c').//this is dark brown...