Processing初心者向けエクササイズ一覧※随時更新記事

最終更新日 2023/05/31

Processingはビジュアルアートとインタラクティブデザインの分野で広く使用されるプログラミング言語です。その直感的な文法とビジュアル重視のアプローチは、プログラミング初心者にとって理想的な学習ツールとなっています。この記事では、Processing初心者が段階的に文法をマスターすることができる課題を紹介します。エクササイズの中で使い方のわからない関数などに出会ったらリファレンスを参照してください。

Processing 公式Reference

1. 基本的な図形の描画

まずはProcessingの基本的な図形描画関数に慣れてみましょう。円 (ellipse())、四角 (rect())、線 (line())、三角形 (triangle()) 等の基本的な図形を描いてみてください。

半径が100pxの円を描いてください。
好きなサイズで三角形を描いてください。（正三角形、二等辺三角形、直角三角形など）
基本図形を使用して、自分でオリジナルなキャクターをデザインしてください。

2. 色の操作

fill() と stroke() 関数を使って、図形の塗りつぶし色と線の色を操作してみましょう。また、background() 関数を使ってキャンバスの背景色を変えてみてください。

四角形の辺の色、塗りつぶしの色を別々の色で指定してみてください。
自分で作ったオリジナルなキャラクターに色をつけてください。

3. 変数の使用

変数を使って図形の位置や色をコントロールする練習をしましょう。変数を宣言する方法と、それをどのように使用するかを学びます。

変数を用いて、徐々に大きくなる円を描いてください。
基本図形を用いてオリジナルなキャクターを描いてください。最初は値を直接決めて図形を描き、キャラクターが完成したら変数を定義して、大きさや位置を変更できるようにしてください。

4. マウスに反応するプログラム

マウスの位置に反応して図形が動くプログラムを作ってみましょう。mouseX と mouseY の2つの特殊な変数を利用します。

マウスの位置に円が描かれるプログラムを書いてください。過去に描かれた円が残るようにするプログラムと、常に現在のマウス位置だけ円が描かれるようにしてみてください。
画面の真ん中の点からマウスの位置に線が引かれるプログラムを書いてください。
マウスをクリックするとランダムな位置に、ランダムな色・サイズの四角形が描かれるプログラムを書いてください。

5. 条件文の利用

if 文を使って特定の条件下で図形の色や位置を変えるプログラムを作ります。これにより、プログラムが動的に反応する方法を学びます。

関係演算子の練習

score という変数があります。score が80以上なら「Passed」、それ未満なら「Failed」をコンソールに表示するプログラムを書いてください。
2つの変数 a と b があります。a が b より大きい場合は「a is greater than b」、a が b より小さい場合は「a is less than b」、a と b が等しい場合は「a is equal to b」をコンソールに表示するプログラムを書いてください。
ユーザーから年齢を入力してもらい、その年齢が18歳以上なら「You are an adult.」、それ未満なら「You are a minor.」を表示するプログラムを書いてください。
temperature という変数があります。temperature が0度未満なら「Freezing」、それ以上なら「Not Freezing」をコンソールに表示するプログラムを書いてください。
2つの変数 x と y があります。x と y が両方とも10以上であれば「Both numbers are greater than or equal to 10」をコンソールに表示するプログラムを書いてください。

論理式の練習

2つの変数 age と hasLicense があります。age が18歳以上かつ hasLicense がtrueであれば「You can drive」を、それ以外の場合は「You cannot drive」をコンソールに表示するプログラムを書いてください。
x と y という2つの変数があります。x または y のどちらかが10以上であれば「At least one number is greater than or equal to 10」をコンソールに表示するプログラムを書いてください。
day という変数があります。day が “Saturday” または “Sunday” の場合は「It’s a weekend!」を、それ以外の場合は「It’s a weekday」をコンソールに表示するプログラムを書いてください。
temperature と isRaining という2つの変数があります。temperature が20度以上で、かつ isRaining がfalseの場合、「Great weather for a walk!」を表示するプログラムを書いてください。
2つのブール変数 isLoggedIn と hasPaid があります。isLoggedIn がtrueで、hasPaid がfalseの場合、「Please complete your payment」を、isLoggedIn がtrueで hasPaid もtrueの場合は「Access granted」を、isLoggedIn がfalseの場合は「Please log in」をコンソールに表示するプログラムを書いてください。

条件文の練習

score という変数があります。score が90以上なら「A」、80以上なら「B」、70以上なら「C」、60以上なら「D」、それ未満なら「F」をコンソールに表示するプログラムを書いてください。
day という変数があります。day が “Monday” の場合は「It’s the start of the week.」、”Friday” の場合は「TGIF!」、”Saturday” または “Sunday” の場合は「It’s the weekend!」をコンソールに表示するプログラムを書いてください。それ以外の場合は「It’s a normal weekday」を表示します。
hour という変数があります。hour が0から11の間なら「Good morning」、12から17の間なら「Good afternoon」、18から23の間なら「Good evening」をコンソールに表示するプログラムを書いてください。
x と y という2つの変数があります。x と y の値に応じて、四象限（第一象限、第二象限、第三象限、第四象限）または原点または軸上に位置するかを判定し、コンソールに表示するプログラムを書いてください。
fruit という変数があります。fruit の値が “apple” なら「Red」、”banana” なら「Yellow」、”grape” なら「Purple」をコンソールに表示するプログラムを書いてください。それ以外の場合は「Unknown color」を表示します。

6. ループの利用

for ループを使って一連の同じ図形を描画する練習をしましょう。これにより、同じコードを何度も書かずに多くの図形を生成する方法を学びます。

7. 自分の関数を作成

特定のタスクを実行する自分だけの関数を作り、それをプログラムで呼び出す練習をしましょう。これにより、コードの再利用と整理の方法を学びます。

8. 色の深堀り

より深く色を操作する方法を学びます。グレースケールとRGB色を使って図形や背景に色を加えてみましょう。

9. アニメーションの作成

draw()関数を使って、動く図形を作る基本的なアニメーションを作ってみましょう。これにより、Processingが時間経過に応じてコードをどのように繰り返し実行するかを理解します。

10. インタラクティブな要素の追加

マウスクリックやキーボード入力など、ユーザーの入力に反応するインタラクティブな要素をプログラムに追加しましょう。これにより、よりリッチなユーザー体験を提供するアプリケーションを作る方法を学びます。