Processing “如何制作某物”；瞬间；加工中

所以，如果这是一个奇怪或愚蠢的问题，我很抱歉，但我真的找不到答案。所以，我要做的是一个乘法表的可视化表示，所以我把一个圆分成一定数量的“切片”，例如，我把它分成10。然后我将每个点与其乘积连接起来，例如，对于2倍表，我在1和2之间画一条线，在2和4之间画一条线，在3和6之间画一条线，依此类推

问题是，如果我超过了一定数量的“切片”，我可以清楚地看到一条一条地绘制每一条线。我想逐步改变切片的数量，这样你就可以看到它是如何演变的，但是如果你看到它画每一条线，“动画”就没有意义了，因此线条只能“出现”或瞬间改变。有没有办法提高程序的速度，或者让它一次显示所有行

作为参考，这是我希望它看起来的样子：

这是我正在使用的代码（使用ControlP5库，优化得太差）：

import controlP5.*;

ControlP5 cp5;
Knob myKnobA;
Knob myKnobB;

int ncosas = 30;
float sumangle = (2*PI)/ncosas;
float angle = HALF_PI + PI + sumangle;
int radius = 100;
int counter = 1;
int sumar = 15;
int tablade = 2;
int prueba = 30;
 
void setup(){
  size(400,400);
  background(255);
  textAlign(CENTER,CENTER);
  fill(0);
  stroke(0);
  textSize(8);
  cp5 = new ControlP5(this);
  myKnobA = cp5.addKnob("Servo")
               .setRange(1,120)
               .setValue(1)
               .setPosition(20,20)
               .setRadius(30)
               .setDragDirection(Knob.HORIZONTAL)
               .setCaptionLabel("N")
               .setColorCaptionLabel(0)
               ;
           
  myKnobB = cp5.addKnob("TablaD")
               .setRange(1,50)
               .setValue(1)
               .setPosition(20,120)
               .setRadius(30)
               .setDragDirection(Knob.HORIZONTAL)
               .setCaptionLabel("Tabla de")
               .setColorCaptionLabel(0)
               ;
  //translate(height/2,width/2);
  

  //line(0,0,radius*sin(radians(prueba)),radius*cos(radians(prueba)));
  
  
  
}
 
void draw(){
  if(counter <= ncosas){
    dibujar();
  }
}

void Servo(int theValue){
  background(255);
  counter = 1;
  ncosas = theValue;
  sumangle = (2*PI)/ncosas;
  angle = HALF_PI + PI + sumangle;
}

void TablaD(int theValue){
  background(255);
  counter = 1;
  tablade = theValue;
  angle = HALF_PI + PI + sumangle;
}


void dibujar(){
  pushMatrix();
  translate(width*2.5/4,height/2);
  circle(radius*sin(angle),radius*cos(angle),2);
  //if(counter*tablade<=ncosas){
  line(radius*sin(angle),radius*cos(angle),radius*sin((counter*tablade*sumangle)+(angle-counter*sumangle)),radius*cos((counter*tablade*sumangle)+(angle-counter*sumangle)));
  //}
  println(counter*tablade + " -> " + counter*tablade*degrees(sumangle));
  text(counter,(radius+sumar)*sin(angle),(radius+sumar)*cos(angle));
  angle += sumangle;
  counter++;
  popMatrix();
}

void keyPressed(){
  if (key == 'D' || key == 'd'){
      Servo(int(myKnobA.getValue())+1);
      myKnobA.setValue(int(myKnobA.getValue())+1);
  }
  if (key == 'A' || key == 'a'){
      Servo(int(myKnobA.getValue())-1);
      myKnobA.setValue(int(myKnobA.getValue())-1);
  }
  if (key == 'W' || key == 'w'){
      TablaD(int(myKnobB.getValue())+1);
      myKnobB.setValue(int(myKnobB.getValue())+1);
  }
  if (key == 'S' || key == 's'){
      TablaD(int(myKnobB.getValue())-1);
      myKnobB.setValue(int(myKnobB.getValue())-1);
  }
}

导入控制p5.*；
控制p5-cp5；
梅克诺巴；
梅克诺布；
int-ncosas=30；
浮点数角度=（2*PI）/ncosas；
浮动角度=半π+π+相角；
int半径=100；
int计数器=1；
int sumar=15；
int tablade=2；
int-prueba=30；
无效设置（）{
尺寸（400400）；
背景（255）；
textAlign（居中，居中）；
填充（0）；
冲程（0）；
文本大小（8）；
cp5=新控制P5（本）；
myKnobA=cp5.addKnob（“伺服”）
.setRange（1120）
.setValue（1）
.设置位置（20,20）
.setRadius（30）
.setDragDirection（旋钮水平）
.setCaptionLabel（“N”）
.setColorCaptionLabel（0）
;
myKnobB=cp5.addKnob（“TablaD”）
.设定范围（1,50）
.setValue（1）
.设定位置（20120）
.setRadius（30）
.setDragDirection（旋钮水平）
.setCaptionLabel（“Tabla de”）
.setColorCaptionLabel（0）
;
//平移（高度/2，宽度/2）；
//直线（0,0，半径*sin（弧度（prueba）），半径*cos（弧度（prueba））；
}
作废提款（）{
如果（counter要扩展所说的内容，您需要在
draw（）
中多次执行
dibujar（）
命令。在处理过程中，画布在
draw（）
循环的末尾呈现，因此如果您在
draw（）
中绘制多行，它们将同时出现

这将涉及某种循环。如果要同时绘制整个乘法循环，可以在
draw（）
循环中将
If
替换为
，而将
替换为
：

void draw(){
  while (counter <= ncosas){
    dibujar();
  }
}

void draw（）{
while（counter）每次调用
draw
，都会有一个屏幕更新。确保在每次通过
draw
时都会执行多个绘图命令。您似乎在使用主处理循环作为代码中的唯一循环，因此，当您可以绘制更多的东西时，可以每秒绘制60个不同的东西。