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

この記事では、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.j​​s 入門チュートリアルでのマウス操作の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。