フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ
「この発想はなかった！」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを２つ追加してみた。交配させるために２つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。４人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。３人の子供が第二世代に誕生した。4. さらに交配！今度
クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた - てっく煮ブログ
集合知プログラミング を読んでいたら、K-means 法（K平均法）の説明が出てきました。K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。クリックすると１ステップずつ動かすことができます。クラスタの数や点の数を変更して、RESET を押すと好きなパラメータで試すことができます。こうやって１ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。K-means 法とはK平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージになります。各点にランダムにクラスタを割り当てるクラスタの重心を計算する。点のクラスタを、一番近い重心のクラスタに変更する変化がなければ終了。変化がある限りは 2. に戻る。これ
郵便番号マップを作ってみた - てっく煮ブログ
ビジュアライジング・データ ―Processingによる情報視覚化手法 を読んでたら「アメリカの郵便番号を地図上に図示する」という例が出てきたので、これの日本版を作ってみました。 郵便番号マップ内陸地がぽっかりあいてるのが不思議だったり、色でどのへんの地域が近い番号なのかが分かったり、いろいろ興味深いです。絞り込み機能先頭の数字で絞り込む機能もつけてみました。これが東京（1XX）。これが中国四国地方（7XX）。うっすら四国の海岸線が見えます。今週は、これを作っていく過程を紹介していきたいと思います。乞うご期待。ビジュアライジング・データ ―Processingによる情報視覚化手法作者: Ben Fry, 増井俊之(監訳), 加藤慶彦出版社/メーカー: オライリージャパン発売日: 2008/12/01メディア: 大型本 連載目次（予定）郵便番号データをデータベースに入れるgeocoding
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(){
jQuery の配列系のメソッドをメモ - てっく煮ブログ
JavaScriptjQuery は機能が豊富なので、しばらく使わないと忘れてしまう。ここでは、jQuery と配列の関係に絞って目的別に逆引きできるようにしておく。配列から jQuery オブジェクトを作成$ 関数に渡せばOK $([1,2,3]) NodeList のような配列っぽいものを渡しても解釈してくれる。 $(document.getElementsByTagName("div")) // $("div") と同じ ※内部的には setArray メソッドが呼ばれてるが、外から使うことは稀。jQuery を配列のように扱う要素数を取得するlength プロパティを使えばOK。 $("div").length // document.getElementsByTagName("div").length と同じ jQuery のメソッドを使って操作する限りは、適切に length
HTML JS版 Apollo アプリを作ってみる [てっく煮]
Apollo 開発の方法を丁寧に説明していく予定です。第１回目は HTML+JavaScript で Apollo アプリを作ってみます。 そこそこ実用的な例、ということでシンプルな RSS リーダーを作ることにします。Apollo での通信にはドメインの制約がない、という利点を体感することもできます。動作イメージはこんな感じです。 開発環境のインストールがまだの方は、Adobe Apolloメモ や はじめてのApolloプログラミング を参考にして準備しておいてください（手抜き）。 HTML と JavaScript の作成 まずは HTML を準備します。rss-simple.html として保存します。味気ないですが、あえてシンプルにしてます。 <html> <head> <title>Simple RSS</title> <script src="rss-simple.js"><
![HTML JS版 Apollo アプリを作ってみる [てっく煮]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
てっく煮ブログ - 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 が付属してる
MARUBIRU RSS Reader
このサービスを利用するためには Flash Player 9 以降が必要です。 → インストールする This site requires Flash Player 9 or later. → Please click here to download Flash Player 9 ブログのURLやニュースサイトのURLを入力してください： Please input URL of any blog or news site.: (例) アサヒコム、発言小町、livedoor天気予報、竹原慎二 オフィシャルブログ、はてなブックマーク 人気エントリ (ex) CNN.com、digg、Popular pages on del.icio.us
Yahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ
pipesこのブログでも何度か Yahoo! Pipes の話題は取り上げてきましたが、先日実装された「Page Fetch」モジュールは素敵すぎます。ほんとに。今まで、Yahoo! Pipes といえば、XML・CSV か Yahoo が提供してるサービスのデータを加工することしかできませんでした。それが、「Page Fetch」モジュールの登場により、任意の Web ページを加工できるようになったのです。Yahoo! Pipes の使い道といえば、次の２つだと思います。1. RSSリーダーで読むための XML 作り複数の RSS を結合したり、見た目を整えたりして、自分専用の RSS を作る。 （例）サイトの最新被ブックマークを livedoor Reader で読むための Pipes2. Web サービスとの連携JSONP に対応してるので、JavaScript と組み合わせてサーバ
はてなダイアリーに Flash を埋め込むガジェット - てっく煮ブログ
はてなダイアリーで JavaScript eval に続く、はてなダイアリー向け汎用ブログパーツ第２弾。今回は Flash を埋め込めるようにしてみました。サンプルこんな感じで。サイズも変えられる。使い方こちらからどうぞ。SWF の URL を入力して、サイズ変更して、背景色変更して、「コードを取得」ボタンで貼り付け用のHTMLを取得します。どうぞご利用ください。ソースコードソースは http://nitoyon.googlepages.com/embed_flash.xml。内部で swfobject.js を使っているので、何も考えずに同じ MIT ライセンスで公開。IE6 ではスクロールバー分の余白が表示されてしまったので、document.body.scroll = "no" で特別に対処してます。雑感他のドメインの Flash を埋め込めるので便利。だけど、「無断リンク禁止」な
幕末古写真ジェネレータをハックする - てっく煮ブログ
幕末古写真ジェネレーター というウェブサービスがちょっと前に話題になりました。どんな写真も幕末の写真のように加工してくれる面白いサービスです。この仕組みを 幕末古写真ジェネレーターの仕組み？ - 将来が不安 で解析していたのが面白かったので、続きをやってみることにしました。→成果を先に見たい人は、こちら からご覧くださいませ。1. 真っ黒な画像を渡すまずは、真っ黒な写真を幕末風にしてもらいます。これが幕末風にするための型紙です。以降はテンプレート画像と呼ぶことにします。2. RGB の階調を渡す直感的に、ジェネレータの実装は （元画像＋色補正）＋テンプレート画像 と考えられます。テンプレート画像は得られたので、あとは色補正のパラメータを探れればハック完了です。そのために、RGB の階調をジェネレータに渡してみました。結果はこうなりました。おー。青色がほとんど消えてますね。グラデーションの方
AS3.0 で 3D プログラミングを１から勉強する (1) - てっく煮ブログ
as3D の原理をあまり知らなかったので、ActionScript 3.0 で１から勉強してみた。１からなのでフレームワークは使わず、自力で実装していく。Web 上には色んな資料があってありがたいだけど、玉石混交な上に、有用なものでも一本道で幅の狭いものが多い。前提知識のない自分にとっては、資料間の関連性を理解するのが大変だった。なので、なるべく簡単なところからスタートしつつ、広く浅く体験していくことを目標としてみる。まずは、四面体をワイヤーフレームで表示するところからスタートしよう。四面体を定義するまずは、3次元上の点を表現する Point3D クラスを作る。 class Point3D { public var x:Number; public var y:Number; public var z:Number; public function Point3D(_x:Number =
具体例で説明するデザインパターン - てっく煮ブログ
JavaScriptデザインパターンってなんだかたいそうなものに考えられがちだけど、実は、そこかしこのライブラリや仕様に取り込まれていることが多い。「デザインパターン分からん」とか「で、どうやって使うのよ」と悶々としている人には、「どういうところで使わているのか」を知っておけばイメージも沸きやすいし、意外にたいしたことないんだな、ということが分かるんじゃないだろうか。そこで、JavaScript やその周辺の技術で、デザインパターンがどのように使われているかを紹介してみることにする。ここでは、GoF本の順番に沿って、以下の11個のパターンを取り上げる。生成に関するパターン Factory MethodAbstract FactoryBuilderPrototypeSingleton構造に関するパターン AdapterComposite振る舞いに関するパターン Chain Of Respon
ワリオランドシェイクみたいに 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ページを開く
北海道を落とすとどう跳ねるのか？ - てっく煮ブログ
てっく煮ブログ