Javascriptで食べ物を美味しそうに見せる（ほかほかオーバーレイ） #JavaScript

食べ物を美味しそうに見せる
ほかほかオーバーレイについての紹介

画像の上からゆげが出てくるので
なんでも美味しそうに見えます．

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);
}