読者です 読者をやめる 読者になる 読者になる

自習室

こもります

.JavaScript

noisejs の TypeScript 型定義ファイルを作成し Contribute してみた

なぜしたか Create.js を TypeScript で書くことがあったのですが、その中で perlin/simplex noise を使いたくなり、それももちろん TypeScript で書きたいなーとなりました。 bower/npm で手に入る perlin/simplex noise の javascript 実装として GitHub -…

THETA S のUSBライブストリーミングをブラウザで球面マップする

はじめに Theta S が出たときからずっと、USBカメラとして使えるなら WebRTC に流したい! と思っていたのですが、Dual Fisheye の画像を球面にマップするところが自分では実装できず困っていました。 それからしばらくして、この記事様様さまを拝見し、あり…

16bit 浮動小数点のテクスチャできれいにブレンドを行う

はじめに 前回の記事では、WebGL(Three.js)でFBO ping-pongすることで、テクスチャのブレンディングを行い、それによって映像中の動く物体を消す処理をやってみました。 Three.jsのオフスクリーンレンダリングとping-pongで、リアルタイム動体除去を行う - …

Three.jsのオフスクリーンレンダリングとping-pongで、リアルタイム動体除去を行う

はじめに 前回に続き、ブラウザ内だけで画像処理的なことをしよう、というチャレンジです。今回は動体除去というか、モーションブラーというか、画像の時間平均処理をしてみます。 上の写真は、割と短時間の平均画像です。動いているものが透けているのがわ…

WebRTCの動画にThree.jsのポストプロセスでエフェクトをかける

やりたいこと このブログで何度かにわたって、ブラウザとopenFrameworksを連携させ、oFで加工した映像をWebRTCで扱う、というシリーズをやっていますが、今回は、映像の加工もブラウザ内で完結させてみます。 CSS でもいろいろ出来る ブラーや明るさ調整は、…

ofxLibWebsockets で oF とウェブブラウザの間でお話しする

はじめに 相変わらず、ブラウザとopenFrameworks 間で共同作業させるシリーズです。 以前こんなものを書きました。 ycapture で OpenCV での処理結果を Windows のビデオソースとしてブラウザに流し込む - 自習室 html から node.js を介して oF の画像処理…

dropmark のビデオプレイリストの再生をループさせるChrome Extension を作った

動機 こんなことがしたい、と思いました 余ってるPC + ディスプレイで、様々な動画を垂れ流しにしたい(会社でシェアしたい) 極力簡単にプレイリストを管理したい YouTube と Vimeo のリンクを貼るだけでOKみたいな感じがベスト 全画面再生 ループ イケてる動…

ブラウザ上の開発環境 "CLOUD PEBBLE" で Pebble アプリの開発をしてみた

はじめに Kick Starter で、とんでもない額の投資を得て話題になっています。$500,000- の目標に対し、3月8日午前時点で $16,816,735- の投資を集めています。達成率で言うと3000% です。 公式: 追って発表された、Pebble Time Steel と Smartstrapsについ…

Web Audio API の勉強 - グラフィックイコライザーを作る

はじめに 前回の記事で「Web Audio API はシンプルで使いやすいしパフォーマンスも問題なさそう」という予感を得たので、少し勉強してみることにしました。まずは基本的な使い方を勉強して、それから練習問題として、グラフィックイコライザーを作ってみます…

マイク入力を WebAudio で加工して、ビデオと合流させた後 WebRTC で使う

はじめに 前の2記事ほど、ウェブカメラの映像を openFrameworks で加工してビデオデバイスに再度流し込むことで、WebRTC などで扱えるようにする方法について調査してきました。 ycapture で OpenCV での処理結果を Windows のビデオソースとしてブラウザに…

html から node.js を介して oF の画像処理をコントロールし、ブラウザ上で閲覧する

はじめに 前回の記事で ycapture を使って、oF の描画内容を Windows のビデオデバイスとして流すことで、ブラウザからも見ることが出来るようにする手法について紹介しました。 ycapture で OpenCV での処理結果を Windows のビデオソースとしてブラウザに…

ycapture で OpenCV での処理結果を Windows のビデオソースとしてブラウザに流し込む

はじめに WebRTC を使ってビデオチャットアプリを作る際に、ビデオ画像にエフェクトをかけたくなりました。モザイクとか、ブラーとか、漫画カメラとか。 ブラウザ上でJavaScriptでごりごり画像処理をするのはさすがに厳しそうですので、画像処理を行うのは別…

(タブレットで) 鏡餅を光らせて新年を迎えましょう | 実装編

はじめに (タブレットで) 鏡餅を光らせて新年を迎えましょう - 自習室 前回は、おうちハック Advent Calendar 2014 向けとして記事を書きました。そちらでは全体の紹介と、取り組んだ背景みたいなところにフォーカスして書いたので、今回は自分向けに実装で…

(タブレットで) 鏡餅を光らせて新年を迎えましょう

この記事は おうちハック Advent Calendar 2014 25日目(なんと最終日!)の記事です。 前日は @K-A-Z さんの 「Arduino+Raspberrypi+GoBotで恋人たちの聖夜を支援する - Qiita」 でした。 ベッドイン検知、まじめなライフログとして王道な利用法も出来る気が…

JavaScriptでニュートン法を用いて三次方程式を解いて、ついでにグラフも描く

初めに 完成品 ここで動きます 動機 そもそもの目的は、楕円の法線を求めるために四次方程式を解くことだったのですが、まずは手始めに三次方程式を解くことにしました。結果、高校時代に勉強した内容を思い出して、懐かしいような気分に浸れて、変な楽しさ…

CreateJSで 2D 線分の交差判定

はじめに 2Dにおける物体どうしの衝突判定アルゴリズム、またはその一部として、線分同士の交差判定が必要になりました。 アルゴリズム 今回は、こちらの記事を忠実に実装させていただきました 2D衝突編 その10 線分と線分の衝突 線分ですので、 始点 + ベク…

openFrameworks, Three.js, Processing のGLSL バージョン対応状況調査

はじめに openFrameworksのセミナーでShaderに触れた この週末、合宿で行われた openFrameworks のセミナーに参加してきました。 セミナー本体の紹介は @yumu19 さんが現場の雰囲気なども伝わってくる素敵な記事を書いて下さっています。 openFrameworksセミ…

Three.js の VertexShader でカードをうにょんと曲げる

やったこと VertexShader の練習として、シンプルな変形にチャレンジしてみました。 できあがりはこんな感じです。平面状のポリゴンを曲げてみます。 完成のソースコードを上げてあります izmhr/curveCard_vShaderTest izmhr/curveCard_vShaderTest · GitHub…

Processing.js で 外部 pde コードにブレイクポイントをはる

今回も単発ネタで恐縮です 環境 Processing.js (1.4.8) Google Chrome Developer Tools やりたいこと Processing.js では、processing 形式で書いているコードが、 Processing.js によって JavaScript に変換されたのち、ブラウザのJavaScript実行エンジンで…

Processing.js で複数の pde ファイルを読み込む

単発ネタで恐縮です processing.js 初日です。 やりたいこと setup(), draw() らを含むメインの pde ファイルと、 class 定義を含む pde ファイルを分割している Processing (not .js) のサンプルがたくさんあります。 Processing だと、上の写真のように、…

connect-sqlite3 でsessionストア

注意 相当イケてないですが、本記事は Connect2.* 系な書き方になっております。 (つまり、Express3.*系) npm install connect@2.23.0 --save # 2014/07/22時点の、connect2系最新 環境 Ubuntu 12.04 LTS 32bit on Vagrant (virtual box) Node 0.10.29 on no…

windows で Node.js の child_process.exec を利用する

今回やること Node.js のプロセスから、引数を渡して hello.exe を実行し、出力を受けてNode.js側で活用する、超シンプルサンプル作成 参考にさせていただきました Node.jsで外部のコマンドを実行する方法: child_processを使う - memo.yomukaku.net Windows…

HTML + CSS + JavaScript でテトリスを作った話

はじめに 前の記事3件にも立て続けに書きましたが、仕事でWeb系の技術を使うことが増えたので、経験値貯めるために家でも何かしようと思って始めました。 こちらで動いています 操作法(テトリスのフレームを選択中は操作できます) r 右回転 / shift + r 左回…

開眼!JavaScript:オブジェクトの振る舞いについて細かいとこメモ (3/3)

どんな本 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質作者: Cody Lindley,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/06/19メディア: 単行本(ソフトカバー)この商品を含むブログを見る (ECMA-262 3rd edition 準拠の) オブジェ…

開眼!JavaScript:オブジェクトの振る舞いについて細かいとこメモ (2/3)

どんな本 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質作者: Cody Lindley,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/06/19メディア: 単行本(ソフトカバー)この商品を含むブログを見る (ECMA-262 3rd edition 準拠の) オブジェ…

開眼!JavaScript:オブジェクトの振る舞いについて細かいとこメモ (1/3)

どんな本 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質作者: Cody Lindley,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/06/19メディア: 単行本(ソフトカバー)この商品を含むブログを見る (ECMA-262 3rd edition 準拠の) オブジェ…

Node.js+Express+MongoDBでSessionを利用する、をちょっと整理して理解を試みた

まえおき 前回までの記事で、Node.jsのアプリ上で4sqAPIを叩いて色々出来る下地が整ったのですが、ユーザアカウントの切り分けなどは全く考慮していないので、このままだとユーザAさんがOAuthした後にユーザBさんがサイトにアクセスするとBさんは何もしなく…

FourSquare API を Node.js から使ってみる (後編)

前置き 前回はアプリを登録してクライアントIDとクライアントキーをもらい、node-foursquareのtestアプリでそれを使ってAPIにアクセスするところまでやりました。今回はその続きです。 FourSquare API を Node.js から使ってみる (前編) - 自習室 まえおきこ…

FourSquare API を Node.js から使ってみる (前編)

まえおき こちらの記事に触発されて、4sq API を叩いてみたくなりました。すばらしいツールなのでぜひ試してみて下さい。 今までfoursquareにチェックインした都道府県を塗りつぶしてくれるツールを作ったよ - koogawa blog #foursquareでチェックインした都…