f8g

JavaScript

等高線を描く

基盤地図情報を使うと画像が公開できないので、普通の画像のRGBを標高値として等高線を描きます。 アルゴリズムが合ってんだか間違ってんだか分からん。(間違ってたのでコード修正しました) 簡単なアルゴリズムでは、画像を三角形に分割してその中で線を引い…

putImageData の透過とふつうの透過

putImageData の透過 Canvas の putImageData は、その部分のデータを完全に上書きするので、alpha を 255 以下にしても以前のデータが透けて見えるなんてことにはなりません。画像合成なんかには使えません。 canvas.putImageData({ width : 50, height: 70…

基盤地図情報をcanvasで

最近でもないけど、基盤地図情報が無料でダウンロードできるようになった。 http://fgd.gsi.go.jp/download/ blogで画像を公開するのには申請が必要みたいなので今回は画像なし。 データ GML版の方が軽くてシンプルなのでそっちを使ってやります。(だた、そ…

画像から文字へ変換する

http://taro.haun.org/pgm2kanji.html JavaScript用変換表 (全角スペース付け足し) var chars = ["\u3000", "\uFF0E", "\u00B4", "\u3001", "\uFF3E", "\u3002", "\u2018", "\uFF1B", "\u30FE", "\u30FC", "\u30CE", "\u3043", "\u304F", "\u30B7", "\u3079…

Tombloo + 部分的な画像処理

Tomblooの'Photo - Capture'のコードを読むと、selectRegionで範囲を選択できて、roundPosition、getElementPositionで要素の位置なんかを取得できるようです。それらを使って、部分的な画像処理をしてみます。 最新版が必要: image_processing.js Tombloo.S…

Tombloo + 画像処理

ImageProcessing.jsをTomblooで使ってみる。 スクリプトディレクトリにimage_processing.jsを保存。 extractorを書いてスクリプトディレクトリに保存。 例 Tombloo.Service.extractors.register({ name : 'Photo - Filter', ICON : 'chrome://tombloo/skin/p…

自動コントラスト

画像濃度変換処理 濃度の最小値が0, 最大値が255になるようにする濃度変換。与える関数は、 var f = function(x){ var a = 255 / (max - min); var b = - a * min; return a * x + b; }; 一般的な画像では最大値≒255、最小値≒0ということが多いので、見た目…

ラベリング

http://www.microsoft.com/japan/msdn/academic/Articles/Algorithm/03/ これ使用 ImageProcessing.prototype.f= function(fnc){ return fnc(this); }; var ip = ImageProcessing.load("img.png"); // ImageDataを使用した方が速い ip.support.pixel = false…

FirefoxのImageDataの挙動

各ピクセルの濃度を+50にした図。(左: Firefox、右: Opera) Firefoxだと255を超えるとダメらしい。ちゃんと丸めると直る。 ちょっとしたことで全然別物になってしまって怖いので気をつけよう!

ImageDataとgetPixel, setPixelの速度比較

比較項目 ImageData (all) 画像全体のImageDataオブジェクトをあらかじめ変数で持っておき、dataの内容だけを変更して最後に1回putImageData。 ImageData (1px) 1 * 1のImageDataオブジェクトを用意しておいて, 1pxごと処理 & putImageData。 Pixel getPixel…

ハーフトーニング(拡散誤差法)

パターンを用いたものではなく、空間フィルタリングのときのようなフィルタを掛けて2値化。 コード これ使用 ImageProcessing.prototype.errorDiffuse = function(flt){ var self = this; // init var w = this.canvas.width; var h = this.canvas.height; v…

ハーフトーニング (ディザ法)

画像を2値化するハーフトーニングのDither法が面白かったので紹介。 コード パターンを与えると、それっぽく点を打つ。(これ使用) function dither(img, pattern){ var black = new ImageProcessing.Color(0, 0, 0); var white = new ImageProcessing.Colo…

画像に文字を仕込む

ありがちだけど、画素のRGBの値に文字コードを割り当てると、1ピクセルに3文字入れることができる。 サンプルコード。 (前までのもそうだけど、このライブラリを使っている) function CodeToImage(canvas, code){ var ip = new ImageProcessing(canvas); i…

JavaScriptで空間フィルタリング

あるピクセル(V0.0)と周囲のピクセルとフィルタ行列を掛けて、それらの合計をV0.0のところに置くようなやつ。 Photoshopでは5*5, 7*7も高速にやれるけど、さすがにJavaScript/Canvasでは3*3でも遅い。 イメージ V-1.-1 V0.-1 V1.-1 V-1.0 V0.0 V1.0 V-1.1 V0…

JavaScriptで濃度変換

1pxごとに何らかの関数を与えて, 明るさなどを変える。セピアやグレースケールもこの類だと思います。 IronRubyのやつ http://d.hatena.ne.jp/arikui/20070918/1190050541 元画像 明るさ調整 var _f = function(n){ return function(x){ return x + n; }; };…

OperaのCanvasが凄いのでモザイク

いまさらながらOperaにはgetPixel/setPixelがあることを知りました。 http://orera.g.hatena.ne.jp/higeorange/20080604/1212505679 Operaさんはすげえぜ! ただ、色の指定が文字列ってところが使いづらい。 ということでモザイク。 CanvasRenderingContext2…

iTunesで聴いてる曲をYouTubeから探してTumblrにpost

やってることは以前のと大して変わらず。 http://d.hatena.ne.jp/arikui/20071015/1192378488 ビデオ探すのはHTMLをテキスト処理なので、YoutubeのHTMLが変わったら使えません。API使うの登録とか面倒そうだし。 user_id, passwordを変更して実行。 /* tumbl…

自動リロード(1行と9行)

http://d.hatena.ne.jp/kusigahama/20080620#1213969501 のPowerShell版。1.0でやってます。 PS> $f="test.js";$c="cscript test.js";while(1){clear;invoke-expression $c;$l=$(Get-Item $f).lastwritetime;do{start-sleep 1}while($l -eq $(Get-Item $f).l…

WSHでFast Look up Alc

http://userscripts.org/scripts/show/12024 HTMLパーサを使おうと思ったけど、やり方がわからなかったので諦めました。保存するようなのにしたい(いつか)。 /************************* * tsu ka i ka ta * > cscript alc.js word **********************…

デバイスのCOMポートを調べる

WMIで調べられるらしい。 var objWMIService = GetObject("winmgmts:\\\\.\\root\\CIMV2"); var colItems = objWMIService.ExecQuery("SELECT Name FROM Win32_PnPEntity WHERE Name like '%(COM%)'"); var enumItems = new Enumerator(colItems); for (; !e…

コマンドプロンプトからスクリプトを実行

コマンドプロンプトからWSHのスクリプトを実行するときは普通こうします。 >cscript ファイル名cscriptはファイルからしか実行できないので、ちょっとした動作を確認したいときでもいちいちファイルを作る必要があって面倒です。そこで、 eval(function(a,c,…

何気にバージョンアップしていた

これ。 http://arikui.s101.xrea.com/test/ath.zip スクリプト読み込みを拡張して使ってたり。 変更点 プラグイン機能 (function(){ var config = {}; config.sensor = { name: "sample", initialize: function(){ document.body.innerHTML += "init " + thi…

Bounding Box

こんなん。 var GeoFeatures = function(){}; (function(){ /* * Point */ GeoFeatures.Point = function(x, y, z, m){ this.x = x || 0; this.y = y || 0; this.z = z || 0; this.m = m || 0; }; GeoFeatures.Point.prototype = { x: 0, y: 0, z: 0, m: 0, …

万単位の点を打つ

GPSで取ったデータで、標高ごとに色を変えて点を打っていこうと思った。 サンプル 線データ: 30ぐらい 点データ: 22000ぐらい (面倒なのでArray.prototype.eachなど前提) 一つずつ打ってく 単純にこんな感じで。 data.geometries.each(function(geom){ geo…

X3Dの紹介

X3DってのはVRMLの派生でXMLになったやつだと思います。ブラウザはたくさんあるようだけど、不安定だったり、動作が恐ろしい感じだったり、読み込めないファイルがあったり、実装が全てに至ってなかったりと、いまいちなのが多いようです。 その中でFlux Pla…

ちょい変更

http://d.hatena.ne.jp/arikui/20071007/1191767042 GoogleのHTMLが変わっていたので変更。 document.evaluate('//span[@class="gb1"]/a',document,null,6,null).snapshotItem(0) // ==UserScript== // @name post google image on tumblr // @namespace htt…

VB.NETでCOMコンポーネント作るのが凄い簡単でした

http://www.vector.co.jp/soft/win95/prog/se373990.html これを見るととても簡単そうなのでやってみたら、本当に簡単にできた。試しにMSCommっぽいの。 Imports Microsoft.VisualBasic Imports System.Runtime.InteropServices Imports System.IO.Ports Nam…

toString

var f = function(){ alert(1); }; window[f] = 0; alert(window[f]); f();

XAMLからJavaScriptへ

http://d.hatena.ne.jp/arikui/20071121/1195578254 の続き。@ITのサンプルXAMLの中のTextBlockを全てJavaScriptで作る。 元のXAML(サンプルから少し変更) <TextBlock Width="304" Height="51" TextWrapping="Wrap" FontFamily="Arial" FontSize="48" FontWeight="Bold" Text="Hello World!!" RenderTransformOrigin="0.5,0.5" > <TextBlock.Foreground> </textblock.foreground></textblock>

Javascriptが好きな人のためのSilverlight入門

http://www.atmarkit.co.jp/fwcr/rensai2/silverlight01/silverlight01_1.html ここにあるサンプルはほとんどXAMLで書かれていてゲロ吐きそうになった。XAMLはCanvasだけでも、JavaScriptで色々と書ける。高機能なcanvasエレメントみたい。 準備 Silverlight…