食べ物を美味しそうに見せる
ほかほかオーバーレイについての紹介
画像の上からゆげが出てくるので
なんでも美味しそうに見えます．
HTML5のcanvasを利用して，動くゆげを描きます．
ゆげは小さくなるほど速度を速くするとリアリティが高まります．
Javascriptで
オブジェクト指向的な書き方に挑戦し，
メインプログラムを50行で収める工夫をしています．
サンプル：
http://www.yasuikeita.com/works/qiita/hokahokaoverlay/
index.html
<!DOCTYPE html>
<html>
<head>
<title>おいしいたこ焼き屋</title>
<script type="text/javascript" src="HokahokaLib.js"></script>
<script type="text/javascript" src="Hokahoka.js"></script>
</head>
<body>
<canvas id="okonomiyaki_canvas" width="200" height="200"></canvas>
</body>
</html>
HokahokaLib.js
//--
// Graphics
// ref.http://www.saturn.dti.ne.jp/npaka/html5/GraphicsEx/index.html
//--
function Graphics(canvas) {
this.canvas =canvas;
this.context=canvas.getContext("2d");
this.loadingCount=0;
}
Graphics.prototype.getLoadingCount=function() {
return this.loadingCount;
}
Graphics.prototype.clearRect=function(x,y,w,h) {
this.context.clearRect(x,y,w,h);
}
Graphics.prototype.loadImage=function(src) {
this.loadingCount++;
var image=new Image();
var source=this;
image.onload=function() {
source.loadingCount--;
}
image.src=src;
return image;
}
Graphics.prototype.drawImage=function(image,x,y) {
this.context.drawImage(image,x,y);
}
Graphics.prototype.drawYuge=function(point,r) {
var i;
for(i=0;i<r;i+=2){
this.context.fillStyle = "rgba(255,255,255,0.05)";
this.context.beginPath();
this.context.arc(point.x,point.y+i/3,i,0,Math.PI*2,true);
this.context.fill();
}
}
Graphics.prototype.getWidth=function() {
return this.canvas.width;
}
Graphics.prototype.getHeight=function() {
return this.canvas.height;
}
//--
// Point
//--
function Point(x,y){
this.x = x;
this.y = y;
return this;
}
Point.prototype.add = function( point ){
this.x += point.x;
this.y += point.y;
}
Hokahoka.js
var YUGE_NUM= 5;
var YUGE_SIZE = 20;
var g,image,i;
var pos = new Array(YUGE_NUM);
var vect = new Array(YUGE_NUM);
window.onload=function() {
g=new Graphics($("okonomiyaki_canvas"));
image=g.loadImage("okonomiyaki.jpg");
//initialize
for (i = 0; i < YUGE_NUM; i++) {
pos[i] = new Point(
Math.random()*g.getWidth(),
Math.random()*g.getHeight());
vect[i] = new Point(0,0);
}
setInterval("motion()",50);
}
function motion() {
if (g.getLoadingCount()>0) return;
g.clearRect(0,0,g.getWidth(),g.getHeight());
g.drawImage(image,0,0);
for (i = 0; i < YUGE_NUM; i++) {
g.drawYuge(pos,YUGE_SIZE);
pos[i].add(vect[i]);
vect[i].add(new Point((1-Math.random()*2)*0.2,-0.1));
if(pos[i].y<-YUGE_SIZE){
pos[i] = new Point(
Math.random()*g.getWidth(),
Math.random()*g.getHeight());
vect[i] = new Point(0,-1);
}
}
}
function $(id) {
return document.getElementById(id);
}