タグ

ブックマーク / tech.nitoyon.com (16)

  • クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた - てっく煮ブログ

    集合知プログラミング を読んでいたら、K-means 法(K平均法)の説明が出てきました。K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。クリックすると1ステップずつ動かすことができます。クラスタの数や点の数を変更して、RESET を押すと好きなパラメータで試すことができます。こうやって1ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。K-means 法とはK平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージになります。各点にランダムにクラスタを割り当てるクラスタの重心を計算する。点のクラスタを、一番近い重心のクラスタに変更する変化がなければ終了。変化がある限りは 2. に戻る。これ

  • パーフェクトシャッフルは何回で元に戻るか (AS3版) - てっく煮ブログ

    as続: パーフェクトシャッフルは何回で元に戻るか - 西尾泰和のはてなダイアリーが面白かったので ActionScript で再現してみた。オリジナルの記事のように丸くするところはまだ。wonderfl にも投稿済み。ソースはこんな感じ(59行)。HSV を使うところは frocessing の ColorHSV クラスを利用してる。 //------------------------------------------------------ // Perfect Shuffle Visualization //------------------------------------------------------ package { import flash.display.Sprite; import flash.filters.BlurFilter; import froc

  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

  • Ruby で UTF-8 の文字化け部分を取り除く - てっく煮ブログ

    rubyRSS を拾ってきてパースしようとしたら、不正な文字列が入っていて REXML が ParseException を投げてしまった。文字コードが UTF-8 前提だったので、UTF-8 として valid な文字のみが含まれるように置換して対処した。 str = str.scan(/([\x00-\x7f]|[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3})/).join Ruby じゃなくても同じようなコードで対処できそう。関連:UTF-8 の正規表現は 404 Blog Not Found:UTF-8 vs. ISO-10646 から拝借したPHP なら $xmlStr = mb_convert_encoding($xmlStr, "UTF-8", "UTF-8"); でいけるら

  • "XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ

    asActionScript 2 用のデバッグツールとして有名だった XRay が ActionScript 3 に対応したようです。DisplayObject の階層を表示してくれたり、オブジェクトのプロパティを修正したり、ログ用のコンソールになったりと機能豊富です。しかも、Flash CS3 だけでなく、Flex や AIR でも使えるようです。ということで、早速、試してみました。ダウンロードしてソースコードに2行追加するだけXRay のソースコードを拾ってきます。Google Code にあるので、SVN で拾ってきましょう。http://osflash-xray.googlecode.com/svn/trunk/as3/trunk/では、自分の Flash に仕込んでみましょう。ActionScript のソースコードに import 文を追加します。 import com.bli

  • ワリオランドシェイクみたいに 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

  • AS3.0 で 3D プログラミングを1から勉強する (3) - 透視投影 - てっく煮ブログ

    as前回までのサンプルでは、遠くのものも近くのものも同じ大きさで表示していた。これでは立体感がでないので、遠くのものほど小さく表示するようにしたい。これを実現するには「投影」の方法を考えることになる。投影というのは、3D 上の点を 2D にマッピングすることを指す。今までは、Zの値を無視する方法を利用していたが、この手法には平行投影という名前がついている。それに対して、今回紹介するのが透視投影だ。遠くのものほど小さく表示できるので、遠近感を表現できる投影方法となっている。透視投影ってなあに?透視投影では「焦点」と「スクリーン」という概念が登場する。焦点は自分の目を表し、スクリーンは 3D の空間を投影する面である、と考えると分かりやすいだろう。スクリーンを窓として考えると、もっとすっきりするかもしれない。貴方は窓から外の景色をみている。窓の外の景色を、窓の上に見えた通りに描いていったとしよ

    sugarbabe335
    sugarbabe335 2008/06/18
    前回までのサンプルでは、遠くのものも近くのものも同じ大きさで表示していた。これでは立体感がでないので、遠くのものほど小さく表示するようにしたい。
  • AS3.0 で 3D プログラミングを1から勉強する (2) - 行列の導入 - てっく煮ブログ

    asこのまま実装を進めていくとソースが複雑になりそうなので少し地盤を固めておこう。座標計算を簡潔にするために行列クラスを導入する。Matrix3D クラス前回は軸の周りの回転を公式 p.x = Math.cos(rad) * x + Math.sin(rad) * y; p.y = -Math.sin(rad) * x + Math.cos(rad) * y; を使って直接計算していたけど、ここを行列に置き換えてみる。ちょうど、3D ライブラリ FIVe3D 2.1 に Matrix3D クラスがあったのでこれを借用した。X軸周りに rad ラジアン回転する演算は次のように書けるようになる。 // 回転前の点 p1 を定義 var p1:Point3D = new Point3D(0, 10, 20); // rad ラジアン回転する行列を作成 var matrix:Matrix3D =

  • AS3.0 で 3D プログラミングを1から勉強する (1) - てっく煮ブログ

    as3D の原理をあまり知らなかったので、ActionScript 3.0 で1から勉強してみた。1からなのでフレームワークは使わず、自力で実装していく。Web 上には色んな資料があってありがたいだけど、玉石混交な上に、有用なものでも一道で幅の狭いものが多い。前提知識のない自分にとっては、資料間の関連性を理解するのが大変だった。なので、なるべく簡単なところからスタートしつつ、広く浅く体験していくことを目標としてみる。まずは、四面体をワイヤーフレームで表示するところからスタートしよう。四面体を定義するまずは、3次元上の点を表現する Point3D クラスを作る。 class Point3D { public var x:Number; public var y:Number; public var z:Number; public function Point3D(_x:Number =

  • 幕末古写真化ブックマークレットを公開しました - てっく煮ブログ

    ページの画像を全て幕末古写真化できるようにしました。以下の JavaScript をコピーしてアドレスバーに入力して実行してください。 javascript:(function(d){if(typeof Bakumatsu != "undefined"){Bakumatsu.convert(d.getElementsByTagName('img'));}else{s=d.createElement('script');s.type='text/javascript';s.src='http://tech.nitoyon.com/bakumatsu/allbakumatsu.js';d.body.appendChild(s);}})(document); (例)このブログ (例)twitter ニュースサイトの写真を幕末古写真化しても面白いかもしれませんね。どうぞご利用ください。ソースコード

    sugarbabe335
    sugarbabe335 2008/04/15
    safariからできない><
  • 幕末古写真ジェネレータをハックする - てっく煮ブログ

    幕末古写真ジェネレーター というウェブサービスがちょっと前に話題になりました。どんな写真も幕末の写真のように加工してくれる面白いサービスです。この仕組みを 幕末古写真ジェネレーターの仕組み? - 将来が不安 で解析していたのが面白かったので、続きをやってみることにしました。→成果を先に見たい人は、こちら からご覧くださいませ。1. 真っ黒な画像を渡すまずは、真っ黒な写真を幕末風にしてもらいます。これが幕末風にするための型紙です。以降はテンプレート画像と呼ぶことにします。2. RGB の階調を渡す直感的に、ジェネレータの実装は (元画像+色補正)+テンプレート画像 と考えられます。テンプレート画像は得られたので、あとは色補正のパラメータを探れればハック完了です。そのために、RGB の階調をジェネレータに渡してみました。結果はこうなりました。おー。青色がほとんど消えてますね。グラデーションの方

  • Yahoo! Pipes で強制全文配信化 - てっく煮ブログ

    pipesそろそろ Yahoo! Pipes ネタも飽きてきたので、このエントリで一区切り。今回は Yahoo! Pipes を使って、文が一部分しか含まれていない RSS を全文配信にしてしまいます。題材として、若槻千夏のブログ『マーボー豆腐は飲み物です』 を取り上げましょう。完成品、どん。マーボー豆腐は飲み物です 全文配信化RSSRSS 版は http://pipes.yahoo.com/nitoyon/wakatsuki?_render=rss仕組みLoop モジュールがポイントですよ。Fetch Feed で RSS を取ってくる。Loop モジュールの中に Fetch Page を入れて、item.link の URL を取ってくる。取得した HTML から Regex モジュールで文を抜き出す。Rename モジュールで description を上書きする。Feed の数

  • すごい Flash 2007 集計結果 - てっく煮ブログ

    前回の募集エントリ に多数のコメントありがとうございます。初めて見るものも多くておもしろいです。私もまとめましたよ。気合入れて書いたので 家のほうに掲載 しておきました*1。かなり長くなっちゃったけど、渾身の記事なので時間見つけて読んでくれると嬉しいです。まだまだ募集中ですが、教えてもらったすごい Flash を紹介していきます(随時追加)。あくまで個人ブログでの突発的企画なので、数も少ないですが、何かの参考になれば幸いです。※ このブログで募集したこともあって、技術的なものや広告コンテンツが中心になってます。 ブログエントリわたしの「すごい Flash 2007」まとめ - Attribute=512007年 すごいと思った Flash のサイト | ra66it.netこの Flash がすごい 2007 [てっく煮]わたしがすごいと思った Flash はこれ! - ネットランダム2

  • 今年まとめ(自己満足) - てっく煮ブログ

    今年の人気エントリブックマーク御礼。てっく煮ブログ - Apollo 触ってみた。すごすぎ。 Yahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ はてブのCSSをカスタマイズしてみた [tech.nitoyon.com@hatena] てっく煮ブログ - ActionScript 的超絶技巧発表会に参加してきました てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。 HTML JS版 Apollo アプリを作ってみる [てっく煮] てっく煮ブログ - Google Gears の使い道 てっく煮ブログ - あまり語られていない Apolloセキュリティについてまとめてみた アドビの新サイトがすごいことになってる - てっく煮ブログ てっく煮ブログ - 四則演算を JavaScript で実装

  • Yahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ

    pipesこのブログでも何度か Yahoo! Pipes の話題は取り上げてきましたが、先日実装された「Page Fetch」モジュールは素敵すぎます。ほんとに。今まで、Yahoo! Pipes といえば、XML・CSVYahoo が提供してるサービスのデータを加工することしかできませんでした。それが、「Page Fetch」モジュールの登場により、任意の Web ページを加工できるようになったのです。Yahoo! Pipes の使い道といえば、次の2つだと思います。1. RSSリーダーで読むための XML 作り複数の RSS を結合したり、見た目を整えたりして、自分専用の RSS を作る。 (例)サイトの最新被ブックマークを livedoor Reader で読むための Pipes2. Web サービスとの連携JSONP に対応してるので、JavaScript と組み合わせてサーバ

  • てっく煮ブログ - 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 が付属してる

  • 1