zhennan hao's Week 3

by zhennan hao

HTML

<div id="drawing">



</div>

JavaScript

"use strict"

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


var sun = draw.circle(100).fill('gold').move(520, -20)


//draw a polygon as a frame include all stuffs. it can be fill black color as background of night.
var polygon = draw.polygon([
  [0, 0],
  [600, 0],
  [600, 400],
  [0, 400]
]).fill('none').stroke({
  width: 2
})



function drawBase(basex, basey, c1, c2) {
  /*this function draw the base of the tree house. it has four parameters,
    1. basex = x location of the base,
    2. basey = y location of the base,
    3. c1 = the color of the first two parts of base,
    4. c2 = the color of the bottom part of base,
   */
  //draw the top part of the base
  var topBase = draw.rect(150, 85).fill(c1).
  //this is light brown color. 
  stroke({
    width: 2
  })

  topBase.move(basex, basey);

  //add a rectangle as the middle part of the base, also call the middle room.
  var middleBase = draw.rect(275, 150).fill(c1). //this is light brown color.
  stroke({
    width: 2
  })
  middleBase.move(basex - 40, basey + 85);

  //add a rectangle as the bottom base.
  var BottomBase = draw.rect(320, 40).fill(c2). //this is a pink color.
  stroke({
    width: 2
  })
  BottomBase.move(basex - 65, basey + 235);
}

drawBase(190, 25, '#A0522D', '#ff7c4d')


//this function draw three windows and a door. one window is on the top base. win2, win3 and door are on the middle base.
function drawWD(wdx, wdy, c) {
  //draw a rectangle on the top base as window1.
  var win1 = draw.rect(115, 65).fill(c). //this is dark brown color. 
  stroke({
    width: 2
  })
  win1.move(wdx, wdy);

  //draw a rectangle on the middle room near the window1 as window2.
  var win2 = draw.rect(75, 50).fill(c).
  stroke({
    width: 2
  })
  win2.move(wdx - 25, wdy + 90);

  //draw a rectangle on the middle base close to the bottom base as window3. 
  var win3 = draw.rect(75, 50).fill(c).
  stroke({
    width: 2
  })
  win3.move(wdx, wdy + 165);
  //draw a rectangle on the middle base close the right...