Processing lesson(2) 入出力装置の操作

Learning Objectives

• 入力装置（マウス）や出力装置（画面）をプログラムから操作する

Unit07-2の課題①

• “Processing でゼロから学ぶビジュアルアート“の”マウスに反応させる“のページを読み、記載されているプログラムを(少し自分なりに変更しながら)実行してみる
• 学んだ内容を組み合わせて「オリジナルのペンツール」のプログラムを作成する。

提出方法

• 以下の作成物（プログラムファイル、画像のスクリーンショット）をOnederiveに提出してください

• Processingのプログラムファイル

• 実行結果（作ったペンで自分で描いた絵)の画像のスクリーンショット

  • ファイルには、出席番号、氏名が分かるように名前をつける

• 28XX_xx太郎_unit7-2_pentool.pde (Processingのプログラムファイル)

• 28XX_xx太郎_unit7-2-drawing.png (実行結果の画像）

  • 提出先 Onedrive(学校のOffice 365ログインが必要です）

  • Processingのプログラムは"Sketch"と言います。Sketchの配置場所は、“Processing” > “環境設定” > “Sketchの場所” に記載がありますので、その場所を見つけて、アップロードしてください。

  • スクリーンショットの撮り方

• Windows の場合 : 実行結果の画面をアクティブにして、“Alt”+“Print Screen(PrtScn)"。コピーされた画像を、“Paint"ツールなどを使って保存する。

• Macの場合: ”Command”+“Shift”+“4” で、範囲を選択（デスクトップにpng形式で画像が保存される)

コンピュータとプログラム

---

“マウスに反応させる"プログラム例

マウスボタンを押したとき - mounsePressed()

mousePressed.pde

// 最初に1回だけ実行されるブロック
void setup() {
    size(600, 600);
    background(255, 255, 255);
}

// マウスボタンを押したときに実行されるブロック
void mousePressed() {
    // カーソル位置に直径100pxの円を描く
    ellipse(mouseX, mouseY, 100, 100);
}

// mousePressed()が動くためには draw()を書く必要がある
 void draw() {
}

---

マウスを動かしたとき - mouseMoved()

mouseMoved.pde

// 最初に1回だけ実行されるブロック
void setup() {
    size(600, 600);
    background(255, 255, 255);
}

// マウスボタンが動いた時に実行されるブロック
void mouseMoved() {
    // カーソル位置に、色(246, 76, 50)で直径5pxの円を描く
    fill(246, 76, 50);
    noStroke();
    ellipse(mouseX, mouseY, 5, 5);
}

// mouseMoved()が動くためには draw()を書く必要がある
void draw() {
}

mouseMoved()では、マウスを動かすだけで描画される

---

マウスをドラッグしているとき - mouseDragged()

mouseDragged.pde

// 最初に1回だけ実行されるブロック
void setup() {
    size(600, 600);
    background(255, 255, 255);
}

// マウスボタンをドラッグした時だけ時に実行されるブロック
void mouseDragged() {
    // カーソル位置に、青色(50, 67, 245)で幅10px, 高さ20pxの長方形を描く
    fill(50, 67, 245);
    noStroke();
    rect(mouseX, mouseY, 10, 20);
}

// mousePressed()が動くためには draw()を書く必要がある
void draw() {
}

図形描画時に、x, yを指定し、サイズは数値（rect(mouseX, mouseY, 10, 20)）にすると、
素早くマウスを動かすと途切れるペンになる。

---

マウスをドラッグ (途切れないペン）

mouseDragged.pde

// 最初に1回だけ実行されるブロック
void setup() {
　　　　size(600, 600);
　　　　background(255, 255, 255);
}

// マウスボタンをドラッグした時だけ時に実行されるブロック
void mouseDragged() {
　　　　// カーソル位置に、青色(50, 67, 245)で幅10px, 高さ20pxの長方形を描く
　　　　// lineの色はstroke()で指定する
　　　　stroke(50, 67, 245);
　　　　line(pmouseX, pmouseY, mouseX, mouseY);
}

// mousePressed()が動くためには draw()を書く必要がある
void draw() {
}

図形描画時に、“１つ前のマウス位置"を使う（line(pmouseX, pmouseY, mouseX, mouseY)と、素早くマウスを動かしても線が途切れない。

---

マウスをドラッグ ＋ 計算処理

multiColorPen.pde

// 最初に1回だけ実行されるブロック
void setup() {
　　　　size(600, 600);
　　　　background(255, 255, 255);
}

// マウスボタンをドラッグした時だけ時に実行されるブロック
void mouseDragged() {
　　　　stroke(245, 67, 245);
　　　　line(pmouseX, pmouseY, mouseX, mouseY);　

　　　　// 少しずつ縦方向(Y軸)にずらして、別の色で線を書く
　　　　stroke(212, 100, 245);
　　　　line(pmouseX, pmouseY+5, mouseX, mouseY+5);
　　　　stroke(50, 245, 230);
　　　　line(pmouseX, pmouseY+10, mouseX, mouseY+10);
　　　　<code>stroke(50, 245, 230);</code>
　　　　line(pmouseX, pmouseY+15, mouseX, mouseY+15);
}

void draw() {
}

mouseDragged()の中に複数の線を書くと、重ね塗りのペンになる

---

自分だけのペンツール(全部入り)

mouseAll.pde

// 最初に1回だけ実行されるブロック
void setup() {
　　　　size(600, 600);
　　　　background(255, 255, 255);
}

// マウスボタンを押したときに実行されるブロック
void mousePressed() {
　　　　// カーソル位置に楕円を描く
　　　　fill(245, 163, 230);
　　　　ellipse(mouseX, mouseY, 30, 45);
}

// マウスボタンが動いた時に実行されるブロック
void mouseMoved() {
　　　　// カーソル位置に、色(246, 76, 50)で円を描く
　　　　fill(200, 200, 240);　
　　　　noStroke();
　　　　ellipse(mouseX, mouseY, 5, 5);
}

// マウスボタンをドラッグした時だけ時に実行されるブロック
void mouseDragged() {
　　　　stroke(245, 67, 245);
　　　　line(pmouseX, pmouseY, mouseX, mouseY);
　　　　// 少しずつ縦方向(Y軸)にずらして、別の色で線を書く　
　　　　stroke(212, 100, 245);
　　　　line(pmouseX, pmouseY+5, mouseX, mouseY+5);
　　　　stroke(50, 245, 230);
　　　　line(pmouseX, pmouseY+10, mouseX, mouseY+10);
}

void draw() {
}

mousePressed(), mouseMoved(), mouseDragged()を使ったペンツール。
ブドウに見える？

---

Ref:

• Processingでゼロから学ぶプログラミング・ビジュアルアート
• Processing 公式リファレンス