Processingによるメディアアート製作記録2 画像を取り込む【プログラミング】

メディアアート超入門記録

少し間があいてしまいましたが、
前回「【メディアアート超入門】Processingによるメディアアート製作記録」の2回目です。

ここからは具体的にビジュアルプログラミングProcessingを使った作品作成の過程を紹介していきたいと思います。

■そもそもProcessingって?
Processingは「Java」と呼ばれるプログラミング言語をベースに開発されたオープンソースのプログラミング言語です。
グラフィック機能に特化することでデジタルアートやビジュアルデザインでよく使われています。
Processing自体は以下のサイトから無料でダウンロード・利用することができます。
https://processing.org/download/
■実際の使用画面
以下がProcessingの起動した画面です。
【メディアアート超入門】processingによる表現作品作成記2-1
ここにどういったビジュアルを描きたいのかの指令を描いて実行をすると下の様な結果が表示されます。
【メディアアート超入門】processingによる表現作品作成記2-2

はじめに描画するキャンパスのサイズや線うや図形の色、太さを決めます。
そこに画面の半分の位置(画面の中心)に半径250のellipse(円)と画面の中心から100離れたところに始点と終点がある線を描くという
プログラムです。(プログラムをやったことない人は難しく考えずそういうものかなー程度で見ていただいて大丈夫です)
このような命令をスケッチと呼ばれる白い画面に書いていくことで、様々な図形や文字を出力することができます。
繰り返しを使うことで動画やウェブカメラを使ったビジュアル表現を簡単に(?)つくることができるのです。
■プログラムを描いてみる
①文字を書いてみる

【メディアアート超入門】processingによる表現作品作成記2-3

size(300,300);//画面のサイズ
text(“トーキョー建築トリップ”, 150, 150);//文字の内容,中心のX座標,中心のY座標
これで300ピクセル×300ピクセルの画面の中心(150ピクセルの場所)に文字が書かれます。
指定した位置は文字の左端になるようです。
ちょっと改造して文字が表示される位置をランダムにしてみます。

【メディアアート超入門】processingによる表現作品作成記2-4

size(300,300);//画面のサイズ
text(“トーキョー建築トリップ”, random(300), random(300));//文字の内容,中心のX座標,中心のY座標
「random(300)」は300以内の数字でランダムな数字を出力するProcessingの関数です。
これで一回だけですが、実行するたびにランダムな位置に文字を描きだすプログラムが完成しました。
②画像を取り込んでみる

【メディアアート超入門】processingによる表現作品作成記2-5

size(300, 300);
myPhoto = loadImage(“yamakenlab.jpg”); //画像を読み込み
これで画像が取り込めます。(実家の猫です)
これもちょっと改造して、画像のカーソルを合わせた位置の色情報を取得して画面の左上の四角形に描画するようにしてみます。

【メディアアート超入門】processingによる表現作品作成記2-6

これでも20行ほどのコードでできてしまいます。
少し長くなったので今回はこれでおしまいにします。
次回(少々お待ち下さい)は実際の作品をもとに製作過程をアップしたいと思います。

■ログ
【メディアアート超入門】Processingによるメディアアート製作記録(第1回)
【メディアアート超入門】によるメディアアート製作記録(第3回):少々お待ち下さい

コメント

タイトルとURLをコピーしました