今回からいよいよSonic Piを使用してライブコーディングによるサウンドプログラミングを始めていきます。まず始めにライブコーディングとは何なのか「ライブ」という言葉の意味に着目してその歴史と特徴について解説します。後半は実際にSonic Piを使用して短いメロディーをループさせるところまでを目標にします。 スライド資料 ライブコーディングとは? Sonic Pi入門
ライブコーディングとは? Sonic Pi入門
今回からいよいよSonic Piを使用してライブコーディングによるサウンドプログラミングを始めていきます。まず始めにライブコーディングとは何なのか「ライブ」という言葉の意味に着目してその歴史と特徴について解説します。後半は実際にSonic Piを使用して短いメロディーをループさせるところまでを目標にします。 スライド資料 ライブコーディングとは? Sonic Pi入門
第11回: p5.js – ライブコーディング、ReCodeプロジェクト
前回に引き続きp5.jsについて取り上げます。p5.jsはWebブラウザー上で動作します。ですので、Webブラウザー上にテキストエディターの機能を加えることで編集と実行環境をオンラインで実現可能です。さらに、編集中のコードを自動的に読み込んで実行することで、コードを実行しながら編集を行うという「ライブコーディング (Live Coding)」が可能となります。オンラインで公開されているp5.jsのWebエディターでこの機能が実現されています。 p5.js Web Editor 今回は、このp5.jsライブコーディングの機能に着目して、その可能性を探っていきます。また、関連するプロジェクトとして過去のコンピューターアートの名作をProcessingで再現するReCode Projectについて紹介します。 SFPC short time lapse from poohlaga on Vime
第12回: Beyond Processing – 次のステップへ！
この講義ではProcessingを使用してクリエイティブ・コーディングの基礎を学んできました。今回は、これまでのまとめと、ここから先へ進むためのステップについて解説します。 Processingの基礎を身に付けてから次に進む様々な手段がありますが、ここでは次の2つの方法を紹介します。 さらに高速化を追い求める – openFrameworks ノードベースのビジュアルプログラミング – TouchDesigner openFrameworksは、クリエイティブコーディングのためのC++のオープンソースツールキットです。その最大の利点はスピードです。Processingでは処理が追いつかずコマ落ちしてしまうような表現も高速な演算で実現可能です。より本格的な作品制作を目指す方にはProcessingを習得した後、openFrameworksにステップアップすることをお勧めします。openFra
第12回: 音響と映像の融合 – Processingで音を可視化する 1
この講義では、前半にProcessingを使用したインタラクティブなアニメーションの基本、後半はSonic Piを使用したサウンドプログラミングを行ってきました。今回はいよいよこの両者を融合して、音と映像を同時に用いた表現に挑戦していきたいと思います。 まず始めにProcessingを用いて音を視覚化する方法を検討します。単純に感覚的手法で視覚化するのではなく、音を周波数成分に分解しその変化を視覚的に表現します。ここでは、FFT（高速フーリエ変換）という手法を用います。 次に、この視覚化の手法を用いて、Sonic Piで作成してレコーディングした音をProcessingで読み込み、視覚化する方法について解説します。サウンドの解析には、Processingのコアライブラリである、Soundライブラリーを使用します。 スライド資料 第12回: 音響と映像の融合 – Processingで音を可
第9回 : OpenCV for Processing コンピュータ・ビジョン、映像を使ったインタラクション
第9回 : OpenCV for Processing コンピュータ・ビジョン、映像を使ったインタラクション Processingを使用してインタラクティブな機能を実現するための手段は、センサーを使う方法や、KinectやLeap Motionなどのデバイスを使用する方法などいろいろ考えられます。今回は、最もシンプルな機材構成で可能な方法として、カメラの映像を解析してそこから動きや物体の輪郭を取り出す手法について取り上げます。 コンピュータで、映像から実世界の情報を取得して認識するための研究で「コンピュータ・ビジョン (Conputer Vision)」という分野が存在します。わかりやすく言うなら「ロボットの目」をつくるような研究です。このコンピュータ・ビジョンの様々な成果をオープンソースで公開しているOpenCVというライブラリーがあります。今回は、このOpenCVをProcessing
驚きの体験と「メディアアート」
先日オープンしたteamLabの新しい「デジタルアートミュージアム」の内覧会にお邪魔してきた。 帰宅してすぐに以下のTweetをした。 teamlabの展示、とにかく規模と物量と完成度に圧倒された。おそらくメディアアート業界ではこれから安易に批判されるんだろうと思う。しかしこの完成度と規模で作品を完成したのを観た後で、じゃあお前は何が出来るんだと問われているように思った。 — 田所 淳 (@tadokoro) June 13, 2018 今となっては、「安易に批判」というあたりはちょっと挑発的過ぎたと反省しているのだけれど、圧倒的な規模と完成度に正直感動してしまった部分は今でも変わりない。 そして、予想した通り議論を巻き起こした。永松歩さんがとても素晴しいまとめをしているのでリンクする。 批評とTeamLab 個人的な観測範囲だと、teamLabに批判的な方々の意見は以下のようなものが見受
デザイン言語総合講座 – クリエイティブ・コーディング
2000年代に入って「クリエイティブ・コーディング」と呼ばれる、アート、デザイン、建築など、いわゆる「クリエイティブ(創造的)」な作品制作のためのプログラミング環境が登場し注目されるようになりました。この講座では、このクリエイティブ・コーディングの成り立ちを紹介し、さらに将来の展望を考えます。
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
プロジェクション・マッピング基礎練
今年の多摩美のopenFrameworksの授業(Media art II)では、プロジェクション・マッピングをとりあげていこうという方針になった。ところが、実は今まで知識としてはプロジェクション・マッピングについて知っていても、自分でゴリゴリとプログラムを書いてこなかった。主な理由としては、身近にプロジェクションしながら試す環境が無いというのが大きい。これではいかんということで、奮発して小型プロジェクターを購入してみた。 TwitterとFacebookでおすすめの小型プロジェクターを募ったところ、複数の方からQUMI Q5が良いという評判が寄せられた。それではということで、amazonで購入。あわせて、SLIKのミニ三脚も買ってみた。 数日で届いたので早速試してみたところ、期待していた以上に明るい。そして小さくて軽い。評判が良いだけあると実感。手元にあったNexus 7と大きさを比較し
openFrameworksで、Leap Motionを使ってみた!
待ちに待ったLeap Motionがようやく届いたので、ちょびっとだけ触ってみた。 インストールとセットアップはとにかく簡単。Leap Motionのセットアップページに行って、一式ダウンロードとインストールするだけで、すぐに動作する。デモアプリの完成度もなかなかのもの。ユーザーにストレスを感じさせない環境構築までのナビゲーションのスムーズさに唸らされる。 ひと通り遊んだところで、openFrameworksからLeap Motionを使ってみることに。そのものズバリなofxLeapMotionというアドオンが開発されているので、それをそのまま利用できる。ただし、いくつかバージョンがありいくつか試した中で下記のリポジトリのバージョンが問題なくビルドできて、Leap Motionからのメッセージも受信できた。 https://github.com/jasonrwalters/ofxLeapM
「Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド」いよいよ発売!!
「Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド」いよいよ発売!! Amazon書籍情報ページ BNN新社書籍情報ページ 「Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド」がいよいよ発売になりました! 店頭にも並び始めたようです。 今回はサブタイトルに「クリエイティブ・コーディングのためのopenFrameworks実践ガイド」とあるように、現場の第一線で活躍するクリエイターの方々に、すばらしい原稿を寄稿いただきました。前回に引き続き、久保田晃弘さん始め、openFrameworks開発陣からはZach Liebermanさん、Memo Atkenさん、Kyle McDonaldさんのインタビュー、Rhizomaticsの真鍋大
![「Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド」いよいよ発売!!](https://cdn-ak-scissors.b.st-hatena.com/image/square/16a12886f2e8a3818b82c3d43268abf1fd95190c/height=288;version=1;width=512/http%3A%2F%2Ffarm8.staticflickr.com%2F7339%2F9148020906_07f1633a38_z.jpg)
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）
第６回：openFrameworks 外部ファイルを利用する – 画像と動画
openFrameworksでは、様々なフォーマットのビットマップ画像(Jpeg, GIF, PNGなど)や、動画(mp4、movなど)を簡単にプログラムに読み込んで表示することが可能です。さらに、読み込んだ画像や動画のデータは、ピクセル単位でその情報を取得することができます。今回は、画像データと動画データを活用して、そのデータを利用したり加工・改変して、様々な表現を試していきたいと思います。 また、後半には、画像データをわざと破壊することで発生する、その画像フォーマット特有のノイズ(= glitch)を活用した表現を紹介します。 サンプルファイルのダウンロード (Google Docsにリンク)
第８回：openFrameworks addonを利用する3：フェイストラッキング – ofxCv, ofxFaceTracker
第８回：openFrameworks addonを利用する3：フェイストラッキング – ofxCv, ofxFaceTracker Addons紹介シリーズの3回目の今回は、最近ちょっとしたブームになっている、フェイストラッキングの技術を使っていろいろ実験していきます。フェイストラッキングとは、カメラから入力した映像の中から人間の顔を検知して、その傾きや大きさ、さらには目や鼻、口、眉といった顔のそれぞれのパーツの位置や大きさを立体的に検知することのできる、画像解析の技術です。この技術を利用して、顔の表情でプログラムをコントロールしたり、自分の顔に他人の顔を合成したりと様々な応用が可能となります。今回は、このフェイストラッキングに必要な環境設定とビルドの方法を解説した上で、その応用方法について考えていきます。 授業内で紹介した全てのサンプルプログラムは下記からダウンロードすることができます。
第１回：ガイダンス
今回は、初回ということで、この講義ではなにを取り扱うのか、ガイダンスを行います。 昨年度までは、この講義ではAdobe Flashを用いたインタラクティブなアニメーション表現を主に取り扱ってきましたが、今年度からは内容を一新したいと思います。 以前までは、Webブラウザ上でインタラクティブな表現を行う手段は、ほぼFlashで寡占されている状態でした。しかし、最近になってHTML5と、それに付随するJavaScriptやCSS3などの新たな技術によって、Flashに代表されるようなプラグインを用いるのではなく、Webブラウザ自身の機能で高度な表現か可能となりつつあります。 初回の授業では、このHTML5とは一体なんなのかを、主な機能を概観しながら解説していきます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tumblrを使う4 – Webサイトを構成する、固定ページとタグ
クリエイティブ・ミュージック・コーディング
プログラム初級講座 – メディア芸術をはじめよう
Tumblrを使う３ カスタムHTMLテーマの作成