p5.j​​sを使用したマウスインタラクションの例

この記事では、p5.js 入門チュートリアルのマウス インタラクションの例を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. マウス操作によく使用されるキーワード

p5.js には、マウス操作用の多くのキーワードと関数が用意されています。

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」が画面に表示されます。

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

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

mouseClicked(): マウスがクリックされたときに 1 回トリガーされる関数
mousePressed(): 関数、マウスが押されたときに 1 回トリガーされます
MouseClosed(): マウスが放されたときに 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; 
}

。

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); 
}

以上がp5.j​​sを使用したマウスインタラクションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。