【Processing】void drawを使う理由と使い方【図形が動くようになるのは楽しい】

  • URLをコピーしました!
ワタタク

今回の記事の課題は、void drawの使う理由と使い方を調べてまとめること。

記事内のProcessingのバージョンは4.3。

動きのある画像は、コードではなく、GIF画像編集で無限再生されるようにしています。

目次

【Processing】void drawについて

void draw() を使うと、動きのある表現ができるようになります。

英語の意味:void ない draw 描く

ワタタク

記事の最後になぜvoidという英単語を使うのかについて考えてみましたので参考にしてください。

【Processing】void drawを使う理由

  • 動きのある表現ができるようになる
  • コードが読みやすくなる
    • void drawの部分の表現を繰り返すということがはっきりと分かる
    • どこからでも使える変数(グローバル変数)も読みやすくなる

【Processing】void drawの使い方

1つのプログラムには1つのvoid drawのみ。

以下のように書きます。 

void draw() {
コード
}

ワタタク

{}の記号は、基本的にはパソコンのキーボードでEnterの左にあると思います。shiftを押しながらタイピングすることで、{}を入力できます。

【Processing】void drawを使って図形を動かす【動いた跡を残す・残さない方法】

図形の動いた跡を残す方法

float x = 0.0;

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

void draw() {
  ellipse(x, 500, 300, 300);
  x = x + 20;

}

図形の動いた跡を残さない方法

background()を、drawの中に書くと、図形の軌跡が残らなくなります。

float x = 0.0;

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

void draw() {
  background(255);
  ellipse(x, 500, 300, 300);
  x = x + 20;

}

【Processing】void drawで注意するべきエラー

void drawをつかうとき、void setupと一緒に使わないとエラーになりました。

エラーになった書き方。

float x = 0.0;

size(1000, 1000);

void draw() {
  background(255);
  ellipse(x, 500, 300, 300);
  x = x + 20;

}

【Processing】void drawを使って背景色を変える

float x = 0.0;

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

void draw() {
  background(x + 0.1, x + 0.1, 0);
  x = x + 20;
  ellipse(x, 500, 300, 300);
  ellipse(x - 200, 800, 100, 100);

}

なぜvoidという英単語を使っているのか考える

  • voidは英語の「ない」「からっぽの」という意味
  • 何がないのか→戻り値(返し値)がない。→実行結果がないとも言いかえることができる
  • 疑問が浮かぶ。下の「コード1」を実行したらvoid drawの部分のellipse(x, 500, 300, 300);の楕円が実行結果として表示されるのではないか?実行結果が表示されるのに、なぜvoidと書くのか?
  • 図形を表示・描画するという扱いになり、戻り値が必要ないのでvoidと書く(詳しくは「戻り値が必要ないとは?という記事」を参考にしてください。)

コード1

float x = 0.0;

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

void draw() {
  ellipse(x, 500, 300, 300);
  x = x + 20;

}

次はvoid setup()について学ぶと理解しやすい

関連記事:【Processing】void setupについてと使い方【見やすくなる】

ワタタク(Watataku)
クリエイティブコーダー/アーティスト
AIと共に、「人の心に寄り添う、機能するアート」を探究しています。

ここは、その思索と創造の全記録を記す、思考の実験室(アトリエ)です。

僕の創作の源泉は、人生経験そのものです。
不当な出来事や、精神的な支配の中で、私の心は何度も粉々に砕け散りました。しかし、その一つ一つの破片をどのようにすれば鮮やかな絵の具にできるかを考え、ゆっくり心のパレットに色を整えていきました。その、長い、長い、自身との対話の果てに「人の役に立つアートを作りたい」という考え方にたどり着きました。

かつて、僕の武器は、アコースティックギター弾き語りと、カメラでした。
オリジナルソングの演奏でお客様投票1位となった「物語の力」。
世界20カ国の旅で培った、多様な「視点」。

今、僕は、それら全ての経験を、「コード」という、新しい言語で、世界に問いかけています。

このブログでは、作品の制作過程や、日々の発見、そして、僕自身の上達の軌跡を記録していきます。

僕の旅が、あなたの日常を、ほんの少しでも豊かにするための、光になることを願って。

クリエイティブコーディングロード運営者 ワタタク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次