p5.js 入門チュートリアルでのマウス操作の例-jsチュートリアル-php.cn

p5.js 入門チュートリアルでのマウス操作の例

亚连

リリース： 2018-05-29 17:12:48

オリジナル

2223 人が閲覧しました

この記事では、p5.js 入門チュートリアルのマウスインタラクションの例を主に紹介しますので、参考にしてください。

この記事では、p5.js の入門チュートリアルでマウスインタラクションの例を紹介し、それを皆さんと共有します。詳細は次のとおりです:

1. マウスインタラクションの一般的なキーワード

マウス操作用のキー一般的に使用される単語と関数は次のとおりです:

mouseIsPressed: キーワード、マウスが押されている場合は true、そうでない場合は false

mouseButton: キーワード、マウスがどのボタンを押しているかを決定するために使用されます

この場合は次のとおりです。

function setup() {  
 createCanvas(400, 400); 
}  
function draw() {  
 background(220); 
 if (mouseIsPressed) { 
  textAlign(CENTER); 
  textSize(30); 
  if (mouseButton == LEFT) 
   text("LEFT",200,height/2); 
  if (mouseButton == RIGHT) 
   text("RIGHT",200,height/2); 
  if (mouseButton == CENTER) 
   text("CENTER",200,height/2); 
 } 
}

ログイン後にコピー

マウスの左、中、右ボタンを押すと、それぞれ画面に「LEFT」、「CENTER」、「RIGHT」が表示されます。

効果を見る:

http://alpha.editor.p5js.org/full/BkEcwrdUb

2. マウス操作でよく使用される関数

マウス操作でよく使用される関数は次のとおりです。 :

mouseClicked() : マウスがクリックされたときに1回トリガーされる関数

mousePressed(): マウスが押されたときに1回トリガーされる関数
mouserelease(): マウスが放されたときに1回トリガーされる関数

これらを使用できますグラフィックスが画面に表示されるタイミングを制御する関数。ケースは次のとおりです:

var showEllipse=false; 
var showRect=false; 
function setup() {  
 createCanvas(400, 400); 
}  
function draw() {  
 background(220); 
 if (mouseIsPressed){ 
  ellipse(50, height/2, 50, 50); 
 } 
 if(showEllipse){ 
    ellipse(200, height/2, 50, 50); 
 } 
 if(showRect){ 
  rectMode(CENTER); 
  rect(350,height/2,50,50);  
 } 
} 
function mouseClicked(){ 
 showEllipse=!showEllipse; 
} 
 
function mousePressed(){ 
 showRect=true; 
} 
function mouseReleased(){ 
 showRect=false; 
}

ログイン後にコピー

効果の表示: http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. ドラッグします。マウスでオブジェクトをドラッグします

上記のキーワードと機能を柔軟に使用して、多くの機能を実行できます。マウスでオブジェクトをドラッグする例を示します。

コードは次のとおりです:

var x=200; 
var y=200 
var r=50; 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){ 
  x=mouseX; 
  y=mouseY; 
 } 
 ellipse(x,y,r,r); 
}

ログイン後にコピー

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

vuejsのv-ifとv-showの違いとv-showが動作しない問題について

コンソールを使ってデバッグするための10の高度なテクニックのまとめ

Nodeモジュールを深く理解する

以上がp5.js 入門チュートリアルでのマウス操作の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。