タグ

algorithmとvisualizeに関するnitoyonのブックマーク (18)

  • Tumblr

    「JPEG Tilt」というページを公開しました。MotionJPEG Builder を作った時に、JPEG のヘッダを読み込む処理を作ったので(結局これは使わなかったんですが)圧縮データの読み込み部分も作ってみようか、という気になって作ったのがこれです。JPEG ファイルで画像が圧縮される様子を視覚的に表現する…… という目標だったのですが、どうでしょうか。まあ内容が内容なので説明無しではさすがに意味が分からないと思います。 ということで、JPEG Tilt の見方を以下で簡単に説明します。 図1は、JPEG Tilt の画面です。画像が iTunes の CoverFlow のように並んでいますが、これの左側は画像の低周波成分のみを抜き出した物で、右に行くとより高周波の成分も含めるように並んでいます(低周波、高周波という言葉の意味はこの先で出てきます) 画像の上にマウスカーソルを乗せ

    Tumblr
    nitoyon
    nitoyon 2012/03/12
    JPEG 圧縮の様子を図示した JPEG Tilt(http://ushiroad.com/jt/)、Gecko Reflow Visualization(http://d.hatena.ne.jp/gyuque/20070327#1175005196)、テセレーション可視化、Liviz.js。
  • 『Blogopolisの裏側』発表資料 - kaisehのブログ

    昨日のSeasar Conference 2009 Autumnで発表させていただいた『Blogopolisの裏側』の資料を公開します。 Blogopolisの裏側View more documents from kaiseh. 資料の28枚目に、重み付きボロノイ図の重心ベースレイアウトの説明用動画がありました。その動画は以下にアップしました。 講演者の皆さん、運営の皆様、当にお疲れ様でした! 追記 id:mi-changさん p14ででてる「頂点数」、「多角形数」って何を意味してるんだろう?頂点数が多いということはより多くのタグと結びついているってこと? これは、1つ1つのエントリーやブログ、地区(カテゴリ)に対応する土地の幾何データのことです。例えば、5角形の土地の場合は5個の頂点座標が必要になります。土地の頂点数はレイアウト上の理由で決まるもので、タグとは直接関係はありません。

    『Blogopolisの裏側』発表資料 - kaisehのブログ
  • Free Dynamic DNS(DDNS) by POP3,IMAP4,FTP,HTTP-BASIC for Home Server, VPS | MyDNS.JP

    yambi.mydns.jp is not accessible... Sorry. I do not know why this site is not working. If you know Administrator of this site, please contact directly. You may be able to see it in Google cache. For administrator ... MyDNS.JP did not received IP address from you over One week. Please check your notify system. If you restart notification of IP address, MyDNS.JP will apply your IP address to DNS inf

    nitoyon
    nitoyon 2011/04/26
    ソートのビジュアライズ。
  • Sorting algorithms demonstrated with Hungarian folk dance

    We’ve seen sorting algorithms visualized and auralized, but now it’s time to see them through the spirit of Hungarian folk dance. In a series of four videos (so far), folks at Sapientia University in Romania demonstrate how different sorting algorithms work with numbered people dancing around and arranging themselves from least to greatest. See them in action in the video below. This one is for Bu

    Sorting algorithms demonstrated with Hungarian folk dance
    nitoyon
    nitoyon 2011/04/15
    フォークダンスでバブルソートをビジュアライズ。その発想はなかった。
  • 経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ

    as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱりに書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス

    nitoyon
    nitoyon 2010/01/26
    ビジュアライズしてみた。
  • wonderfl build flash online | 面白法人カヤック

    wonderflは、サイト上でFlashをつくることのできるサービス。 通常Flashをつくるためには、Flash IDEやFlex、FlashDevelop等といったツールを使って、コードを書き、コンパイルする必要がありますが、wonderflでは、サイトにあるフォームにActionscript3のコードを書けば、サーバサイドでコンパイルを行えます。 つまり、ブラウザさえあれば、Flashをつくれます。コンパイル結果はサイト上に表示され、作成されたFlash(swf)はページ上に自動的に表示されるので、完成したFlashをリアルタイムに見ながらコードを書くことができます。 ※APIとして、はてな OpenIDを使用してネットにさえつながれば、誰もがFlashクリエイターになれます。世界中のFlashクリエイターがユーザーになるwonderflは、 文字通り、世界のFlash図鑑となってい

    wonderfl build flash online | 面白法人カヤック
    nitoyon
    nitoyon 2009/06/17
    迷路探索をビジュアライズ。
  • wonderfl build flash online | 面白法人カヤック

    wonderflは、サイト上でFlashをつくることのできるサービス。 通常Flashをつくるためには、Flash IDEやFlex、FlashDevelop等といったツールを使って、コードを書き、コンパイルする必要がありますが、wonderflでは、サイトにあるフォームにActionscript3のコードを書けば、サーバサイドでコンパイルを行えます。 つまり、ブラウザさえあれば、Flashをつくれます。コンパイル結果はサイト上に表示され、作成されたFlash(swf)はページ上に自動的に表示されるので、完成したFlashをリアルタイムに見ながらコードを書くことができます。 ※APIとして、はてな OpenIDを使用してネットにさえつながれば、誰もがFlashクリエイターになれます。世界中のFlashクリエイターがユーザーになるwonderflは、 文字通り、世界のFlash図鑑となってい

    wonderfl build flash online | 面白法人カヤック
    nitoyon
    nitoyon 2009/06/07
    ランダムの作成方法別の動きを図示。
  • https://www.mokehehe.com/temp/Donko.html

    nitoyon
    nitoyon 2009/04/30
    実際の駅データでダイクストラ法を試す。Google Maps で1ステップずつ図示。(リリース)http://d.hatena.ne.jp/mokehehe/20090428/donko。github にソースコードあり。
  • ソートアルゴリズムの可聴化 - ならば

    Sorting Algorithm Animationsなどのサイトでは、ソートアルゴリズムの可視化の例を見ることができる。今回は可視化に倣ってソートアルゴリズムを可聴化した。聴覚化すると、情報を分かりやすく提示するという方向から外れるけど。 ソートする対象は50から90までの整数をランダムに並べた列。可聴化の方法は、整数をMIDIノート番号とみなして、ソートアルゴリズムが各時点でポイントしている位置にある、MIDIノート番号の音高の音を鳴らすようにした。ChucKのプログラムはいつもより長くなったから最後に載せる。 録音したもの。元の整数列は全部同じで、サイズ(整数の数)は30。 バブルソート 選択ソート 挿入ソート シェルソート クイックソート マージソート ヒープソート 拡張としては、 より詳細に情報を提示する方向(例:整数同士の位置の交換時に音色を変える) サウンドアートな方向(例

    ソートアルゴリズムの可聴化 - ならば
    nitoyon
    nitoyon 2009/01/17
    可視化でなく可聴化。音程で場所、曲長で速さが分かる。←映像をうまいこと加えたら何らかの作品になりそう。
  • 計算量を具体的に見てみる 2009-01-06 - きしだのはてな

    アルゴリズムの話では、計算量の解析がかかせません。 計算量はオーダー記法で表されますが、これは、データの入力量に対してどのくらい時間がかかるかをあらわしたものです。 こういった話はどのアルゴリズムのにも載ってるはずですが、具体的にどのようなプログラムを書くとそのオーダーになるかという記述はあまりありません。 ということで、やってみました。 計算時間表示のための共通処理を行うクラスは、一番最後に書いてます。 O(1) 計算時間がO(1)のアルゴリズムは、処理が入力の量によらない場合です。 配列の要素のアクセスや、ハッシュテーブルによるデータ検索、連結リストへの追加削除などがこれにあたります。 コードには入力量でのループが含まれません。 public class O1 extends ViewCompFrame{ @Override void compute(int n) { proc();

    計算量を具体的に見てみる 2009-01-06 - きしだのはてな
    nitoyon
    nitoyon 2009/01/08
    オーダーをグラフに描画。O(n log(n)) が想像以上に O(n)に近くて驚いた。
  • 東京を走る路線のデータを使って、最短経路問題をダイクストラ法で解く - imHo

    ダイクストラ法が小さなサンプルデータで動いたら、実際のデータを使ってみたくなるのが人情。東京を走る地下鉄のデータでやってみたいと思った。 JavaScriptとPrototype.jsとGoogleMapsAPIとすったもんだしたあげく、なんとか動くものができた。 502 Bad Gateway テストアプリはこちら JavaScriptのソースはここのhtmlに 駅や路線のデータは駅データ.jpのものを使わせてもらいました。 使ったのは東京メトロ+都営+山手線 駅(ノード)の数は、同じ駅でも路線ごとで別にカウントして 322 駅同士をつなぐ線路(エッジ)の数は、徒歩や乗換えを含め 912 体感もっさり感じるけど、経路の検索以外のところがかなりかかってる Tips Prototype.js Array.without は超重い、使うな! Hash.keys で返ってくるキーはすべて文字列に

    東京を走る路線のデータを使って、最短経路問題をダイクストラ法で解く - imHo
    nitoyon
    nitoyon 2008/11/11
    実データでダイクストラ。1サイクルごとにアニメーションしてほしい!
  • 経路探索アルゴリズムA*をActionScript3.0で実装してみた - シン石丸の電脳芸事ニッキ

    ひさびさにプログラムネタ。 経路探索ってものを作ったことがなかったので、作ってみた。 A*(Aスター)というヤツがメジャーらしいので、それを。 このFlashの適当な場所をクリックすると、壁をよけてうまい具合に丸が動いて、クリックした場所にたどり着きます。 なかなか楽しい。 玉の移動にTweenerを使用。 参考は、WikipediaのA*と、gan2さんのRubyのコード。 Node.as AStar.as

    経路探索アルゴリズムA*をActionScript3.0で実装してみた - シン石丸の電脳芸事ニッキ
    nitoyon
    nitoyon 2008/10/23
    A* in AS。絵がついてると分かりやすい。
  • Animated Sorting Algorithms

    Discussion These pages show 8 different sorting algorithms on 4 different initial conditions. These visualizations are intended to: Show how each algorithm operates. Show that there is no best sorting algorithm. Show the advantages and disadvantages of each algorithm. Show that worse-case asymptotic behavior is not the deciding factor in choosing an algorithm. Show that the initial condition (inp

    nitoyon
    nitoyon 2008/06/24
    ソートの処理をアニメーション表示。
  • [ActionScript 3.0] Fisher-Yatesアルゴリズムの可視化│miscellaneous

    要素をランダムに並べ替えるFisher-Yatesというアルゴリズムを可視化してみた。 下のウィンドウをマウスクリックすると並び替えの様子がアニメーションされます。 後ろから走査していって、自分より前のどれかと交換していく訳ですね。 計算量はO(n)です。 package{ import flash.display.*; import flash.events.*; import flash.geom.*; import flash.utils.*; import caurina.transitions.Tweener; [SWF(width="400", height="200",backgroundColor="0xffffff")] public class FisherYates2 extends Sprite{ private var balls:Array = []; priv

    nitoyon
    nitoyon 2008/01/17
    ランダムに並べ替えアルゴリズムFisher-Yatesを可視化
  • The JavaScript Canvas Hyperbolic Tree

    The JavaScript (Canvas) Hyperbolic Browser Works in Firefox 1.5+, Safari and Opera 9.5 05/10/2008 IMPORTANT UPDATE: This library is now part of the JavaScript Information Visualization Toolkit. Changes will no longer be published on this page. What's a Hyperbolic Tree? A Hyperbolic Tree (HT) is a "focus+context" information visualization technique used to display large amount of inter-related

    nitoyon
    nitoyon 2007/10/11
    Hyperbolic Tree を Canvas に描画。Poincaré Disk model(http://en.wikipedia.org/wiki/Poincar%C3%A9_disc_model)にプロット。 via ajaxian
  • INSIDE Gecko handouts

    スライド スライドは、Microsoft PowerPoint 2007のpptx形式です。ビューアはMicrosoftのサイトからダウンロードできます。 insidegecko.pptx ※ビューアで見る方へ: PowerPoint Viewerには起動不良のバグがありますので、Microsoftのページの指示に従って修正してください。 Tango Desktop Projectの著作物(17, 18, 60ページ目のアイコン)を含んでいます。再利用の際は、著作者が指定したライセンスに従ってください。 サンプルHTML スライド中でレンダリングの過程の実例を示すために使用したHTMLドキュメントです。CSSにMozillaの独自拡張が含まれていますが、全体的なレイアウトはIEやOperaでも正しく再現されます。 sample.html ムービー プレゼンで使用したムービーです。wmv9で

    nitoyon
    nitoyon 2007/09/16
    Gecko エンジンの内部解説。アルゴリズムの図示が大変興味深い。PPT のアニメーションもうまい。
  • Quadtree demonstration

    I’ve been working on different approaches to speed up the collision detection stage for some while now (mainly for the motor engine and some games). This includes a Quadtree which I started working on last year, but just recently got around to pick it up again. I’m still fine-tuning the code, so I can’t share it at the moment. But, because I added some visualization stuff to help fix some bugs, I

    nitoyon
    nitoyon 2007/09/14
    Quadtree(4文木)を用いた衝突判定。デモがきれい。
  • Keun Lee

    who we are management team locations customers partners careers press room what we do rich internet application development rich desktop development user experience design how we do it lookfirst approach practices showcase labs In this lesson, I shall introduce to you, the Matrix Class. Out of all the concepts to cover in Flex 2 and AS3, why did I choose to cover this topic? Well, believe it or no

    nitoyon
    nitoyon 2007/02/01
    Transformation Matrices の挙動をスライドバーで体感。
  • 1