p5.j​​s マウス インタラクションを実装して使用する方法

今回は、p5.js のマウス インタラクションを実装および使用する方法を説明します。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); 
 } 
}

マウスが左、中、右のボタンを押すと、「左」と「中央」画面にはそれぞれ「、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); 
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

クリックハイライトを実装するための
vue+Echarts (コード付き)

echarts マウスオーバーレイハイライトノード関係番号の実装手順

🎜🎜

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