Link : http://a.parsons.edu/~leeh578/RainyDay.html
Members : Soohyun Park, Shiny Lee, Hyungou Jo(Helen)
—————————————————————————————-
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id=”container”></div>
<!– KineticJS library –>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js”></script>
<!– script will not run until after the page has loaded –>
<script defer=”defer”>
var rain_x = Math.random() * 1000; //container Width
var rain_y = 0; // rain will drop from the top at first
var cat_x = 500;
var cat_y = 500;
function drawRainyDay(imageObj) {
//setting the stage
var stage = new Kinetic.Stage({
container: “container”,
width: 1000,
height: 1000
});
var layer = new Kinetic.Layer();
// background image
var backgroundImage = new Kinetic.Image({
image: bgImage,
width: 1000,
height: 1000,
draggable: false
});
// rain drops
var rain0 = new Kinetic.Image({
image: rainObj,
//We need to make this random later
x: rain_x,
y: rain_y,
width: 100,
height:150,
draggable: false
});
var rain1 = new Kinetic.Image({
image: rainObj,
//We need to make this random later
x: Math.random() * 1000,
y: rain_y,
width: 100,
height:150,
draggable: false
});
var rain2 = new Kinetic.Image({
image: rainObj,
//We need to make this random later
x: Math.random() * 1000,
y: rain_y,
width: 100,
height:150,
draggable: false
});
// cat
var cat = new Kinetic.Image({
image: catImage,
x: cat_x,
y: cat_y,
draggable: true
});
var catF = new Kinetic.Image({
image: catFImage,
x: cat_x,
y: cat_y,
draggable: true
});
var amplitude = 10;
// rain_y += amplitude;
var anim0 = new Kinetic.Animation(
function(frame) {
rain0.setY(amplitude * frame.time/30);
rain1.setY(amplitude * frame.time/30 – 200);
rain2.setY(amplitude * frame.time/30 – 450);
catF.setX(cat.getX());
catF.setY(cat.getY());
if(rain0.getY() + 130 >= cat.getY() && rain0.getY() -130 <= cat.getY() && rain0.getX() >= cat.getX()-300/2 && rain0.getX() <= cat.getX()+300/2){
layer.add(backgroundImage);
layer.add(rain1);
layer.add(rain2);
layer.add(catF);
anim0.stop();
}else if(rain1.getY() + 130 >= cat.getY() && rain1.getY() -130 <= cat.getY() && rain1.getX() >= cat.getX()-300/2 && rain1.getX() <= cat.getX()+300/2){
layer.add(backgroundImage);
layer.add(rain0);
layer.add(rain2);
layer.add(catF);
anim0.stop();
}else if(rain2.getY() + 130 >= cat.getY() && rain2.getY() -130 <= cat.getY() && rain2.getX() >= cat.getX()-300/2 && rain2.getX() <= cat.getX()+300/2){
layer.add(backgroundImage);
layer.add(rain1);
layer.add(rain0);
layer.add(catF);
anim0.stop();
}else{
layer.add(backgroundImage);
layer.add(rain0);
layer.add(rain1);
layer.add(rain2);
layer.add(cat);
}
}, layer);
//starts animation
anim0.start();
//cat Size : 292, 300
//rain Size : 261, 350
//placing layers for images
layer.add(backgroundImage);
layer.add(rain0);
layer.add(rain1);
layer.add(rain2);
// if(rain_x + 340 >= cat_x && rain_x <= cat_x + 292 && rain_y + 350 >= cat_y && rain_y – 340 <= cat_y + 300){layer.add(catF)}else{layer.add(cat);}
stage.add(layer);
}
//create new images
var bgImage = new Image();
var rainObj = new Image ();
var catImage = new Image ();
var catFImage = new Image();
//loads images
bgImage.onload = function() {
drawRainyDay(this);
};
rainObj.onload = function() {
drawRainyDay(this);
};
catImage.onload = function() {
drawRainyDay(this);
}
catFImage.onload = function() {
drawRainyDay(this);
}
//image source
bgImage.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/background.png’,
rainObj.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/raindrop.png’;
catImage.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/cat.png’;
catFImage.src = ‘http://blog-imgs-61.fc2.com/w/e/a/weatherfield/cat_frighten.png’;
// document.onkeypress = keyevent;
</script>
</body>
</html>
Creative Computation Lab, Fall 2013 
Pingback: Kinetic HW | Creative Computation Lab, Fall 2013