けんさく。

けんさく。が、いろいろ趣味のことをやるページです。

canvas要素

夏も終わるからJavaScriptで動く絵本を書いてみた 『ふしぎなてんとう虫』

入り口👇
『ふしぎなてんとう虫』


JavaSctiptで絵本書いている人がいないか探してみても、『JavaScriptの絵本』しか見当たらないから自分で書いてみたというわけだ。
JavaScriptの絵本
アンク
翔泳社
2007-09-13

別にこの本はJavaScriptで動く愉快な本というわけではないと思う。読んだことないから知らないが。
威張るほど立派なものではないけど、初めての試みなので多めに見てちょ。

(追記:もうちょっと調べたら、こういうの見つけた。
web仕掛け絵本
なかなか素敵である)

コミケの原稿書いたりと忙しいから逆にcanvas要素とJavaScriptで足踏み錯覚のアニメーションを作ってみたぞ

大概のブラウザで見られると思いますが、Lynxとかw3mとかで見てる人はすみません。他の記事でも見ていて下さい。

足踏み錯覚

ポーズ: 低コントラスト:
縞を消す:
色:
縞の太さ:
スピード:



青と黄色の四角が交互にカクカクと動いて見えたら、成功である。もし見にくければ、目の端で見てみるとか(目の錯覚のコツにはこのタイプが多い)、画面を遠くから見てみると良い。「縞を消す」にチェックを入れると、これがちゃんとスムーズに動いていることを確認できる。いろいろと調整して遊んでみるのも一興だ。
なぜスムーズに動いているはずなのに、足踏みしているように見えるかというと、動いている四角を白黒化して縞の太さを少し太くすると分かりやすくなる。
両端が同じ色の間は四角は止まって見え、そこから出るときに急に動き出したように見えるのだ。
実は脳の中で視覚は二種類の経路で処理されることが知られている。一つは緊急度の高い動きを検知する経路で、こちらは色や細かい形は感知しない。その後に、色や細部が処理される。
このアニメーションがカクカクするのは、実は動きを処理するときには白黒化されてしまうことによるからだとすると説明がつく。 
あと地味にスマートフォンでみても見やすいように工夫してあるので、興味があったら動作確認でもしてください。 

参考文献:

参考Webページ:
http://www.michaelbach.de/ot/mot-feetLin/index.html
JavascriptとObjective-Cを混ぜたような「Objective-J」なるプログラミング言語使う、「Cappuccino」なるフレームワークによって作られているので、このページのアニメーションもFlashなどのプラグインなしで見られる。
 
Leaves of Words
記事検索
最新コメント
月別アーカイブ
プロフィール

けんさく。

QRコード
QRコード
タグクラウド
  • ライブドアブログ