p5.js introductory tutorial keyboard interaction

This article mainly introduces the keyboard interaction of p5.js introductory tutorial. Now I share it with you and give it as a reference.

1. Keywords and functions related to keyboard interaction

keyIsPressed: Keyword, true when the key is pressed, false otherwise

keyCode: keyword, used to determine which key is pressed

keyPressed(): function, triggered once when the key is pressed

keyReleased(): function, triggered when the key is released Trigger once

keyIsDown(): function, returns true when the specified key is pressed, otherwise false

The following is a more comprehensive case, using wsad and zxcv to control the movement of the ball:

var x=200; 
var y=200; 
var speed=2; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 ellipse(x,y,20,20); 
 if(keyIsPressed){ 
  //持续触发 
  //字母用小写 
  if(key=='a'){ 
   x-=speed; 
  } 
  if(key=='d'){ 
   x+=speed; 
  } 
 } 
 if(keyIsDown(87)){ 
  //持续触发 
    //使用keyCode 
  //87即w 
  y-=speed; 
 } 
 if(keyIsDown(83)){ 
  //持续触发 
  //使用keyCode 
  //83即s 
  y+=speed; 
 } 
} 
 
function keyPressed(){ 
 //按键按下时触发一次 
 //字母用大写 
  if(key=='Z'){ 
  x-=20; 
 } 
 if(key=='X'){ 
  x+=20; 
 } 
} 
 
function keyReleased(){ 
 //按键松开时触发一次 
 //字母用大写 
  if(key=='C'){ 
  y-=20; 
 } 
 if(key=='V'){ 
  y+=20; 
 } 
}

View the effect: http://alpha.editor.p5js.org/full/S1YQvEFIZ

2. Key and keyCode

The following case will output the key and keyCode of the key you pressed on the screen. You can use this method to quickly find the keyCode when writing a program:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 textAlign(CENTER); 
 textSize(30); 
 if(keyIsPressed){ 
  text(key,200,180);  
  text(keyCode,200,220);  
 } 
}

The above is what I compiled for everyone. I hope it will be useful in the future. Helpful to everyone.

Related articles:

Detailed explanation of using Angular CLI to generate code from a blueprint

Detailed analysis of several easily overlooked parts of the Vue document

How to use jointjs in vue

The above is the detailed content of p5.js introductory tutorial keyboard interaction. For more information, please follow other related articles on the PHP Chinese website!