あなたは退屈に苦しんでいて、あなたの創造性を使うためにかゆみを感じています。あなたは何か、視覚的に印象的なもの、芸術的なものを作りたいと思っています。あるいは、プログラミングを学び、できるだけ早く何か印象的なものを作りたいと思うかもしれません。もしそうなら、処理言語が進むべき道です。

私がこれまで扱ってきたすべてのプログラミング言語の中で、Processingは間違いなく最も面白い言語の1つでした。これは単純な言語であり、習得、理解、使用が簡単ですが、非常に強力です。これは、コード行を使用して空のキャンバスにペイントしているようなものです。あなたの創造性を制限するための厳格な規則やガイドラインはありません。唯一の制限はあなたの想像力です。

大学では、高校生を集めて処理を教えるプログラムのティーチングアシスタントをしていました。それらのほとんどは、強力なプログラミングのバックグラウンドを持っていませんでした。一部のコードは、これまで1行も記述していませんでした。たった5日で、彼らは言語を学び、独自の簡単なゲームを作ることが期待されていました。成功率はほぼ100％で、失敗することはめったにありませんでした。この記事では、これがまさに私たちが行うことです。プログラム全体を2つの部分に縮小しました。最初の部分では、言語について話します。基本的な概要、処理のウォークスルー、およびいくつかのヒントとコツを紹介します。次に、次のパートでは、簡単なゲームをステップバイステップで作成します。各ステップについて詳しく説明します。また、ゲームのコードをに変換します JavaScript p5jsを使用して、ゲームをWebブラウザーで実行できるようにします。

あなたがすでに知っておくべきこと

これらの記事を理解して簡単に理解するには、プログラミングの基本については説明しないので、プログラミングの基本的な知識が必要です。ただし、高度なプログラミングの概念にはほとんど触れないので、表面的な理解で十分です。オブジェクト指向プログラミング（OOP）などの低レベルのアイデアや概念について話す部分がいくつかありますが、それらは重要ではありません。それらは、言語の構造に興味を持っている好奇心旺盛な読者のためのものです。知りたくない場合は、それらの部分をスキップできます。それ以外に、あなたが持っているべき唯一のものは、あなた自身のゲームを作成するためにこの素晴らしい言語と熱意を学ぶという野心です！

フォローする方法

私は常に、試行錯誤してプログラミングを学ぶことに賛成です。自分のゲームに飛び込むのが早ければ早いほど、Processingに慣れるのが早くなります。それが私の最初の提案になるので、あなた自身の環境ですべてのステップを試してください。処理にはシンプルで使いやすいIDE（つまり、コードエディタ）があり、ダウンロードしてインストールする必要があるのはそれだけです。あなたはそれをダウンロードすることができます ここから 。

それでは始めましょう！

処理言語とは何ですか？

このセクションには、言語の簡単な技術概要、その構造、およびコンパイルと実行プロセスに関するいくつかの注意事項が含まれています。詳細には、プログラミングとJava環境に関する高度な知識が含まれます。今のところ詳細を気にせず、自分のゲームを学び、コーディングするのが待ちきれない場合は、「処理の基礎」セクションにスキップできます。

処理は、いわばコードでスケッチできるビジュアルプログラミング言語です。ただし、それ自体は正確にはプログラミング言語ではなく、「Java風」プログラミング言語と呼ばれています。つまり、言語はJavaプラットフォーム上に構築されていますが、Java自体ではありません。これはJavaに基づいており、実行ボタンを押すと、すべてのコードが前処理され、Javaコードに直接変換されます。 JavaのPAppletクラスは、すべてのProcessingスケッチの基本クラスです。例を挙げると、いくつかの基本的な処理コードブロックを見てみましょう。

public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

これらのコードブロックは、次のようなものに変換されます。

public class ExampleFrame extends Frame { public ExampleFrame() { super('Embedded PApplet'); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

処理コードブロックが、JavaのPAppletから拡張されたクラスでラップされていることがわかります。したがって、処理コードで定義するすべてのクラスは、存在する場合、内部クラスとして扱われます。

ProcessingがJavaベースであるという事実は、特にあなたが Java開発者 。構文に精通しているだけでなく、Javaコード、ライブラリ、JARファイルをスケッチに埋め込む、Javaアプリケーションで直接Processingアプレットを使用する、クラスを定義する、intなどの標準データ型を使用するなどの機能も提供します、float、charなど。必要に応じて、Eclipseから直接Pocessingコードを作成することもできます。 しばし時間をすごす それを設定します。実行できないことの1つは、Processingのループの性質と競合するため、ProcessingスケッチでAWTまたはSwingコンポーネントを使用することです。ただし、心配しないでください。この記事では、そのような派手なことは行いません。

処理の基礎

コードの処理は、2つの主要な部分で構成されています。 セットアップ そして ドロー ブロック。セットアップブロックはコードが実行されるときに1回実行され、描画ブロックは継続的に実行されます。処理の背後にある主なアイデアは、 ドローブロック内に書き込んだ内容は、プログラムが終了するまで、上から下に1秒間に60回実行されます。 。このアイデアを活かして、すべてを構築していきます。この機能を使用して、オブジェクトを移動させ、スコアを保持し、衝突を検出し、重力を実装し、その他のほとんどすべてを実行します。 この更新ループは、私たちのプロジェクトの心臓部です。 。このハートビートを使用してコードを実現する方法については、後のセクションで説明します。まず、ProcessingIDEを紹介します。

IDEの処理

この時点まで読んでもProcessingIDEをダウンロードしなかった場合は、先に進んでください。 やれ 。記事全体を通して、自分で試すことができるいくつかの簡単なタスクの概要を説明します。IDEを起動して実行している場合にのみ練習できます。これは、処理IDEの簡単な紹介です。とてもシンプルで自明なので、短くしておきます。

ご想像のとおり、実行ボタンと停止ボタンは提案どおりに機能します。あなたがクリックすると 実行 ボタンをクリックすると、コードがコンパイルされて実行されます。本質的に、処理プログラムは決して終了することはなく、邪魔されるまで永遠に実行されます。プログラムで終了できますが、終了しない場合は、 やめる ボタン。

ラン＆ストップの右側にある蝶のように見えるボタンは デバッガ 。デバッガーを使用するには、それに専用の記事が必要です。この記事の範囲外なので、今のところ無視してかまいません。デバッガボタンの横にあるドロップダウンは、modを追加/設定する場所です。 Mods いくつかの特定の機能を提供し、Android用のコードを記述できるようにし、Pythonでコードを記述できるようにします。 Modも範囲外なので、デフォルトのJavaモードのままにして、無視することもできます。

コードエディタのウィンドウは、スケッチが通常実行される場所です。サイズや背景色などのプロパティを設定していないか、何も描画していないため、画像では空白になっています。

コードエディタについて話すことはあまりありません。コードを書く場所です。行番号があります （！） 古いバージョンのProcessingにはそれがなく、最初に見たときの私がどれほど幸せだったか想像できません。

下のブラックボックスは コンソール 。迅速なデバッグの目的で、これを使用して印刷します。ザ・ エラー コンソールの横にあるタブは、エラーが表示される場所です。これは、Processing3.0に付属する新しい便利な機能でもあります。古いバージョンでは、エラーがコンソールに出力され、追跡するのが困難でした。

セットアップブロック

前述のように、セットアップブロックはプログラムの起動時に1回実行されます。設定の作成や、画像や音声の読み込みなど、一度だけ実行したいものに使用できます。セットアップブロックの例を次に示します。このコードを独自の環境で実行して、結果を確認してください。

public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage('test.jpg')); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

スタイリング（背景、塗りつぶし、ストローク）に関連する方法は、プロパティと設定のセクションで説明されます。今のところ、知っておく必要があるのは、ここで設定した設定と構成がスケッチ全体にどのように影響するかです。ここに記述されたコードは、スケッチ全体に適用可能ないくつかの基本ルールセットを設定するために使用されます。このセクションでも理解する必要があるのは、以下にリストされている方法です。

サイズ（） -名前が示すように、この関数はスケッチのサイズを構成するために使用されます。セットアップコードブロックの最初の行にある必要があります。次の形式で使用できます。

node.js：サーバー側

• サイズ（幅、高さ）;
• サイズ（幅、高さ、レンダラー）;

幅と高さの値はピクセル単位で指定できます。サイズ関数は、スケッチが使用するレンダリングエンジンを設定するために使用される3番目のパラメーターであるレンダラーを受け入れます。デフォルトでは、レンダラーはP2Dに設定されています。使用可能なレンダラーは、P2D（Processing 2D）、P3D（Processing 3D、スケッチに3Dグラフィックスが含まれる場合に使用する必要があります）、PDF（2DグラフィックスはAcrobatPDFファイルに直接描画されます。詳細についてはこちらをご覧ください。 ここに ）。 P2DおよびP3Dレンダラーは、OpenGL互換のグラフィックハードウェアを利用します。

全画面表示（） -Processing 3.0以降、size（）関数の代わりにfullScreen関数を使用できるようになりました。 size（）関数と同様に、セットアップブロックの最初の行にもある必要があります。使用法は次のとおりです。

• 全画面表示（）;
• fullScreen（display）;
• fullScreen（レンダラー）;
• fullScreen（display、レンダラー）;

パラメータなしで使用すると、処理スケッチはフルスクリーンで実行され、メインディスプレイで実行されます。 「display」パラメータは、スケッチを実行するディスプレイを設定するために使用されます。たとえば、外部モニターをコンピューターに接続する場合、表示変数を2（または3、4など）に設定すると、スケッチがそこで実行されます。 「レンダラー」パラメーターは、上記のsize（）の部分で説明したとおりです。

設定ブロック

これは、Processingの新しいリリースで導入されたもう1つの機能です。これは、セットアップと描画と同じように、コードブロックです。変数パラメーターを使用してsize（）またはfullScreen（）メソッドを定義する場合に役立ちます。 EclipseなどのProcessing独自のIDE以外の環境を使用している場合は、このコードブロックでsize（）およびsmooth（）などの他のスタイリングプロパティを定義する必要もあります。しかし、ほとんどの場合、この記事では絶対に必要ありません。

ブロックを引く

ドローブロックについて話すのに特別なことは何もありませんが、それでもすべてが特別です。ドローブロックはすべての魔法が起こる場所です。それはあなたのプログラムの中心であり、1秒間に60回叩きます。このコードブロックには、すべてのコードロジックが格納されています。あなたの形や物などはすべてここに書かれます。

この記事で説明するコードのほとんどは描画ブロックからのものであるため、このコードブロックがどのように機能するかを明確に理解することが重要です。デモンストレーションを行うために、ここで試すことができます。最初に、コンソールを使用して何でも印刷できることに注意してください。 print（） または println（） メソッド。 printメソッドはコンソールにのみ出力しますが、printlnは最後に改行を出力して追加するため、各println（）は別々の行に出力されます。

したがって、次のコードブロックを見てください。まず、コンソールに何が出力されるかを推測してみてください。次に、先に進んで試してみてください。

void setup(){ } void draw(){ int x = 0; x += 1; print(x+' '); }

あなたが「12 3 4…」と推測したなら、私はあなたを手に入れました！これは、処理における混乱の1つです。このブロックが繰り返し実行されることを覚えていますか？ここで変数を定義すると、各ループで何度も定義されます。各反復で、xは0に設定され、1ずつ増分され、コンソールに出力されます。したがって、「1 1 11…」という結果が得られます。この例はやや明白でしたが、物事が少し複雑になると混乱する可能性があります。

xを上書きしたくないので、これを達成して「1 2 34…」という結果を得るにはどうすればよいでしょうか。を使用して グローバル変数 。これは特別なことではありません。変数を描画ブロックの外側で定義するだけなので、反復ごとに再定義されることはありません。また、変数のスコープはスケッチ全体で到達可能になります。以下のコードを参照してください。

int x = 0; void setup(){ } void draw(){ x += 1; print(x+' '); }

ブロックの外で定義された変数はどのように機能するのでしょうか。また、setup（）ブロックは最初に一度実行されるので、なぜ使用しなかったのでしょうか。答えはオブジェクト指向プログラミングとスコープに関連しています。慣れていない場合は、この段落をスキップしてください。処理コードがJavaに変換される方法を説明した部分を参照してください。それらがJavaクラスでラップされる方法を覚えていますか？ setup（）およびdraw（）ブロックの外部で記述した変数もラップされるため、次のように扱われます。 田畑 コードをラップする外部クラスのx + = 1を使用することは、this.x + = 1を使用することと同じです。この場合も同じように機能します。draw（）のスコープにxという変数が定義されておらず、スコープである外部スコープが検索されます。 この 。そして、なぜsetup（）セクションで変数xを定義しなかったのですか？その場合、xが定義されているスコープはセットアップ関数のスコープになり、draw（）ブロックからアクセスできなくなります。

図形とテキストの描画

これで、セットアップブロックを使用してスケッチを構成する方法と、描画ブロックの機能がわかりました。それでは、少し視覚的にして、処理の楽しい部分、つまり図形の描画方法について学びましょう。

始める前に、 座標系 。処理では、画面に描画するすべてのオブジェクトの座標を決定します。座標系はピクセル単位です。原点（つまり開始点）は左上隅です。その点を基準にして座標を指定する必要があります。知っておくべきもう1つのことは、各形状には異なる基準点があるということです。たとえば、rect（）の左上隅は参照ポイントです。 ellipse（）の場合、これが中心です。これらの参照ポイントは、rectMode（）やellipseMode（）などのメソッドを使用して変更できます。これについては、プロパティと設定のセクションで説明します。理解を深めるために、図の例が提供されています。

この記事は処理の基本的な概要であるため、頂点や3D形状などの複雑な形状には触れません。基本的な2D形状は、実際には、独自のゲームを作成するのに十分すぎるほどです。この図では、形状がどのように描画されるかの例を見ることができます。各形状には作成する独自の構文がありますが、基本的な考え方は、座標またはサイズ、あるいはその両方を指定することです。よく知っておくべきいくつかの形状を次に示します（以下に示すすべての値について、「x」と「y」はピクセル単位のx座標とy座標を意味し、「w」と「h」はピクセル単位の幅と高さの値を意味します）。

ポイント（） -単純な点。必要な座標は1つだけです。使用法：

• point（x、y）
• point（x、y、z）-3次元を使用している場合。

ライン（） -線を作成します。始点と終点のみで線を作成できます。使用法：

• line（x1、y1、x2、y2）
• line（x1、y1、z1、x2、y2、z2）-3次元を使用している場合。

三角形（） -三角形を作成するため。使用法：triangle（x1、y1、x2、y2、x3、y3）

quad（） -四辺形を作成するため。使用法：quad（x1、y1、x2、y2、x3、y3、x4、y4）

rect（） -長方形を作成するため。基準点はデフォルトでは左上隅です（図を参照）。使用法は次のとおりです。

• rect（x、y、w、h）
• rect（x、y、w、h、r）-「r」は、角を丸くするためのピクセル単位の半径を意味します。
• rect（x、y、w、h、tl、tr、br、bl）-それぞれ左上、右上、右下、左下の角の半径。これもピクセル単位です。

楕円（） -楕円形を作成します。これは円の作成にも使用されます。同じ幅と高さの値を指定する必要があります。この形状の基準点は、デフォルトでは中心です（図を参照）。使用法は次のとおりです。

• 楕円（x、y、w、h）

アーク（） -円弧を描きます。使用法：

• arc（x、y、w、h、start、stop）-「start」と「stop」は、円弧の描画を開始および停止する角度を決定するために使用されます。値はラジアンです。 「PI、HALF_PI、QUARTER_PI、TWO_PI」などの定数を使用できます。
• arc（x、y、w、h、start、stop、mode）-「mode」変数は、円弧（文字列）のレンダリングスタイルを決定します。利用可能なオプションは「OPEN、CHORD、PIE」です。 OPENは、描画されていないパーツをフチなしのままにします。 CHORDは、描画されていない部分を境界線で完成させます。 PIEは、円弧を円グラフのように見せます。

画面にテキストを表示することは、図形を表示することに似ています。基本的な考え方は、テキストを表示する座標を決定することです。ただし、テキストの処理にはさらに多くのことがあります。プロパティと設定セクションの後で、テキストをより細かく制御できるようになります。ここでは、設定とプロパティをオブジェクトに適用する方法を学習します。ここでは、テキストの表示の基本を示します。それを行うには多くの方法がありますが、私は必需品だけを示します。

ソフトウェア会社の勘定科目表

テキスト（） -テキストを表示します。使用法：

• text（c、x、y）-「c」は文字を意味し、任意の英数字が表示されます。
• text（c、x、y、z）-3次元で作業している場合。
• text（str、x、y）-「str」は表示される文字列です。
• text（str、x、y、z）-3次元で作業している場合。
• text（num、x、y）-「num」は表示される数値です。
• text（num、x、y、z）-3次元で作業している場合。

プロパティと設定

このセクションで最初に説明する必要があるのは、オブジェクトのプロパティ設定の背後にあるロジックです。塗りつぶしの色、背景色、境界線、境界線の幅、境界線の色、図形の配置、境界線のスタイルなどは、これらのプロパティの例です。

プロパティを設定するときは、コードがから実行されることを覚えておく必要があります 上から下へ 。たとえば、「fill」プロパティを赤に設定すると、その線の下に描画されたすべてのオブジェクトは、別のfillプロパティによって上書きされるまで赤で塗りつぶされます。同じことが他のプロパティにも当てはまりますが、すべてのプロパティが相互に上書きするわけではないことに注意してください。たとえば、「stroke」プロパティは「fill」プロパティを上書きせず、代わりに連携して機能します。ロジックを理解するための視覚的表現は次のとおりです。

画像でわかるように、最初の行は塗りの色を赤に設定し、2番目の行はストロークの色を青に設定します。これで、赤と青のストロークを塗りつぶすという2つのアクティブな設定ができました。ご想像のとおり、次の行にあるオブジェクトが何であれ、オブジェクトは赤で塗りつぶされ、青のストロークになります（該当する場合）。このように画像を調べ続けることができ、論理を理解することができます。

一般的に使用されるいくつかの重要なプロパティと設定は次のとおりです。

スタイリング設定

fill（） -塗りつぶしの色をオブジェクトに設定します。この設定は、テキストの色付けにも使用されます。今のところ、次の使用法を知る必要があるだけです。

• fill（r、g、b）-整数としての赤、緑、青の値
• fill（r、g、b、a）-追加のアルファ値、最大は255

noFill（） -塗りつぶしの色を透明に設定します。

脳卒中（） -ストロークの色をオブジェクトに設定します。ストロークプロパティは、オブジェクトの周囲の線と境界線に適用できます。今のところ、次の使用法を知る必要があるだけです。

• stroke（r、g、b）-整数としての赤、緑、青の値。
• ストローク（r、g、b、a）-追加のアルファ値、最大は255

noStroke（） -ストロークを削除します。

strokeWeight（） -ストロークの幅を設定します。使用法：

• strokeWeight（x）-xは整数で、ストロークの幅をピクセル単位で表します。

バックグラウンド（） -背景色を設定します。今のところ、次の使用法を知る必要があるだけです。

• background（r、g、b）-整数としての赤、緑、青の値。
• background（r、g、b、a）-追加のアルファ値、最大は255

配置設定

ellipseMode（） -楕円を揃える基準点として使用する場所を設定します。使用法：

• ellipseMode（mode）-「mode」はパラメータです。使用可能なパラメータは次のとおりです。
  • CENTER（デフォルト）：中心を基準点とします。
  • RADIUS：これも中心を基準点としますが、このモードでは、指定したw値とh値は半分（つまり、直径ではなく半径）として扱われます。
  • コーナー：左上隅を基準点とします。
  • コーナー：最初の2つのパラメーター（xとy）を左上隅の位置として設定し、最後の2つのパラメーター（wとh）を楕円の左下隅の位置として設定します。したがって、このモード、「幅」と「高さ」は関係ありません。この場合、楕円（x_tl、y_tl、x_br、y_br）として考える方が理にかなっています。

rectMode（） -長方形を整列する基準点として使用する場所を設定します。使用法：

• rectMode（mode）-「mode」はパラメータです。使用可能なパラメータは次のとおりです。
  • 中心：中心を基準点とします。
  • RADIUS：これも中心を基準点としますが、このモードでは、指定したw値とh値は半分として扱われます
  • CORNER（デフォルト）：左上隅を基準点とします。
  • コーナー：最初の2つのパラメーター（xとy）を左上隅の位置として設定し、最後の2つのパラメーター（wとh）を楕円の左下隅の位置として設定します。したがって、このモード、「幅」と「高さ」は関係ありません。この場合、rect（x_tl、y_tl、x_br、y_br）と考える方が理にかなっています。

テキスト関連の設定

文字サイズ（） -テキストのフォントサイズを設定します。使用法：

• textSize（size）-目的のサイズの整数値。

textLeading（） -テキストの行の高さを設定します。使用法：

• textLeading（lineheight）-行間のスペースのピクセル値。

textAlign（） -テキストを揃える基準点としてどこを取るかを設定します。使用法。

• textAlign（alignX）-「alignX」は水平方向の配置用です。利用可能：左、中央、右
• textAlign（alignX、alignY）-「alignY」は垂直方向の配置用です。利用可能：TOP、BOTTOM、CENTER、BASELINE。

アニメーション

これまで、オブジェクトやテキストの描画方法を学びました。しかし、それらの問題は、それらが静的であるということです。では、どうすればそれらを動かすことができますか？シンプル、 座標を整数として与える代わりに、変数を使用して、それらをインクリメント/デクリメントできるようにします 。意味がありますか？次のコードを見てください。

// initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

アニメーションをどのように管理したかわかりますか？ xとyをグローバル変数として設定し、それらの初期値を0に設定します。描画ループで、楕円を作成し、塗りつぶしの色を赤、ストロークの色を青、座標をxとyに設定しました。 xとyをインクリメントすると、ボールは単にその位置を変更します。しかし、このコードには問題があります。気付くことができますか？あなた自身にとっての簡単な挑戦として、問題が何であるかを理解し、それをテストしてみてください。結果は次のとおりです。

sdrで何を聞くか

これを実現するための私の意図は、Processingのループの性質がどのように機能するかを理解してもらうことでした。 「ドローブロック」セクションの例を参照してください。「123…」ではなく「111…」を取得した理由を覚えていますか？ボールが跡を残しているのと同じ理由。ドローブロックが繰り返されるたびに、xとyが5ずつ増加するため、ボールは上下5ピクセルに再描画されます。ただし、ボールは前の反復から描画され、ビューに残ります。どうすればそれらをなくすことができますか？何か推測はありますか？

ボールが残したマークを取り除くには、セットアップブロックからbackground（255）を削除し、それを描画ブロックの最初の行に貼り付けます。バックグラウンドコードがセットアップブロックにあるとき、最初に1回実行され、バックグラウンドが白になりました。ただし、それだけでは不十分です。前のループから描画されたボールをカバーするために、各ループの背景を白に設定する必要があります。背景が最初の行であるということは、それが最初に実行され、ベースレイヤーになることを意味します。各ループで、キャンバスは白く塗られ、新しい要素が白い背景の上に描画されます。ですから、マークはありません。

これが、Processingで物事をアニメーション化し、オブジェクトの座標をプログラムで操作して位置を変更する背後にある考え方です。しかし、ボールを画面に保持するなど、どのように凝ったことをするのでしょうか。それとも重力を実装しますか？この記事の次のパートでは、このようなことを行う方法を教えます。試して構築することで学びます。それを行う方法を学び、すぐにゲームに適用します。最後に、完全で、プレイ可能で、うまくいけば楽しいゲームができあがります。

キーボードとマウスの相互作用

処理におけるキーボードとマウスの相互作用は非常に簡単で簡単です。イベントごとに呼び出すことができるメソッドがあり、内部に書き込んだ内容は、イベントが発生したときに1回実行されます。また、描画ブロックでループを利用するために使用できる、mousePressedやkeyPressedなどのグローバル変数があります。説明付きの方法のいくつかを次に示します。

void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

ご覧のとおり、マウスがクリックされているかどうか、またはどのキーが押されているかを確認するのは非常に簡単です。ただし、mousePressed変数とkeyCode変数に使用できるオプションは他にもあります。利用可能なオプション mousePressed LEFT、RIGHT、CENTERです。利用できるものは他にもたくさんあります キーコード ;上、下、左、右、ALT、CONTROL、SHIFT、BACKSPACE、TAB、ENTER、RETURN、ESC、およびDELETE。

マウス変数について知っておくべきことの1つは、これを頻繁に使用することですが、マウスの座標を取得する方法です。カーソルの正確な座標を取得するには、次を使用できます。 mouseX そして mouseY draw（）ブロック内の変数。最後になりましたが、他にも多くの便利な方法を確認する必要があります。それらはすべてに文書化されています 処理リファレンス 。

結論

これで、処理に慣れているはずです。ただし、ここで停止すると、このすべての知識が 飛ぶ 離れて。学んだことをいじって、練習を続けることを強くお勧めします。あなたが練習するのを助けるために、私はあなたに2つの演習を提供します。あなたは自分でそれをするために最善を尽くすべきです。行き詰まったら、 グーグル そして 処理リファレンス あなたの親友になるはずです。最初のコードを提供しますが、それらを確認することが最後に行う必要があります。

推奨される演習1

あなたが作る必要があります 4つのボール と 異なる色 、 から始まる 4コーナー 画面の センターを旅する と 異なる速度 。マウスボタンをクリックして押したままにすると、ボールは 氷結 。また、マウスを離すと、ボールが元の位置に戻って動き続ける可能性があります。だから、私はのようなものを探しています この 。

自分で演習を試した後、コードを確認できます ここに 。

推奨される演習2

有名なことを覚えておいてください DVDスクリーンセーバー どのDVDロゴが画面の周りで跳ね返り、私たちは皆、それが角を曲がるのを必死に待っていましたか？そのスクリーンセーバーを複製してほしいのですが、DVDロゴの代わりに長方形のみを使用しています。アプリを起動すると、画面が黒くなり、長方形がランダムな位置から開始されます。長方形が角に当たるたびに、その色（そして明らかに方向）が変わるはずです。マウスを動かすと、長方形が消え、背景色が白に変わります（スクリーンセーバーですよね）。この記事では、この演習のコードは提供しません。あなたはそれを実装するために最善を尽くすべきです、そしてコードはこの記事の後半で提供されます。

処理の究極のガイドの第2部、 ステップバイステップのチュートリアル 簡単なゲームを構築するために、公開されています。