タグ

ブックマーク / yoppa.org (17)

  • 第7回: p5.js Libraryを使う 1 – p5.dom でHTML 5オブジェクトを使う

    p5.jsは、その設計思想として、構造をあまり複雑にせず創造的な部分に集中できるよう焦点を絞っています。グラフィクスとモーションを作り、マウスやキーボードといった汎用的な入力デバイスに反応する機能が基です。しかし、それ以上のことを行うために、p5.jsではライブラリー (Libraries) というものが用意されています。ライブラリーとは汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものです。p5.jsでも用途に応じて様々なライブラリがまとめられ、入手できるようになっています。 今回はp5.jsのライブラリーを使う第1弾として、p5.domを使用します。このライブラリーによって、p5.jsのcanvasの枠を越えて、HTML 5のDOMに直接アクセスすることが可能となります。例えば、Webブラウザで用意されている、ボタンやチェックボックス、スライダーなどのGUIのパー

    第7回: p5.js Libraryを使う 1 – p5.dom でHTML 5オブジェクトを使う
  • 第9回 作品への応用2: oscP5 – OSCによるアプリケーション間通信

    今回は、ネットワークを活用したサンプルを紹介します。Open Sound Control(OSC)というプロトコルを使用して、アプリケーション同士をネットワークを介して通信する方法について解説します。これにより、Processingのスケッチ間で通信したり、複数のユーザが1つのスケッチを遠隔操作することが可能となります。またProessingのスケッチを他のアプリケーション、例えば、Sonic Pi、Max/MSPやPd、SuperColliderなどの音楽アプリケーション、さらにはTouchOSCといったiPhoneアプリなどからコントロールすることが出来るようになります。 Sonic Piのダウンロードは下記のURLから行ってください。 http://sonic-pi.net/ スライド資料 第9回 作品への応用2: oscP5 – OSCによるアプリケーション間通信 サンプルプログラ

    第9回 作品への応用2: oscP5 – OSCによるアプリケーション間通信
  • 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で画面の中心を座標の原点に

    Processingによる3Dプログラミング
  • C++の疑問: 値渡し、参照渡し、ポインタ渡し

    ※ 末尾に追記あり。 C++、いろいろ未だにわからにことだらけなのだけれど、関数に値を送る場合の 値渡し 参照渡し ポインタ渡し の違いがいまだにすっきりと整理できていない。 C++、自分の場合はoFで使うことがほとんどなので、oFのコードで実験してすっきりしてみようとシンプルなコードを書いてみた。 力をベクトルで与えると運動するParticleというクラスを以前から作っていたいので、これはそのまま流用。長くなるのでコードの内容は割愛。 Particle.h Particle.cpp Particleを操作するためのMoverというクラスをつくってみた。このMoverクラスは3種類の方法でParticleのインスタンスを受けとることができる A: 値渡し B: 参照渡し C: ポインタ渡し Mover.h #pragma once #include "ofMain.h" #include

    C++の疑問: 値渡し、参照渡し、ポインタ渡し
    animist
    animist 2016/08/10
    この辺、実はあんまちゃんとよくわからないまま、糊塗してやってる節があるワタクシ
  • 第4回:Maxuinoを使用して、Max/MSPとArduinoを連携する

    今年度のSSAWは、月曜日は主にArduinoを使用したセンサーの制作、火曜日はMax/MSPを使用した音響合成やサンプリング・プレイバックについてとりあげてきました。今日はいよいよこの両者の技術を統合してオリジナルの「楽器」を制作していきます。まず前半で、Max/MSPとArduinoを連携するための環境「Maxuino」について解説します。後半はMaxuinoを活用して、課題として作成してきた自分の「楽器」をArduinoからコントロールできるよう改造します。 サンプルパッチ5月24日 (Google Docsにリンク) Daisuke Tsukada — 14 November 2012 01:00 八王子のoFセミナーではお世話になりました、九州の束田です。 この度、田所先生の講義資料を元にMaxuinoの実験をさせて頂きまして、アナログ信号を取得できてMaxuinoが使えました。

    第4回:Maxuinoを使用して、Max/MSPとArduinoを連携する
  • openFrameworks – addon を使う 3 : OpenCVを利用した映像認識

    今回は、OpenCVという映像解析の技術を応用して、ライブ映像を用いたインタラクティブな表現に挑戦します。 「OpenCV」とは、「Open Computer Vision Library」の略で、オープンソースでコンピュータビジョンの技術を利用可能なライブラリです。米Intel社で開発され、画像処理・画像認識用のC/C++言語のライブラリとして配布されています。商用・非商用を問わず無料で使用することが可能です(BSDライセンス)。 OpenCVのコアとなる技術「コンピュータビジョン」とは、ひとことで言うと「ロボットの目」を作るという研究分野です。「コンピュータビジョン」の実現のために、画像のセンシングのためのハードウェアの研究から情報を認識するための人工知能の研究まで、広範囲な分野の研究が行われています。 OpenCVは、この「コンピュータビジョン」の研究の中でソフトウェアを用いて画像処

    openFrameworks – addon を使う 3 : OpenCVを利用した映像認識
  • openFramewoks – OSC (Open Sound Control) を利用したネットワーク連携

    今回は、ネットワークを使用したopenFrameworks同士の連携と、openFrameworksと他のアプリケーションとの連携について取り上げます。openFrameworksでネットワークを利用す方法はいくつかありますが、今回はその中で比較的扱い易いプロトコルである、Open Sound Control (OSC) についてとりあげたいと思います。 Open Sound Control (OSC)とは Open Sound Controlは、カリフォルニア大学バークレー校にある CNMAT(The Center for New Music and Audio Technologies)が開発した、通信プロトコルです。その特徴について、CNMATのページではOSCについて下記のように要約されています。 Open Sound Control (OSC) is a protocol for

    openFramewoks – OSC (Open Sound Control) を利用したネットワーク連携
    animist
    animist 2015/04/14
  • openFrameworks Addonを使う 2 – ofxOpenCVとofxCv

    今回も前回に引続き、openFrameworksのアドオンを取り上げます。今回は映像を用いたインタラクティブな作品に多数用いられている、コンピュータビジョンを実現するOpenCVという技術をとりあげます。OpenCVをopenFrameworksで使用ためのアドオンは、ofxOpenCvとofxCvという二種類が存在します。今回はこの双方を取り上げて、様々な利用法を紹介します。 サンプルファイルのダウンロード 解説したプログラムの全てのソースコードは下記のGithubのリポジトリからダウンロード可能です。 https://github.com/tado/tau_ma2_13

    openFrameworks Addonを使う 2 – ofxOpenCVとofxCv
  • CCSS 2014 第4回: openFrameworksで アルゴリズミック表現

    参加予定のみなさんへ、事前準備のお願い 「クリエイティブ・コーディング・スクール in さっぽろ 2014」の第4回「openFrameworksでアルゴリズミック表現」が9月13日に開催されます。半日(13:00−18:00)とはいえ、いろいろ作業をしながらだと、あっという間に時間は過ぎてしまいます。そこで、このワークショップに参加される皆様に、事前に環境のセットアップの部分は準備していただき、スムーズに内容に入っていければと考えています。 以下の解説を呼んで、事前準備を済ませた状態で参加していただくようお願いいたします。もし、うまくいかない点や不明な点があれば、下記のemailにご連絡ください。 tadokoro[at]gmail.com ※ [at]を@に変換 1. openFrameworksの最新版のダウンロード Mac OS XとWindowsでは、ダウンロードするファイルが異

    CCSS 2014 第4回: openFrameworksで アルゴリズミック表現
  • Processingで画像データを扱う

    ※こちらの内容は既に古い情報となっています。新しく書き直した記事を参照してください。 Processingで画像データを扱う – 画像の分析・再合成 画像を表示する Processingで画像を表示するためには、画像ファイルをそのスケッチのある階層に「data」フォルダを作成し、その中に画像ファイルを入れる Jepg、GIF、PNG形式に対応している 画像を表示するには、image() 関数を用いる image(画像ファイル名, x, y); – 座標(x, y)を左上にして、画像を表示 image(画像ファイル名, x, y, width, height); – 座標(x, y)を左上にして、幅(width)と高さ(height)を指定して画像を表示 画像を表示 PImage img; void setup() { size(640, 426); img = loadImage("pho

    Processingで画像データを扱う
  • 第7回: openFrameworks addons – Audio + Visual, ofxPd, ofxSuperCollider (1)

    第7回: openFrameworks addons – Audio + Visual, ofxPd, ofxSuperCollider (1) 今回は、Addonを用いてオーディオとビジュアルを融合するための手法について考えていきます。オーディオからビジュアルへの変換と、ビジュアルからオーディオへの変換という2つ方向に分けて、それぞれの手法について考えていきます。 前半はオーディオからビジュアルに変換する方法のひとつとして、openFrameworksにFFT解析のためのクラスを追加して波形をFFTで解析しその周波数成分を視覚化する方法について探っていきます。後半はビジュアルからオーディオに変換する手法として、openFrameworksと音響合成のためのアプリケーションをAddonを利用して組合せる方法について解説します。今回は、Pdを使用するためのofxPdとSuperCollide

    第7回: openFrameworks addons – Audio + Visual, ofxPd, ofxSuperCollider (1)
  • 第12回:Minimによる音響の視覚化、FFTによる音響解析と可視化

    前回のMinimの導入では、サウンドファイルを再生し、波形を表示することができるようになりました。しかし、音の波形を表示したら音響を視覚化したことになるでしょうか。実は我々の耳は音を波形ではなく、周波数に分解して知覚しています。ですので、波形をそのま操作して表示しても、あまり音と一致した映像にはなりません。音を周波数の帯域ごとの音量に分解するには、フーリエ解析という手法を用います。これにより、音を周波数帯域ごとの強さにわけて取得することが可能となります。今回は、このフーリエ解析を利用して、音を可視化してみましょう。 プログラムサンプル7月6日 (Google Docsヘリンク) スライドを直接開く

    第12回:Minimによる音響の視覚化、FFTによる音響解析と可視化
  • 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を接続する
    animist
    animist 2014/09/20
    hile (Serial.available() <= 0) {     // 初期化用の文字列     Serial.println("0,0");     delay(300);   }
  • 第11回:openFrameworks – OpenGLによる3Dグラフィクス

    openFrameworksは図形の描画のためのライブラリとしてOpenGLというプログラミングのインターフェイスを使用しています。OpenGLは2次元の図形だけでなく、3次元のグラフィクスを簡単に扱うことが可能です。今回は、openFrameworksの3Dグラフィックスの部分に注目して、様々な機能を実践します。 サンプルファイルのダウンロード (Google Docsにリンク) スライドを直接開く

    第11回:openFrameworks – OpenGLによる3Dグラフィクス
  • openFrameworksのアドオンを作ろう!

    このテキストは、ofxAddonsのサイトで紹介されている「make your own! (あなた自身のアドオンを作ろう!)」という文書を非公式に翻訳したものです。翻訳の誤りや不明な点があれば、指摘してください。 openFrameworksのアドオン(addons)って何? アドオンとは、oepnFrameworksの機能を何らかの方法で拡張するコードです。アドオンを作る理由は2つあります。 外部ライブラリやフレームワークを、openFrameworksに適用して簡単に統合させることができる。例: KinectコントローラーをopenFrameworksで使用するためのofxKinectや、MIDIコマンドを送受信するためのofxMidiなど。 自分自身または他のopenFrameworksのプログラマーにとって、複雑な作業を単純化できる。例: julapyによるofxQuadWarpや

    openFrameworksのアドオンを作ろう!
  • openFrameworksで、オブジェクト指向プログラミング(OOP) 後編

    オブジェクトの生成とメモリ openFrameworksの入門の授業の際に、変数を定義するということは、値を入れる「箱」のようなものを用意することだと説明しました。また、前回の授業では、オブジェクトを実体化するにはまずクラスをインスタンス化する必要があるという説明をしました。 実はクラスのインスタンス化と、変数の宣言は質的には同じことをしています。それは、「値や動作を表現するための記憶域を確保する」ということです。int型やfloat型などの宣言に関しても、型からオブジェクトを生成しています。 コンピュータの中では、個々の箱は独立して存在するのではなく、コンピュータに内蔵された広大な記憶領域の中の一部分を使用しています。多くのオブジェクトがこの記憶域を共有して雑居しています。そのため、個々のオブジェクトの格納されている「場所」を表す必要が出てきます。コンピュータではこのオブジェクトが格納

    openFrameworksで、オブジェクト指向プログラミング(OOP) 後編
  • openFramewrorks – addonを使う 2:reacTIVision + ofxTUIO でタンジブルなインタフェイスを作る

    openFramewrorks – addonを使う 2:reacTIVision + ofxTUIO でタンジブルなインタフェイスを作る reacTIVisionとは? 今日の授業では、reacTIVisionを使用してインタラクティブなアプリケーションを作成してみようと思います。 reacTIVisionとは、タンジブル(Tangible)なユーザインタフェイスを実現するための、オープンソースのツールキットです。タンジブルとは、形のない情報に直接触れることが出来るようなインターフェイスのことです。reacTIVisionは、このタンジブルな環境を実現するために、専用のマーカーを使用して複数のポイントの位置と角度を、素早く認識し解析することができます。 reacTIVisionを応用した有名な作品として、Reactableが挙げられます。Reactableは、テーブルの上に物理的にオブジ

    openFramewrorks – addonを使う 2:reacTIVision + ofxTUIO でタンジブルなインタフェイスを作る
  • 1