HW2 B4 with Functions

Zhaoliang Zhang

by Zhaoliang

HTML

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

JavaScript

/*
W2 House B4 Functions Homework 2
Zhaoliang Zhang
09/30/2018
*/
"use strict"

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

//Set the redline box
let redboxbase = draw.rect(600,400)
redboxbase.fill('white');
redboxbase.stroke('red');

//Set the housebody as base
function makeBaseB4(basex,basey,c){
let BaseB4 = draw.rect(550,200).x(basex).y(basey).fill(c)
BaseB4.stroke('black').stroke({width:2});
}


//Set roofs and top window
function makeRoofB4(roofx,roofy){
let roof1 = draw.polygon([[roofx,roofy], [roofx+200,roofy-150], [roofx+400,roofy]]).fill("#707B7C")
roof1.stroke('black').stroke({width:2})

let roof= draw.polygon([[roofx-150,roofy], [roofx+50,roofy-150], [roofx+250,roofy]]).fill("#8a8a5c")
roof.stroke('black').stroke({width:2});


//top window with window lines
let window1= draw.circle(100).cx(roofx+50).cy(roofy-65).fill("#F1948A")
window1.stroke("black").stroke({width:2});

let window11= draw.circle(80).cx(roofx+50).cy(roofy-65).fill("#b3f0ff")
window11.stroke("black").stroke({width:2});

//top windowlines
let windowline1= draw.line(roofx+50,roofy-105,roofx+50,roofy-25).stroke({width:2})
let windowline2= draw.line(roofx+10,roofy-65,roofx+90,roofy-65).stroke({width:2})
}


//set the door with smileface ：）
function makeDoorB4(doorx,doory){
let door=draw.rect(105,125).x(doorx).y(doory).fill("#c0c059")
door.stroke("black").stroke({width:2});

let door1=draw.rect(95,120).x(doorx+5).y(doory+5).fill("#996600")
door1.stroke("black").stroke({width:2});
let smileface2=draw.circle(20).cx(doorx+47).cy(doory+60).fill("#FFFF00")

let smileface3=draw.circle(20).cx(doorx+47).cy(doory+55).fill("#996600")

let smileface= draw.circle(7).cx(doorx+40).cy(doory+55).fill("#FFFF00")

let smileface1=draw.circle(7).cx(doorx+55).cy(doory+55).fill("#FFFF00")
}


//Set the bottom windows and windowline 
function makeWindowB4(windowx,windowy){
let window2= draw.rect(225,150).x(windowx).y(windowy).fill("#c0c059")
window2.stroke("black").stroke({width:2})
window2.radius(10); 

let...