けんさく。

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

JavaScript

モアレ好きのための離散リサジュー図形



役に立つことがあるとも思えないが興味本位で読んでたこの本の中にあるリサジュー曲線を描くプログラムが、計算される点と点との間が空きすぎて逆に面白い図形を描くので、JavaScriptにしてみた。
モアレ好きのための離散リサジュー図形
パターンとパターンがモアレみたいになってるのがかっこいいので、ついでに小説も書いた。
怪人モアレ男

フラクタル時計作った


フラクタル時計

時間によって模様が変わって結構面白い。
そのうちさらにいじるかとりあえず公開。 

フラクタルの木

JavaScriptでフラクタルの木を動かせるようにしたよ。

フラクタルの木 

そのうちいろいろ弄ったり、説明文になってない小説を加えたりしよう。

ちなみに思いついたのは下に貼った本(通称ブルーブック)を読んでGhostScriptで遊んでるときで、その日のうちに書いてみた。※1
PostScript® Language Tutorial and Cookbook (APL)
Adobe Systems Inc.
Addison-Wesley Professional
1985-01-01

思いつき駆動プログラミング。
しかしいいねPostScript。スタック志向は単純で良い。文法が無いのが文法の究極の姿だとLispで学んだ。
ところで、今画像生成のためにプログラミングするというと、何なんだろか。
Web上でインタラクティブに動かすつもりなら、JavaScript書くか、CoffeeScriptで書いてJavaScriptに変換するか、もしくはprocessingで書いてprocessing.jsで動かす(結局JavaScriptか)って感じなんだろう。
データを解析し、それを画像の形に出力するなら、何らかのプログラミング言語からImageMagickを使うのが王道ではなかろうか。
しかし、そもそも動かす必要もないし、複雑なデータを解析する必要もない場合も多かろう。
すると、どの言語も汎用性が高すぎる。
汎用的な道具を使えるようにするのは重要だが、ドアノブをを治すのに工業用ロボットを持ってきても困る。かと言って、全ての作業に専用の道具を用意するのもまた非効率。うまいこと複雑な作業と簡単な作業に分けて、混乱しない程度の量の道具でできるだけ多くの作業にストレスを感じずに対処したい。
するとPostScriptって結構使えるんじゃなかろうか。もちろんGIMPやInkscapeを使うことも視野にいれての話だが、規則的な図形だったらPostScript手書きも選択肢にあるんじゃなかろか。GIMPもInkscapeもある種の単純な反復作業をやるには複雑すぎる気がする。
例えば数学教師とかが、PostScriptを学べば、図とか作るのに便利なんじゃないか。慣れればマウスでやるより速くやれるし、再利用もしやすかろう。
数学教師のためのPostScript。ううむ、どんなもんだろうか。 


※1 ちなみにこの本、公式だけあってとても分かりやすいし、英語版ならネット上に無料のPDFが置いてあるのも良いが、107ページ(日本語版だと121ページ)に、(   )の中の半角スペースの個数が足らないとエラーが出て動かない(ちなみに正解は三個。postscriptの文字列は全て可変で、これは単に必要なメモリ領域を確保しているだけなので三個以上ならOK)、という鬼畜なコードが書かれている。もし紙の上に印刷されていたら目視では判断のしようがない。本来DTP用のソフトウェアのはずなのにそんな馬鹿な、という感じである。
同様に、世の中にはpythonやyamlのコードの複数の入れ子から一気に抜けるところで改ページをしてしまう紙の本が結構ある(しかも結構いい本で)が、そんなの目視で分かるわけねえだろが。 
集合知プログラミング
Toby Segaran
オライリージャパン
2008-07-25

 
どちらもとってもいい本ですよ(半ギレ)。
ちなみにとある著者にこのことの文句を言ったら、「その観点は初めてだ」と驚かれてしまった。そうかなあ。普通に考えることじゃないかなあ。

夏も終わるから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コード
タグクラウド
  • ライブドアブログ