開発^3

Web開発、宇宙開発、ゲーム開発の3種類についてつらつらと

Amazonの本を立体化する

元ネタはウェブ上でよく出くわすあの光景って本当に「あるべき姿」なの? - Liner Note
ちょっと面白そうだったのでCanvasの練習もかねて書いてみた。
環境:Firefox3.0.4 + JavaScript

方針としては以下の通り

  1. 画像をCanvasにコピー
  2. getImageDataで画像のピクセルデータを取得
  3. 空白を無視するようにしつつ本の左端を取得
  4. そこからグラデーション含めた曲線を描いて立体的に
  5. 厚みはAmazonのページ数から求めるとそれっぽいな
  6. 裏側は背表紙+綴じこまれた紙を描画

Before→After

ひどい結果も多々あるが物によってはそれなりに見れる。
中身検索系は全滅だな。

制約の多いソース

Greasemonkey化を目指していたのだが、結局動くようには出来なかったのでHTML版を。
制約1:ローカルでも良いのでWebサーバ上で動作させるべし。
制約2:別サーバの画像は扱えないので画像も同じフォルダに入れるべし。
ソースファイル(lzh)


問題にぶち当たりまくっている内に、色々と学べたので、別エントリで起こすことにする。