経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。
asActionScript 3.0 でコマンドライン開発してる人は必携の rascut を導入してみた。Flex 開発や AIR 開発でも使えるよ。rascut は id:secondlife さんによる fcwrap 後継バージョン。ファイル修正から自動的にプレビューまでできたり、trace() の出力をコンソールに出力してくれたり、かなり便利。以前、勝手が分からずにかなり苦労したけど、最近、RubyForge にアップロードされてからは gem 一発で超簡単になったよ。前準備Flex SDK と fcsh を準備しましょう。fcsh にはパスを通しておきましょう。Flex SDK については ActionScript 3.0メモ さんを参照あれ。fcsh については fcsh で Apollo を高速コンパイル あたりを参照あれ。Flex 3.0 SDK には fcsh が付属してる
中国の町並みをドット絵で再現したE都市がすさまじい - てっく煮ブログ
中国の地図サイト「E都市」は一昔前の RPG のようにドット絵で中国の町並みを再現しています。描き込みの量もすごいし、再現されている範囲も広くて驚きました。たとえば 上海 はこんなの。もちろんドラッグで移動できます。少し拡大してみます。さらに拡大してみます。右下のビルの看板の文字が読めちゃってます。自分が見た範囲では全ての場所で地図がここまで拡大できました。すべてのズームレベルでしっかりと描き込んであるのが驚きです。Google Maps の衛星地図とも比較できます。衛星写真を45度ぐらい時計回りに回転すると、上のドット絵に近くなりますね。道の形や屋根の色まで忠実に再現されています。北京を旅する北京 の天安門広場〜紫禁城。天安門にズームイン。もちろん毛沢東の肖像画まで再現。オリンピックで話題になった鳥の巣スタジアムも再現されています。すぐ近くはビル街だったんですね。香港を旅する香港 の大量
フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
ブラウザ上で Ruby を試せる「IRBWEB」を作ってみた - てっく煮ブログ
ruby, silverlightRuby を試してみたいけどインストールするのは面倒…。そんな人のためにブラウザ上で Ruby を試せる IRBWEB というサービスを作ってみました。irb のように、Ruby の構文を実験できてとてもお手軽です。 IRBWEB完全にブラウザ上で動作するため、動作もさくさく。ちょっとしたコードを書いて動作確認も楽しめますね。なお、変数を定義するには $a のようにグローバル変数として定義しないと、次の入力で参照できません。動作環境Silverlight 2.0 のランタイムが必要です。Silverlight 2.0 は Windows の IE だけでなく、Firefox や Mac の Safari、さらには主要な Linux ディストリビューションでも動作するので、この機会にインストールしてみるとよいですね。仕組みSilverlight 2.0 には
Context Free Art で立体を描く - てっく煮ブログ
ビル群ちょっとした立体風のものを描いてみた。立体を描く方法は Design ideas - Context Free Art を参照した。ソースはこちら。 startshape ALL rule ALL{ Buildings { hue 0 b .7} } rule Buildings{ Building {} BuildingsRecur { hue 10 y 2 s .8 x 4 z -1} BuildingsRecur { hue 10 y 2 s .8 x -4 z -1} } rule BuildingsRecur .1{} rule BuildingsRecur { Buildings{} } rule Building{ CUBESIDE { } Building { y 1 } } rule Building .2{ CUBETOP { } CUBESIDE {} } r
Context Free Art のお気に入り作品５点 - てっく煮ブログ
今週は Context Free Art を紹介してきましたが、最終日の本日は Web でみつけた作品の中で気に入ったものを５つ紹介します。CityMap地図っぽいもの。 CityMapPink blossom公式ギャラリーより。よくあるパターンの木なんだけど、花がきれいなので見違えますね。 Pink blossomexplosion同じく公式ギャラリーより、上と同じ momo さんの作品。宇宙が爆発ような模様。確率的ではないので毎回同じ模様になる。 explosion Spiders Webギアのような機械のような。他の作品は Context Free Gallery から。 Spiders Webnetwork方向転換しながら増殖していく。Context Free Art を知るきっかけとなった Radium Software さんより。Z 座標で前後関係を設定して囲み枠を描いている。
はてブのCSSをカスタマイズしてみた その２ - てっく煮ブログ
はてなブックマークが新しいデザインは気に入っていたのですが、メリハリのきいた色使いに少し飽きてきたので、シンプルなものに変えてみました。こんな感じです。 b:id:nitoyon自分が一番知りたいのは「ページのタイトル」だったので、そこを目立たせる感じで配置してみました。その他のこだわりを4箇所ほど紹介します。1. favicon の位置はてなブックマークがリニューアルしてから favicon が表示されるようになりました。これをどう扱うかが悩ましかったのですが、タイトルの横に付けてみました。デフォルトのデザインのちょっとうるさい印象も緩和できたのではないかと思います。アイコンを左に出すアイディアは tumblr のデフォルトのデザインから拝借しました。全体的に tumblr っぽく仕上げてます。 .2. ブックマーク数は digg 風にブックマーク数と B! のリンクを digg みたい
ウニができるまで 〜 Context Free Art の遊び方 - てっく煮ブログ
前回に引き続き、Context Free Art を取り上げる。今回は、Context Free Art で変なウニ風の生き物を作っていく手順を紹介する。さぁ、準備はいいですか？1. 基本となる図形まずは基本となる図形を描画する。こんなやつ。ソースコードは次のようなもの。 startshape LINE // LINE というルールを描画しろ rule LINE { // ルール LINE の定義 CIRCLE { s 6 1 x 3 sat 1 b .3 hue 30} } １行目の startshepe LINE では、「LINE というルールを描画しろ」と指定してる。じゃあ、LINE ルールはどうなってるかというと３行目で定義している。LINE ルールでは CIRCLE を１つ描画する。CIRCLE は Context Free で定義されている円を描画するルールだ。ルールにいくつか
【YQL 速攻レビュー】米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
ActionScript 3.0 用デバッグ支援ライブラリいろいろ - てっく煮ブログ
asXRayAS2 では定評のあったツール。AS3 にも対応している。サイトhttp://code.google.com/p/osflash-xray/対応バージョンActionScript 2.0, ActionScript 3.0 (Flash CS3, Flex 2)機能インスペクタ、コンソール出力 (専用ビューワ)参考"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ Alconインスペクタとコンソールのセット。パフォーマンス情報が見れたり、オブジェクトの詳細な情報をダンプできるようだ。ビューワは AIR 製。サイトhttp://blog.hexagonstar.com/alcon/対応バージョンActionScript 2.0, ActionScript 3.0 (Flash CS3, Flex 2)機能インスペクタ、コ
"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ
asActionScript 2 用のデバッグツールとして有名だった XRay が ActionScript 3 に対応したようです。DisplayObject の階層を表示してくれたり、オブジェクトのプロパティを修正したり、ログ用のコンソールになったりと機能豊富です。しかも、Flash CS3 だけでなく、Flex や AIR でも使えるようです。ということで、早速、試してみました。ダウンロードしてソースコードに２行追加するだけXRay のソースコードを拾ってきます。Google Code にあるので、SVN で拾ってきましょう。http://osflash-xray.googlecode.com/svn/trunk/as3/trunk/では、自分の Flash に仕込んでみましょう。ActionScript のソースコードに import 文を追加します。 import com.bli
HTML 崩壊 on ニコニコ動画 - てっく煮ブログ
先日発表した「HTML が崩壊するブックマークレット」が好評でありがたいことです。そんな中、このスクリプトをニコニコ動画に埋め込む猛者が登場しました。ニコニコ動画が崩壊します。↓↓スイッチを押すためにはニコニコ動画を開く必要があるようです↓↓ 外部JS起動はまずかろう、と思ったら、やっぱり対策された模様。ニコニコ動画を崩壊させるスイッチについて - ニコニコ動画 開発者ブログ（新着情報）同様のネタの新規投稿は禁止されたけど、記念にこの動画は消さずに残してくれるらしい。運営の姿勢が素敵だ。ニコニコ動画での反応しかし、ニコニコ上での反響がすごい。毎時ランキング で１位。そのお陰もあって、動画投稿から１日で10万再生5千コメント！ 数多くの人に体験してもらえて、しかも反応がすぐ分かる。とても嬉しい。これが噂に聞いていたニコニコの力か…。あまりのアクセス量に一時、nitoyon.com がサーバエ
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web 上に本名を公開するたった１つのメリット - てっく煮ブログ
Context Free Art の tile が便利!? - てっく煮ブログ