W3_HW1_Animation

Zhaoliang Zhang

by Zhaoliang

HTML

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

JavaScript

/*
W2 House B4  Homework 3
Zhaoliang Zhang
10/07/2018
*/　

//I got three commands: Moving cloud with mouse, changing color with base and starry animation.

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 also set the function with change color
function makeBaseB4(basex,basey,c) {
let BaseB4 = draw.rect(550,200).x(basex).y(basey).fill(c)
BaseB4.stroke('black').stroke({width:2});
BaseB4.on('click', changeColor);

function changeColor() {
	BaseB4.fill('#f00');
}
}

//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...