I could learn how to arrange images and sources on the web pages and simple animation. I try to make more dynamic animation (like every stars will move whenever users click them.) But even one star movement took a lot of time to figure out. I will iterate this project to have more dynamic animation.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
h3.title{
margin-left: 10px;
font-family: Helvetica;
}
</style>
</head>
<body>
<h3 class=”title”> The Little Prince </h3>
<canvas id=”awesomeCanvas” width=1200 height=600></canvas>
<script type=”text/javascript”>
var canvas = document.getElementById(“awesomeCanvas”);
var ctx = canvas.getContext(“2d”);
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var numberOfStars = 100;
var star = {
x: Math.random()*canvasWidth,
y: Math.random()*canvasHeight,
image: new Image(),
opacity: 0.5
};
var stars = new Array(numberOfStars);
for(var i = 0; i < numberOfStars; i++)
stars[i] = {
x: Math.random()*canvasWidth,
y: Math.random()*canvasHeight,
image: new Image(“star.png”),
opacity: 0.5
};
for(var i =0; i<numberOfStars; i++)
stars[i].image.src=”star.png”;
var littlePrince = {
x:canvasWidth/2-150,
y:canvasHeight/2,
image: new Image(),
};
// Image Reference designed by web designer Charles van Valkenburg:: http://www.thelittleprince.com/the-little-prince-coming-to-a-screen-near-you/
star.image.src =”star.png”;
littlePrince.image.src=”lepetitprince.png”;
drawBackground();
//ctx.translate(canvasWidth/2,canvasHeight/2);
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate(star, canvas, ctx, startTime){
var time = (new Date()).getTime() – startTime;
var gravity = 200;
star.x = star.x+ 0.5 * gravity * Math.pow(time/1000,2.5);
star.y = star.y + 0.5 * gravity * Math.pow(time/1000,2.5);
lastTime = time;
ctx.clearRect(0,0,canvasWidth,canvasHeight);
drawBackground();
drawStar(star, ctx);
requestAnimFrame(function(){
animate(star, canvas, ctx, startTime);
////drawBackground();
});
}
function drawBackground(){
var gradation = ctx.createRadialGradient(canvasWidth/2, canvasHeight/2,300, canvasWidth, canvasHeight, 900);
gradation.addColorStop(0,”#33587c”);
gradation.addColorStop(1,”#030507″);
ctx.beginPath();
ctx.fillStyle = gradation;
ctx.rect(0, 0, canvasWidth, canvasHeight);
ctx.fill();
ctx.fillStyle=”#020202″;
ctx.arc(canvasWidth/2, canvasHeight, 100,0,2*Math.PI,false);
ctx.fill();
drawStarB();
ctx.drawImage(littlePrince.image, littlePrince.x,littlePrince.y);
}
function drawStarB(){
for(var i = 0; i < numberOfStars; i++){
ctx.drawImage(stars[i].image, stars[i].x, stars[i].y);
}
}
function drawStar(star,ctx){
ctx.beginPath();
console.log(star.x);
ctx.drawImage(star.image, star.x, star.y);
}
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(star, canvas, ctx, startTime);
//animate(star, canvas, ctx, startTime+10000);
},0);
setTimeout(function() {
var startTime = (new Date()).getTime();
animate(star, canvas, ctx, startTime);
//animate(star, canvas, ctx, startTime+10000);
},0);
</script>
</body>
</html>
Creative Computation Lab, Fall 2013 
Pingback: #2 HW2 Canvas Animation | Creative Computation Lab, Fall 2013