FrontPage

杉本が担当したワークショップについての資料です

Processingでプログラミング(画像編)

Processingではjpeg等の画像ファイルをプログラム中に読み込み、個別の画素毎に色の情報を読み取り、加工することができます。プログラミングの中でも基本となるforとifを使って画像を加工してみようというのが本ワークショップの目標です。

「プログラミングを学ぶ」のではなく「プログラミングで学ぶ」を狙ったワークショップであることにご留意ください。

Processingとは

Javaをベースにして、非プログラマでもプログラミングしやすいように単純化を行い、グラフィックに特化した言語および総合開発環境。この総合開発環境はスケッチブックと呼ばれ、ここで作成されたプログラムはスケッチと呼ばれています。

ダウンロード

公式サイト(英語)からダウンロードできます。

Download Processingというリンクからダウンロードページヘ移動します。移動先のページでは寄付を求められる(Donate & Download)が、寄付はしなくともダウンロード可能です。No Donationを選択するとダウンロードのためのリンクが表示されます。

ダウンロード先ではバージョンを選びます。最新版はバージョン3となっていますが、仕様が若干変更になっており、古いスケッチだとそのままでは動作しない場合があります。今回は下にあるStable Releases(安定版リリース)にある2.2.1を利用しています。

起動とスケッチの実行

公式サイトからダウンロードした状態のprocessingは圧縮ファイルになっています。ファイルを展開し、processing.exeを実行することで新規のスケッチブックを起動します。インストール作業が必要ないので管理者でなくともprocessingを利用し始めることができるのが良いところです。

コードを書いたらウインドウ上部にある実行ボタンをクリックすることでスケッチを実行しましょう。

基本的なこと

実行画面のサイズ指定

これを行わないとごく小さなウインドウが自動生成されます。通常はスケッチ冒頭でこの実行ウインドウの大きさを指定しておきます。

 size(500,500);

色の指定

processingはグラフィックに特化しています。他の言語ではなかなか見られない特徴の一つに色を代入できるような変数が用意されていることが挙げられます。この変数はcolorという型で宣言することになっています。 色の指定は0〜255だと8ビットグレイスケールとなります。カラーで指定したい場合はカラーコードを使うかRGBのそれぞれに対応する3つの0〜255をカンマで区切ってください。

 color c;
 c=color(255,0,128);
 c=color(#C0FFEE);

この色の代入された変数から、RGBの3原色の値を取り出すことができます。red(c)という命令では変数cに代入された色の情報から赤の強さを返します。同様にgreen(c)とblue(c)が用意されています。

画像の読み込み

サンプルスケッチkeiを開きます。このスケッチでは画像ファイルをスケッチに読み込み、画面に表示します。

読み込んだ画像を入れておくための変数imgを宣言しています。これもprocessing特有の仕様で、PImageという型で宣言しています。

imageという命令で画面に表示しています。imageの引数を変えてみると表示される画像に変化が現れます。最初の2つの値は画像をウインドウのどこに配置するかを、次の2つの値は画像のサイズを表しています。ウインドウ上の原点は左上の点です。

tintという命令で画像の色味を変化させることができます。元々の明るさを255とし、tintで指定した値に応じて明るさを下げるはたらきがあります。例えばtint(128,255,255)とすると、赤の成分だけ50%にする、ということです。

モザイク加工

サンプルスケッチkei2を開きます。このスケッチでは先ほどの画像を1辺が10ピクセルのモザイク画像に加工しています。このスケッチでも加工後の画像を書き出しています。

loadPixels()という命令で開いた画像データを画素ごとに分解し、色の情報をpixels[]という名前の配列に格納しています。一定間隔で選んだ画素の色を使って長方形に色を塗り配置することでモザイク加工にしているのです。

一定の間隔で画素の色を調べるためにfor文を使いました。配列は1次元ですが、画像の縦横を意識しながらデータにアクセスするためにfor文は二重ループになっています。二重ループにしないアルゴリズムも考えられるので、余裕のある方にはチャレンジしてみてください。

二重ループはプログラミング初級者にとってはハードルが高い題材ですが、授業でも扱わねばならないレベルですので身につけておきたいスキルですね。現在の教育課程の教科書でも並べ替えのアルゴリズムで二重ループが出てきます。

それではモザイクの大きさを変更してみましょう。

色の変更

サンプルスケッチkei3を開きます。このスケッチではピクセルごとの色を条件によって変更しています。

ソースを読んでどの色をどの色で置き換えているか考えてください。 条件によって色を変えるためにif文が使われています。色の値から原色の値を取り出すためにはred(),green(),blue()を使います。

理解できたら赤い旗を緑色に変更してみましょう。これは色の性質をよく理解していないとかなり難しいと思います。


添付ファイル: filekei.zip 114件 [詳細] file旗を緑にする答.txt 116件 [詳細] filekei3.zip 101件 [詳細] filekei2.zip 94件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-11-09 (水) 17:09:26 (1105d)