Go 言語でソースコードから画像生成する
Go 言語には画像生成する image パッケージが標準で入っている。imagemagick や GD を導入する必要がないので、気軽に画像を生成できて便利そうだったので試してみた。 ただ、標準ではピクセル単位で色を設定することしかできないので、線を引いたり色を塗ったりするには、何らかのライブラリーに頼る必要がある。 今回は、ライブラリーには頼らず、標準で提供されている機能だけでできることを試してみた。 一番簡単な例 簡単な画像を生成する例は次の通り。1つ点を打つだけの例。 package main import "image" import "image/color" import "image/png" import "os" func main() { // 100×50 の画像を作成する img := image.NewRGBA(image.Rect(0, 0, 100, 50))
jQuery.extend マニアックス - てっく煮ブログ
JavaScriptjQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。jQuery.extend の呼び出しパターンは次の４通り。$.extend([deep,] target, obj1, [obj2, [obj3, ...)$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj)全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。以下では分かりやすくするために deep オプションは省略した一覧を掲載する。$.extend(target, obj1, [obj2, ...)$.extend(obj)$.fn.extend(obj)$(...).extend(obj)だいぶシンプルにな
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(){
北海道を落とすとどう跳ねるのか？の裏側 - てっく煮ブログ
asおかげさまで大好評の 北海道を落とすとどう跳ねるのか？ ですが、どのように作ったか、製作過程を紹介することにします。1. 地図の素材を取ってくるまずは地図の素材が必要です。以下のサイトから拝借しました。白地図、世界地図、日本地図が無料pdf や eps 形式の地図データを無料で配布してくれているありがたいサイトです。2. 都道府県ごとに分割する上記の素材は県境もベクター形式で提供されていて大変ありがたかったのですが、島がどの都道府県に属しているかの情報がありませんでした。そこで、Google Maps と見比べながら、島を都道府県ごとに分類していきました。無事、全ての島を分類し終わって、こんな感じになりました。とても地味な作業でした…。3. 都道府県ごとに SVG で出力する次に、Illustrator 内で分類したデータをプログラムで扱える形式にしなければなりません。ここでは XML
「50個のポリゴンでモナリザ」を AS3 で - てっく煮ブログ
as3ニテンイチリュウ : Image Evolution 経由で知った Image Evolution を試してみた。50個の半透明なポリゴンを塗り重ねてモナリザに近づけてみよう、という試みだ。仕組みは単純。ランダムに配置したポリゴンをランダムに変形させたり色を変えたりしてみて、モナリザの画像の色に近づけば採用、そうでなければ止める。これだけ。微分してとか、輪郭抽出してとか、そういう賢いことは何もやらない。単に貪欲にシミューレーションし続けている。手元の環境で動かしたらこんな感じになった。壮大なる CPU の無駄使い。だが面白い。いちおう Flash も貼っておく。が、猛烈にブラクラなので扱いは慎重に。高速化のために、BitmapData.compare() といったビルトインのメソッドを使っているので、Firefox 3 で canvas 版 よりも10倍ぐらい速く動いた。オリジナルの
具体例で説明するデザインパターン - てっく煮ブログ
JavaScriptデザインパターンってなんだかたいそうなものに考えられがちだけど、実は、そこかしこのライブラリや仕様に取り込まれていることが多い。「デザインパターン分からん」とか「で、どうやって使うのよ」と悶々としている人には、「どういうところで使わているのか」を知っておけばイメージも沸きやすいし、意外にたいしたことないんだな、ということが分かるんじゃないだろうか。そこで、JavaScript やその周辺の技術で、デザインパターンがどのように使われているかを紹介してみることにする。ここでは、GoF本の順番に沿って、以下の11個のパターンを取り上げる。生成に関するパターン Factory MethodAbstract FactoryBuilderPrototypeSingleton構造に関するパターン AdapterComposite振る舞いに関するパターン Chain Of Respon
Flash Player 10 ではフォント埋め込みしなくても回転できるらしい - てっく煮ブログ
やっとですか、という感じですが。One big improvement in Flash Player 10 is that fonts no longer need to be embedded in order to rotate text or alter it’s alpha. Flash Player 10 での大きな機能拡張の１つに、テキストを回転させたりアルファを変更するためにフォントを埋め込む必要がなくなった点が挙げられます。SmartLogic Solutions Blog » Blog Archive » Rotate Effect and Non Embedded Fonts in Flex 4Flash Player 10 での新機能は akihiro kamijo: Flash Player 10 beta 公開 に列挙されていますが、この中の「Advanced
winQuery ソース＆バイナリ公開 - てっく煮ブログ
asShibuya.abc#1 で意外に好評だった winQuery のモックアップ版を公開しました。http://snippets.libspark.org/trac/browser/as3/Shibuya.abc-1/winQuery勢いで作って試験もほとんどしてないので、色々と動作が怪しいと思いますが、興味のある人は試してみてください。バイナリで遊ぶbin と lib の下をダウンロードしてください。あと、J2RE1.4.2 以上も必要です。コマンドプロンプトで、 avmplus -i とするとコンソールが起動します。あとは、いろいろパラメータ指定して楽しめます。 # 全部のウインドウを表示 print($("*")); # トップレベルのウインドウを表示 print($("*:root")); # トップレベルの可視状態のウインドウを表示 print($("*:root:visib
Twitter の crossdomain.xml 問題について。 - てっく煮ブログ
ついったー足あと帳 関連でこんなブログ記事を発見した。今回は twitterのprotectな発言とかsettingからメールアドレスの取得や変更なんかできちゃってたわけで…2008-03-09 - skubotaの日記変更？？間違った情報が広がるとよくないので勝手に補足。この記事には誤解がある。確かに取得はできるけど、変更はできない。実際に試した私が言うんだから間違いない。（補足）ためしたのは、ついったー足あとちょうを作ったらへん。今は仕様変わってるかも(?)たぶん、サーバー側でリファラを見て弾いてるんだと思う。SWF からリクエストする場合は、SWF の URL がリファラとしてつくようになっている。リファラをなしにして送ったらうまく行くことも確認した。だから、swf からのクロスドメインアクセスに対しては通用しないであろう。よって、(1)メールアドレスの変更、(2)パスワードリセット
AS3 で関数かつクラスっぽいオブジェクトを作る - てっく煮ブログ
asjQuery では、$ を関数としてもハッシュとしても使っている。$("#foo") → エレメントを選択$.each() → ユーティリティ関数の呼び出しas3Query でも同じようにやりたかったんだけど、いい方法が思いつかずに苦しんでた。失敗例 1$ を public な function として定義する。Function は dynamic なクラスなので、$["each"] = function(){} とすれば関数を代入できる。$["each"] で呼び出せる。けども、$.each とすると、静的型付け言語の宿命でコンパイルエラーになってしまう。失敗例 2$ をクラスにしてみたら、$() がキャストと解釈されて、$("#foo") が実行時のキャストエラーになった…。失敗例 3Function を extends しようとしたら、final だって怒られた。失敗例 4Pro
BitmapData を使って文字列でマスク - てっく煮ブログ
as残念ながら、ActionScript では TextField を使ってマスクすることはできません。画像をグラデーションに塗りたい、とか、写真を文字列くりぬきたい、といった要望には簡単には応えられません。じゃあ、どうするかというと、BitmapData の出番です。技術的には BeInteractive! [BitmapDataを簡単にマスクする方法] と全く同じです。サンプル Flash どーん。中段のグラデーションに対して、上段の文字列をマスクとして利用しています。上段の文字列は編集できることからも分かるとおり、TextField です。ソースコードは長いけど、肝はここ。 bmpDataText.draw(textField); bmpData.draw(grad); bmpData.copyChannel(bmpDataText, new Rectangle(0, 0, WID
今年まとめ（自己満足） - てっく煮ブログ
今年の人気エントリブックマーク御礼。てっく煮ブログ - Apollo 触ってみた。すごすぎ。 Yahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ はてブのCSSをカスタマイズしてみた [tech.nitoyon.com@hatena] てっく煮ブログ - ActionScript 的超絶技巧発表会に参加してきました てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。 HTML JS版 Apollo アプリを作ってみる [てっく煮] てっく煮ブログ - Google Gears の使い道 てっく煮ブログ - あまり語られていない Apollo のセキュリティについてまとめてみた アドビの新サイトがすごいことになってる - てっく煮ブログ てっく煮ブログ - 四則演算を JavaScript で実装
tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
てっく煮ブログ - ラスタ→ベクタ変換する AS ライブラリ "PotrAs"
as, potras超絶のまとめ記事が反応ありすぎて意外すぎます。それはそうと、超絶で発表した PotrAs を公開します。詳しくはプレゼン資料をごらんあれ。プレゼンの閲覧方法：プレゼン資料をクリックしてフォーカス与える→で次のページ、←で前のページHome で先頭、End で最後のページ0〜9＋Enter で入力したページにジャンプ２色のラスタ画像をベクタに変換するライブラリです。プレゼン資料はリアルタイムで変換しながら表示しているので、CPU 消費量が少し高めです。あと、Mac でどう表示されるかが分からないのがちょっと不安です（アンチエイリアスがらみ）。(2007.10.3 追記) Mac 対策しました。Mac では BitmapData.draw したときにデフォルトでアンチエイリアスがかかってしまうため、細い線になるのが原因でした。threshold メソッドで２値化することによ
アドビの新サイトがすごいことになってる - てっく煮ブログ
まあまあ、何はともあれ、次のキャプチャを見てくれ。これはアドビの「会社情報 > アドビについて」のページの一画面だ。Adobe が先週末にサイトデザインを一新して、何気なく色んなページを見て回っていたときに発見したんだけど、この画像、どう見ても日本語だ。「ディッ」と読める。ん？これ？消費者金融の「ディック」。「ィ」の折れ曲がり具合といい、これとしか思えない。もしや、「消費者金融で借金してでもアドビの製品を買いましょう」というメッセージなのか？何はともあれ、会社情報を表示するページで関連のない別会社の看板を表示して、しかもそれが消費者金融というのは、ちょっといかがなものかと思ってしまう…。いや、消費者金融を悪く言うつもりはないんだけど…。よくあることなのかもね深読みはいいとして、実は英語版の会社情報のページでも同じ画像が使われている。ということで、おそらく日本語が読めない人間が「この写真はク
as3Query: alpha version (New Wave ActionScript) [TECH-NI Blog]
as3Query is an ActionScript3.0 port of John Resig's exellent JavaScript library jQuery 1.2.1. This port is released under the MIT and GPL licenses(as is the original jQuery). Documentation is NOT available. Please refer to the original jQuery Documentation. Most features are ported except for Ajax methods. Download Full source code for the engine and examples is hosted on a Subversion(SVN) server
ベジエ曲線の仕組み (4) - ActionScript 3.0 でベジエ曲線を描く - てっく煮ブログ
as今までは一般的な話だったけど、今回は ActionScript に特化した話をします。ActionScript には２次ベジエ曲線を描く Graphics.curveTo というのがありますが、３次ベジエ曲線を描画するメソッドは用意されていません。既にいろいろな方が３次ベジエ曲線を近似する方法を発表されています。flashrod - AS3でフリーハンドベジェsubtech - PBD - AS3 で三次ベジェ曲線を Graphics.prototype を拡張して実装するFlashゲーム講座＆ASサンプル集【曲線について】 - ３次ベジェ曲線を描画するしかし、このどれもが直線で近似しています。直線じゃなく、２次ベジエで近似したほうが精度よくなるかも！と思って、３次ベジエ曲線を２次ベジエ曲線で近似してみました。緑の線が直線で近似した３次ベジエ曲線です赤い線が２次ベジエ曲線で近似した３次
論理演算子（&& と ||）を応用する - てっく煮ブログ
javascript, asjQuery のソースコードを見ていて面白いのがあった。 function add(a, b){ addImpl(b && a, b || a); } function addImpl(a, b){ // ... } 理解するためには、論理演算子を詳しく理解する必要がある。論理演算子詳細JavaScript（というか ECMAScript）の論理演算子は、評価結果が true/false で返される訳ではなく、結果が確定した時点で評価した値が返される。まずは、|| を試してみよう。 alert(2 || 0); // 2 alert(2 || 3); // 2 alert({} || null) // [object Object] alert(0 || 3); // 3 alert(0 || 0); // 0 alert(0 || undefined); //
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Color Illusion Generator
北海道を落とすとどう跳ねるのか？ - てっく煮ブログ