前回に引きつづき、Mozziについて学んでいきます。今回は、Mozziを外部コントローラーから操作する方法の基礎について取り上げます。
センサーでMozziをコントロール
前回に引きつづき、Mozziについて学んでいきます。今回は、Mozziを外部コントローラーから操作する方法の基礎について取り上げます。
INVADER realtime tracker
ARTSAT1: INVADER - realtime tracker α > about this page
ARTSAT1: INVADER – realtime tracker α 公開!!
ARTSAT1: INVADER – realtime tracker α 多摩美と東大による、世界初の芸術衛星「ARTSAT1: INVADER」の打ち上げが成功し、無事周回軌道に乗った。成功を祝して何かできことを、ということで、衛星の位置をリアルタイムで3D表示するWebページ作成した。 WebGLを用いた3Dグラフィクスの表示には、Three.jsを使用。こういうデータを元にした3D表示が非常にシンプルに実装できて、素晴しいライブラリということを改めて実感した。 表示している衛星の周回軌道は、北アメリカ航空宇宙防衛司令部(NORAD)が発行しているTLE(Two Line Element)という、衛星の軌道をテキスト2行で記述したフォーマットをもとに演算している。ちなみに今日現在のINVADERのTLEは下記。 [code] 2014-009F 1 39577U 14009F 140
Processingによる3Dプログラミング
今日の内容 Processingで3DCGプログラミング 3Dの座標系 OpenGLとは 2Dのアニメーションを3Dに拡張してみる 3D座標で図形を描く 視点の移動 3Dのを用いた高度なアニメーション コンピュータで3Dを表現するには コンピュータ画面で3Dを表現したい コンピュータのディスプレイは、2D (縦横に並んだピクセル) 奥行は擬似的に表現するしかない 画面に、立体や空間などの3次元の存在を投影して描画する = 3DCG (3次元グラフィックス) 2次元平面に3次元の存在を投影するには、様々な数学的な知識が必要 Processingではこうした演算を自動的に行うことが可能 3次元の座標系をそのまま使用できる 高速な表示のためのライブラリ(OpenGL)も標準で使用可 3Dの座標系 3Dプログラミング基本 まず2Dの図形を回転するプログラムを作成してみる translateで画面の
グラフィックスプログラミング演習B東京藝術大学 2011年度
2011.10.06 : 第１回：openFrameworks とは何か? 2011.10.13 : 第２回：openFrameworks – 新規プロジェクトの作成、図形を描く 2011.10.20 : 第３回：openFrameworks基礎 動きを生みだす、アニメーション入門 2011.10.27 : 第４回：openFrameworks基礎 2：たくさんの図形を動かす 静的配列と動的配列 2011.11.10 : 第５回：openFrameworks基礎：外部データを扱う、画像データを読み込む 2011.11.17 : 第６回：openFrameworks Addon 1 – ofxControlPanel, ofxOpenCv 2011.11.24 : 第７回：openFrameworks Addon – ofxOpenCvのつづき 2011.12.01 : 第８回：openFr
HTML5実践 – 表現のための様々なJavaScriptライブラリ
この授業では、jQuery、canvas、WebGLなど、Webに関係する様々な技術を紹介してきました。今回は、これまで触れてこなかった、それ意外の様々なJavaScriptのライブラリを紹介していきます。
「ラングトンのアリ」openFrameworks版
「50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！」という記事に触発されて、「ラングトンのアリ」のopenFrameworks版をつくってみた。C++のスピードを生かして40匹のアリを一気に野に放ってみる。 最初地道にトンネルを掘っているのだが、一度トンネルが開通するとそのトンネルを利用してどんどん移動が高速化していく様子が面白い。たまにせっかく掘ったトンネルを塞いでいくマヌケなアリもいたりして… シンプルなルールなのに、まるで一つ一つのアリが知能を持っているように感じられるのが不思議。ラングトンはやっぱり面白い。10年ちょっと前のA-Lifeブームの後、この界隈ってどういう発展をしているんだろう…
プロジェクション・マッピング基礎練
今年の多摩美のopenFrameworksの授業(Media art II)では、プロジェクション・マッピングをとりあげていこうという方針になった。ところが、実は今まで知識としてはプロジェクション・マッピングについて知っていても、自分でゴリゴリとプログラムを書いてこなかった。主な理由としては、身近にプロジェクションしながら試す環境が無いというのが大きい。これではいかんということで、奮発して小型プロジェクターを購入してみた。 TwitterとFacebookでおすすめの小型プロジェクターを募ったところ、複数の方からQUMI Q5が良いという評判が寄せられた。それではということで、amazonで購入。あわせて、SLIKのミニ三脚も買ってみた。 数日で届いたので早速試してみたところ、期待していた以上に明るい。そして小さくて軽い。評判が良いだけあると実感。手元にあったNexus 7と大きさを比較し
Processingによるネットワーク情報のビジュアライズ
今回は、最終課題として出題した「東京藝術大学のネットワーク情報のビジュアライズ」という課題に向けて、どのようにして制作していけばよいのか、その方法について考えていきます。実際のProcessingのコードの内容を解説しながら、その方法について解説していきます。 サンプルファイルのダウンロード Processingのソースコードは下記のリンクからダウンロードしてください。 サンプルコードのダウンロード(Google Driveにリンク) example01: データを読み込む [code lang=”cpp”] JSONArray values; void setup() { values = loadJSONArray("packets.json"); for (int i = 0; i < values.size(); i++) { JSONObject packet = values.
Processingによるネットワーク情報のビジュアライズ 2
最終課題の提出方法 最終課題は以下の方法で制作・提出してください。 最終課題テーマ「芸大のネットワーク情報をビジュアライズ」 配布したJSONデータを利用して、芸大のネットワーク情報をビジュアライズ(可視化)してください。この授業ではProcessingを視覚化のツールとして使用しましたが、その他のツールや自分で独自にプログラミングしても構いません。ただし、最終的にWebブラウザで閲覧できる形式にしてください。 提出期限: 2013年7月31日 提出方法: 作成したプログラム一式をZip圧縮して、以下のメールアドレスに送付してください。 tadokoro+geidai13[at]gmail.com …※ [at]を@に変換 今回も芸大のネットワークの状況をビジュアライズ(視覚化)する手法について、サンプルをみながら解説していきます。 サンプルファイルのダウンロード Processingのソ
HTML5 実践3 – Processingによるデータの可視化と生成的表現
今回からは、この授業の最終プロジェクト「芸大のネットワーク使用状況の可視化」という課題にむけて、どのように取り組んでいけばよいのか考えていきます。まず、今回はデータのビジュアライズ(可視化)とジェネラティブ(Generative = 生成的)な表現について考えていきます。
ガイダンス - Bio Media Art Workshopについて、Processingの復習 - yoppa org
このワークショップの目標 Bio Media Art Workshop (略称 BMAW) では、Processing および Arduino とそれらを組み合せて、センサーで環境の情報を計測したり、音や光、動きで 環境に働きかける方法を学び、植物と電子工作、プログラミングやネットワークを組み合せたバイオ・ガジェットを制作します。 作成したバイオ・ガジェットはTwitterやFacebookなどのSNSや、xivelyなどの計測データの共有サービスを利用して、積極的に世界中とシェアすることを目指します。 このワークショップでは、以下のツールやネットサービスを使用して作品を制作していきます。 Arduino センサーで計測した周囲の環境に関するデータを取得してMacなどのPCに送出します。デジタルとアナログの入出力ポートを備えたマイコンを搭載した専用の基板と、専用の開発環境から構成されていま
ProcessingとArduinoを接続する
今回は、いよいよProcessingとArduinoを連携する方法について実際にプログラミングしながら学んでいきます。ProcessingとArduinoを連携する方法は大きく分けて2つのやり方があります。 1. 既存のライブラリを使用する方法 Arduino側にFirmataライブラリ、Processing側にArduinoライブラリをインストールして、Processingから直接Arduinoの入出力を操作する方法。 2. シリアル通信を自作する方法 外部ライブラリは使用せず、ArduinoとProcessing双方で、シリアル入出力のプログラミングを行う方法。 今回はこの2つの方法の双方を紹介していきます。 連携方法 1: ArduinoライブラリとFirmataを使用する方法 注意!!: Processing 2.0は、Arduinoライブラリ+Firmataの環境に対応していませ
ProcessingとArduinoを接続する 2 – 時系列データの視覚化、Touche導入
サンプルプログラムのダウンロード サンプルプログラムは下記からダウンロードしてください。 サンプルプログラム(Githubにリンク) ProcessingとArduinoの連携: シリアル通信を自作する方法 (先週のつづき) 次に、ArduinoとProcessingのもう一つの連携方法について試していきましょう。次に試す手法は、Arduino、Processing双方でシリアル通信のためのコードを自作して、通信の仕組み自体を自作していく方法です。Firmataを使用する方法に比べてきめ細かく効率的な通信が可能となります。また、Processing 2.0でも問題なく作動します。このワークショップで最終的に使用するToucheセンサーに関しても、このシリアル通信を自作する方法を用います。 今回のシリアル送受信には「ハンドシェイキング(handshaking)」という手法を使用してみます。ハ
CSS入門1 – 情報の形を視覚化する
ここまで4回にわたって解説してきたHTMLは、文書の中に目印をつけて(マークアップ)、その構造を記述するための言語でした。その結果ブラウザに整形されたページが表示されるものの、文字の色や大きさ、背景の色、行間やフォントなど、そのデザインはブラウザであらかじめ決められた固定のものでした。今回からはこのHTMLで構造を記述された文書に対してデザインを行うための新たな仕組みについて解説していきます。HTMLに対してその表示形式を制御するしくみとして「スタイルシート」というものがあります。HTMLではその代表的な仕組みとして、CSS (Cascading Style Sheets) があります。このCSSとHTMLによって、体裁と構造を分離して記述することが可能となり、現在のWebデザインの基本となる考え方となっています。今回はこのCSSの仕組みと基本についての導入を行います。 スライド資料 本日
Beyond Interaction PDF版をCreative Commonsライセンスで配布開始!
Beyond Interaction PDF版をCreative Commonsライセンスで配布開始! 『Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門』のPDF版が、Creative Commonsライセンス(CC-BY-NC-SA)でダウンロードできるようになりました。また、PDF版の公開にあわせて、書籍内のサンプルコードを全てopenFrameworks v0073で動くように更新しました。現在openFramworksのバージョンアップに対応した改訂版を準備しています。順調にいけば今年の春頃には出る予定です。こちらもご期待ください。 無料での公開というあまり前例のない英断をしてくださった、BNN新社の村田さん、本当にありがとうございます。 Beyond Interaction – PDF edition（8.8 MB）
後期：第4回 Canvas + Javascriptで図形を描く・アニメーション
今回は、HTML5でブラウザに直接図形を描くことができるCanvas要素についてとりあげます。いままでは、ブラウザで図形やアニメーション表現する際には、FlashやJava Appletといった外部の機能が必要でした。Canvasでは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことが可能となります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プログラム初級講座 – メディア芸術をはじめよう
TumblrでWebサイトを作成
第8回: CSSフレームワークを使う – Twitter Bootstrap入門