Processing【6日目】双方向性、マウスとキーボード！！

2024.04.17

インスタなどショート動画で数学的に美しい映像を見て、自分も作ってみたいと思うようになりました。
そこで調べてみるとProcessingというプログラミング（？）をすることで作れそうでした。
そこで今回から英語の勉強と、文章を書く練習としてProcessingの英語の公式サイトを訳していこうと思います。

7割翻訳、3割感想や自分なりの解説を目指します。
今回の参考ページは以下になります。

Interactivity
Introduction to interactivity with the mouse and keyboard.
processing.org
スポンサーリンク

マウスの歴史

コンピュータのマウスの歴史は1960年代までさかのぼります。

ダグラス・エンゲルバートがoN-Line System (NLS)のディスプレイを持つデバイスの一部として発表しました。マウスのコンセプトはXerox Palo Alto Research Center (PARC)でも開発されていましたが、世間的には1984年のApple Macintoshでの導入が現在の普及のきっかけとなっています。マウスのデザインは過去40年間で多くの改訂を経てきましたが、その機能は変わらずに残っています。エンゲルバートの1970年の特許出願では、マウスを「X-Y位置指示子」として言及しており、これは現代の使用を正確に定義しています。

スポンサーリンク

マウスの位置情報

processingが標準に用意してくれている変数にmouseXとmouseYがあります。

それぞれキャンバス上のマウスの位置をX座標、Y座標を表しています。

シンプルなコードで例を実行してみてください。

void setup() {
　size(100, 100); 
　noStroke(); 
} 

void draw() {
　background(126);
　ellipse(mouseX, mouseY, 33, 33); 
}

何が起きているか理解できましたか。

上のコードは、draw()に書いてある

  1. キャンバス全体を灰色に塗りつぶす。
  2. マウスのある位置に楕円を描く。

を何度も繰り返し、まるでマウスについてきているように見えるのです。

processingが標準に用意してくれている変数にpmouseXとpmouseYもあります。

頭にpがついただけですが、非常に便利で、1フレーム前のマウスの位置を表しています。
pはpreviousの頭文字です。

こちらも例を見ておきましょう。

void setup() {
　size(100, 100); 
　strokeWeight(8); 
} 

void draw() { 
　background(204); 
　line(mouseX, mouseY, pmouseX, pmouseY); 
}

1フレーム前と現在のマウスの位置の間に線を引く、ということを高速で行っているので残像が残るように見えます。

スポンサーリンク

マウスのボタン

マウスにはボタンがありますね。

processingには、マウスのボタンに関する変数が用意されています。

  • mousePressedは、マウスのボタンが押されているかどうかを表す変数です。押されている時にはTRUE、押されていない時にはFALSEを瞬時に切り替えます。
  • mouseButtonは、マウスのどのボタンが最後に押されたかを表す変数です。LEFT、CENTER、RIGHTのいずれかの値をとります。

こちらも例を見ておきましょう。

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

void draw() { 
　if (mousePressed == true) {
　　if (mouseButton == LEFT) {
　　　fill(0);
　　　// Black 
　　} else if (mouseButton == RIGHT) { 
　　　fill(255); 
　　　// White 
　　} 
　} else { 
　　fill(126); 
　　// Gray 
　} 
　rect(25, 25, 50, 50); 
}

キーボード入力

パソコンにはキーボードがありますね。

processingには、キーボードに関する変数が用意されています。

  • keyPressedは、キーボードが押されているかどうかを表す変数です。押されている時にはTRUE、押されていない時にはFALSEを瞬時に切り替えます。
  • keyは、どのアルファベットが最後に押されたかを表す変数です。大文字、小文字も判別します。ASCII により定められた数値としても扱える（例えば”A”は65として）。
  • keyCodeは、ALT, CONTROL, SHIFT, UP, DOWN, LEFT, and RIGHTなどを表す変数。（OSによって反応しない場合もある。）

イベント関数

それぞれsetup()などと同様に後ろに{ }を使って記述します。

  • mousePressed()：マウスボタンが押されたときにこのブロック内のコードが1回実行されます。
  • mouseReleased()：マウスボタンが離されたときにこのブロック内のコードが1回実行されます。
  • mouseMoved()：マウスが移動したときにこのブロック内のコードが1回実行されます。
  • mouseDragged()：マウスボタンが押された状態でマウスが移動したときにこのブロック内のコードが1回実行されます。
  • keyPressed()：任意のキーが押されたときにこのブロック内のコードが1回実行されます。
  • keyReleased()：任意のキーが離されたときにこのブロック内のコードが1回実行されます。

draw()のループを止められる!?

draw() で書かれたプログラムは、1秒間に60フレームのフレームを画面に表示します。

  • frameRate()：1秒間に表示されるフレーム数の制限を設定するために使用される。
  • noLoop()：draw() のループを停止するために使用されます。
  • loop()： プログラムが noLoop() で一時停止されている場合、loop() を実行するとその動作が再開されます。

イベント関数が、プログラムが noLoop() で一時停止されている間に継続して実行される唯一の要素であるため、これらのイベント内で loop() 関数を使用して draw() 内のコードを継続して実行することができます。

次の例は、マウスボタンが押されるたびに draw() 関数を約2秒間実行し、その時間が経過した後にプログラムを一時停止します。

int frame = 0; 

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

void draw() { 
　if (frame > 120) { // If 120 frames since the mouse 
　　noLoop(); // was pressed, stop the program 
　　background(0); // and turn the background black. 
　} else { // Otherwise, set the background 
　　background(204); // to light gray and draw lines 
　　line(mouseX, 0, mouseX, 100); // at the mouse position 
　　line(0, mouseY, 100, mouseY); 
　　frame++; 
　}
} 

void mousePressed() {
　loop(); 
　frame = 0; 
}

カーソルが邪魔？

マウスのクリックなどをするとき、キャンバス上でないとprocessingは反応してくれません。
その時カーソルがあると邪魔ですよね。

そんな時は、noCursor()をsetup()の中に書けばカーソルの表示を消すことができます。

まとめ

今日の英単語

interactivity…双方向性、対話生

realm…範囲、領域、分野

catalyst…触媒。促進させるもの

スポンサーリンク

コメント

タイトルとURLをコピーしました