GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

「 Canvas 」 一覧

病院位置 95,762件プロット

【D3.js】約97,000件の位置情報を地図にプロットしてみた。

2016/04/02   -Canvas, D3v3

医療経済研究機構にて、公開されている「全国保険薬局一覧」と「全国保険医療機関(病院・診療所)一覧」データをD3.jsを使って地図上にプロットしてみた。 全国保険医療機関(病院・診療所)一覧 データの数 …

D3.jsを使ってジェネレーティブアートを作成してみた

2016/03/25   -Canvas, D3v3

最近、D3.jsを使ってジェネレーティブアートの勉強をしているので、ゴラン・レヴィンの作品を参考にボロノイ図エフェクトを画像に適用してみました。 Segmentation and Symptom &# …

reprojection

【D3.js】世界地図画像をクライアントサイドで再投影処理する

2015/05/28   -Canvas, D3v3

example 正距円筒図法で作成された世界地図画像をクライアント側で他の投影法へ変換し出力します。 結構負荷が高いです。 サンプル 概要を簡単に説明すると、d3.geo.projectionの緯度経 …

openlayers Canvas effect

OpenLayers ver.2でもクライアントサイドで地図タイルを画像処理できた

2014/05/27   -Canvas, OpenLayers

電子国土基本図(オルソ画像)を読み込みクライアント側で画像処理して表示する 先日、上記の記事を書きましたが、OpenLayers2でも同様のことができたのでサンプルを掲載しておきます。 example …

電子国土基本図(オルソ画像)を読み込みクライアント側で画像処理して表示する

2014/05/24   -Canvas

電子国土タイル画像をクライアントサイドでグレースケール化 mapbox.jsとmodLayer.jsを利用すると、読み込んだタイル画像をcanvasに転写し地図として展開してくれるそうです。しかも、c …

HTML5+JavaScriptによる画像・動画像処理入門

Canvasを使ってWebカメラで動体検知を行う

2014/05/23   -Canvas

しばらくこぶさたしていたCanvasの勉強を再開しました。 HTML5+JavaScriptによる画像・動画像処理入門 posted with amazlet at 14.05.23 松田 晃一 カッ …

Gunma.web #14で発表したスライド「canvasで遊ぼう!」

2013/09/23   -Canvas, Javascript

遅くなりましたがGunma.web #14で発表したスライドです。 「canvasで遊ぼう!」 HTML5のcanvas要素についての発表を行いました。 スライド内で発表したデモについての簡単な説明。 …

JavaScriptでヘッドトラッキング

2013/09/16   -Canvas, D3v3, Javascript

ヘッドトラッキングで地球儀をぐるぐる回すよ! example Gunma.web #14で発表してきた内容の一つ、Canvasを使ったヘッドトラッキングライブラリを使って作成したデモです。 カメラに対 …

【英語】Kindleで買えるお勧めHTML5 Canvas技術書【読めない】

Kindleでは海外の技術書が手軽に買えてありがたいですね。 最近買った本の中から一冊お勧めしたいと思います。 Core HTML5 Canvas: Graphics, Animation, and …

Macでアスキーアートが崩れてしまう問題を回避する(webフォント)

ただし、日本語を含むAAは無理。 以前、canvasタグについて勉強していたときに、動画をアスキーアートに変換するスクリプトをつくってみたのですが、Macのブラウザで閲覧するとAAを動かしたときにどう …

‘input type=file’から’canvas’への転写(画像の引き伸ばし対処)

2012/09/26   -Canvas, Javascript

‘input type=file’から’canvas’に転写する際、画像のサイズがcanvasのサイズより大きいとcanvasのサイズでトリミングされて …

no image

画像の無断転載対策をできるだけがんばってみた。

2012/08/09   -Canvas, Javascript, 著作権

【参考】 著作権法について誤解していたこと togetterで最近話題になっていたので。JavaScriptでどこまで無断転載対策が行えるか実験してみました。 (無断転載対策というか、画像のダウンロー …

no image

javascriptで自動着色やってみた。

2012/02/09   -Canvas, Javascript

「MangaMeeya(マンガミーヤ)」 “自動着色”機能すげぇwwwwwwwwwを読んでいて、canvasで同じようなことが出来ないかな? と思いやってみました。 一からつくる知識もスキルもないので …