Zhennan Week 4 House Boolean

Boolean Logic

by ZhenLiu

HTML

<div id="drawing">

<div id="change">Toggle Light</div>

</div>

JavaScript

/*Week 4 house D1; there is an animation-add sun rise.There are three boolean logics.  

1.if click the thick black frame, it will turns into night and draw four stars.  I made it very thick so you can click on it easier. 

2.a moving man keeps walking from left side to the right,if you keep press 'w' on your keyboard. you need click the canvas first.

3.if press 'Toggle Light', it can change the color of the windows and the door.
zhennan hao
10/14/2018
*/
"use strict"

//create black canvas; 600 X 600
var draw = SVG('drawing').size(600, 600);

//draw a sun rise from the left side to the up right corner.
//make a gold circle as the sun.
//(cx,cy) is the start location of the circle and the size will change in the process.
var sun = draw.circle(20).fill('gold').cx(0).cy(300).animate(2000).move(520, -20).size(100)


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

//there are four stars drawing in the following code.  
        //draw a polygon as a star fill with no color. it will fill with yellow after click the frame.
    var star1 = draw.polygon('100,21 125,73 182,81 141,121 151,178 100,152 50,179 59,122 17,81 74,73')
    star1.fill('none').move(0, 20).rotate(20).size(20)
 //draw a polygon as a star fill with no color. it will fill with yellow after click the frame..
    var star2 = draw.polygon('100,21 125,73 182,81 141,121 151,178 100,152 50,179 59,122 17,81 74,73')
    star2.fill('none').move(50, 60).rotate(20).size(25)
 //draw a polygon as a star fill with no color. it will fill with yellow after click the frame..

    var star3 = draw.polygon('100,21 125,73 182,81 141,121 151,178 100,152 50,179 59,122 17,81 74,73')
    star3.fill('none').move(350, 60).rotate(20).size(18)
//draw a polygon as a star fill with no color. it will fill with yellow after click the frame.
    var star4 =...