我想了解 p5js

Question

let size = 10;
let erasesize = 10;
let gamemode = 0;
let l = [];  
function setup() {
 createCanvas(400, 400); 
    }

function draw() {
   l[0] = new k;
 background(0,10);
   noStroke();  
 if(keyIsDown(UP_ARROW)){
   gamemode = 1;    
   }   
  if(gamemode === 1){
   l[0].draw();
   size += 7;
}
   if(size > 100){
   push();
   fill(0);
   ellipse(200,200,erasesize);
   erasesize += 9;    
   pop();
   }
if(size > 400){
   size = 0;
   gamemode = 0;
   erasesize = 0;
}    
}
class k{
   constructor(){
       this.x = 200;
       this.y = 200;
       this.size = size;
   }
   draw(){
       push();
       fill(random(255),random(255),random(255));
       ellipse(this.x,this.y,this.size);
       pop();
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

∀

对不起，我只会说一点英语。我用这段代码画彩虹圈。但我无法绘制与按下向上箭头键一样多的执行。我的问题是：我应该怎么做才能按向上箭头键执行多少次？

Answer 1

要使按箭头键确定圆圈显示的次数，您可以监听 keyPressed 并在键为 UP_ARROW

时增加计数

在这个片段中，我从你的问题中提取了总体思路，但进行了重写，以便在绘图逻辑和控制逻辑之间进行分离。

我还向侦听器添加了表示向上键的“u”，因为箭头键会导致滚动。

let size = 10;
let eraseSize = 10; 
let rainbowCount = 0;
let rainbow = 0;
function setup() {
   createCanvas(400, 400);
   rainbow = new Rainbow(); 
}

function keyPressed() {
  // listen for up arrow or u key presses
   if (keyCode === UP_ARROW || 
       keyCode === 85) {
      rainbowCount+=1;
  }
}

function draw() {
   background(0,10);
   noStroke();  
  
  if(rainbowCount > 0){
   size += 7;
   rainbow.setSize(size);
   rainbow.setEraseSize(eraseSize);
   rainbow.draw();  
  }

  if (size > 100){
    eraseSize += 9;
  }
  if(size > 400){
   size = 0;
   rainbowCount--;
   eraseSize = 0;
  }
}
class Rainbow{
   constructor(){
       this.x = 200;
       this.y = 200;
       this.size = 0;
       this.eraseSize = 0;
   }
   setSize(size){
     this.size = size;
   }
   setEraseSize(eraseSize){
     this.eraseSize = eraseSize;
   }
   draw(){
     push();
     fill(random(255),random(255),random(255));
     ellipse(this.x,this.y,this.size);
     pop();
    if(this.size > 100){
     push();
     fill(0);
     ellipse(200,200,this.eraseSize);  
     pop();
   }
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

我想了解 p5js

I want to know about p5js

p5.js