Processing lesson(4) アニメーション

Learning Objectives

• Processingのアニメーションの方法について理解し、動く絵を作ってみる
• “オリジナルの時計"を作ってみる

Processingとアニメーション

Keyword: draw(), frameCount

講義

• ゼロから学ぶプログラミング・ビジュアルアート「アニメーション」

• Processingのブロックについて

  void setup(){ // setup()ブロックは、最初に1度だけ実行される }

  void draw(){ // draw()ブロックは、繰り返し何度も実行される(1秒間に60回） }

draw()ブロックの中に繰り返し何度も実行する処理を書くことでアニメーションを作ることができる。

ではdraw()ブロックの中の書き方は？

例1〜4をそれぞれ実行してみよう。動きは違う？プログラムはどこが違う?

例１

void setup() {
　　　　size(600, 600);
　　　　strokeWeight(2);
　　　　fill(255, 200, 100);
}

void draw() {
　　　　background(255, 255, 255);
　　　　ellipse(300, 300, 50, 50);
}

---

例２

void setup() {
　　　　size(600, 600);
　　　　strokeWeight(2);
　　　　fill(255, 200, 100);
}

void draw() {
　　　　background(255, 255, 255);
　　　　ellipse(mouseX, 300, 50, 50);
}

---

例３

void setup() {
    size(600, 600);
    strokeWeight(2);
    fill(255, 200, 100);
}

void draw() {
    background(255, 255, 255);
    ellipse(frameCount, 300, 50, 50);
}

---

例４

void setup() {
    size(600, 600);
    strokeWeight(2);
    fill(255, 200, 100);
}

void draw() {
    background(255, 255, 255);
    ellipse(second()*10, 300, 50, 50);
}

---

(かんたんな)説明

• mouseX: マウスのX座標
• frameCount: draw()が繰り返される都度、1ずつ増える
• second(): 秒数を表す
• background(255, 255, 255): 背景を白く塗りつぶす

詳細は　ゼロから学ぶプログラミング・ビジュアルアート「アニメーション」

自分で書き換えてみよう

• background()を書かないとどうなる？
• mouseX, mouseYを図形の座標の逆に使うと？
• frameCountを図形の大きさの値に使うと？
• second()に掛け算している係数を換えると？

---

時間が経つと変わる絵

時・分・秒に合わせて円が大きくなる時計

clock_simple6.pde

void setup(){
　　　　size(600, 400);
　　　　textSize(100);
}
void draw(){
　　　　// 秒数を変数に入れる
　　　　int s = second();
　　　　// 分数を変数に入れる
　　　　int m = minute();
　　　　// 時間を変数に入れる
　　　　int h = hour();

　　　　noFill();
　　　　// 都度、背景を消す（白く塗る)
　　　　background(255,255,255);

　　　　// 赤で時間の円を描く
　　　　stroke(237, 133, 72);
    ellipse(150, 200, h12.5, h12.5);
    // 黄で分の円を描く
    stroke(245, 210, 5);
    ellipse(300, 200, m5, m5);
    // 青で秒の円を描く
    stroke(60, 60, 200);
    ellipse(450, 200, s5, s5);

    // 赤で時間の数字を描く（２桁）
    fill(237, 143, 82);
    text(nf(h,2), 100, 250);
    // 黄で分の数字を描く（２桁）
    fill(245, 220, 20);
    text(nf(m,2), 250, 250);
    // 青で秒の数字を描く（２桁）
    fill(60, 65, 205);
    text(nf(s,2), 400, 250);
}

---

オリジナルの時計を作ってみよう

関数	意味	現在が12時3分45びょうの場合
hour()	現在の時間	12
minute()	現在の分	3
second()	現在の秒数	45
mills()	プログラムが始まってから経過したミリ秒	（時刻を表す値ではなく、経過したミリ秒を表す)

時間・時刻に関する情報を取得するProcessingの関数

時計の例①. 分・秒の単位に動かす (時刻を色に反映)

joho_06_clock_simple1.pde

void setup() {
    size(700, 700);
}

void draw(){
    fill(hour()*10,minute()*4,second()*4,128); // 時刻を色に反映 

    //秒単位にX軸方、分単位にY軸方向に動かしながら50x50pxの四角を書く 
    rect(second()*10+10, minute() *10+10, 50, 50);
}

---

時計の例②: 分・秒の単位に動かす (frameCountを色に反映)

joho_06_clock_simple2.pde

void setup() {
    size(700, 700);
}

void draw(){
　　　　// frameCountを色に反映
　　　　fill(frameCount%256, minute()*4, second()*4, 128);

　　　　//秒単位にX軸方、分単位にY軸方向に動かしながら50x50pxの四角を書く
　　　　rect(second()*10+10, minute() *10+10, 50, 50);
}

---

時計の例③. 分・秒の単位に動かす (マウス位置を色に反映)

joho_06_clock_simple3.pde

void setup() {
    size(700, 700);
}

void draw(){
    fill(mouseX, mouseY, second()*4, 128); //マウス位置を色に反映
    //秒単位にX軸方、分単位にY軸方向に動かしながら50x50pxの四角を書く
　　　　rect(second()*10+10, minute() *10+10, 50, 50);
}

---

時計の例④. 顔が動く時計

joho_06_clock

void setup() {
    // set canvas to 600px x 600px
    size(600, 600);
    // set background color to (R:194, G:251, B:252);
    background(194, 251, 252);
    // set color of shape to (R:252, G:236, B:201)
    fill(252, 236, 201);
    // draw elllipse(x, y, width, height)
    ellipse(300, 300, 500, 500);
    // set color of shape to R:240, G:124, B:247, opacity:150)
    int hair_x = 100;
    fill(155, 85, 39, 150); 
    for (int i = 0; i<12; i++){
        rect(hair_x, 50, 100, 100);
        rect(hair_x+25, 75, 100, 100);
        i = i + 1;
        hair_x = hair_x + 50;
    }
    fill(250, 250, 250); 
    noStroke();
    // draw ellipse(x at center of ellipse, y at center of ellipse, width, height)
    ellipse(325, 250, 150, 100);
    ellipse(125, 250, 150, 100);
    fill(30, 100, 30);
    stroke(30, 100, 30);
    strokeWeight(8);
    line(100, 250, 150, 250);
    line(300, 250, 350, 250);
    fill(240, 200, 180);
    stroke(220, 160, 120);
    strokeWeight(5);
    // draw triangle(x1, y1, x2, y2, x3, y3);
    triangle(150, 350, 250, 400, 300, 325);
    stroke(255, 100, 100);
    strokeWeight(10);
    noFill();
    curve(200, 100, 150, 450, 450, 450, 550, 100);
}

int hair_y = 75;
void draw(){
    fill(250, 250, 250);
    noStroke();
    // draw ellipse(x at center of ellipse, y at center of ellipse, width, height)
    ellipse(125, 250, 150, 100);
    ellipse(325, 250, 150, 100);
    if (second() %2==1){
        noStroke();
        ellipse(125, 250, 150, 100);
        stroke(30, 100, 30);
        strokeWeight(8);
        line(300, 250, 350, 250); strokeWeight(1);
        fill(155, 85, 39, 5);
        rect(450, second()*5+50, 100, 100);
        rect(475, second()*5+75, 100, 100);
    } else if (second() % 2 ==0){
        stroke(30, 100, 30); strokeWeight(8);
        line(100, 250, 150, 250); noStroke();
        ellipse(325, 250, 150, 100);
    }
    stroke(255, 100, 100);
    strokeWeight(10);
    noFill();
    curve(second()10, second()10-100, 150, 450, 450, 450, 550, 100);
}

(あまり参考になりませんが) 秒ごとにウィンクし、少しずつ笑い、髪が伸びていく時計…

提出方法

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

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

• 実行結果の画像のスクリーンショット（動画が撮影できる場合は動画も可）
  　Processingのプログラムで “ツール” > “ムービーメイカー” .

• アニメーションGIFも作れます。作り方は声をかけてください。

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

• art_28XX_name.pde (Processingのプログラムファイル)

• art_28XX_name.png (実行結果の画像）

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

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

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

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

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

---

Ref:

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