如何在处理中“立即”制作一些东西答案

【问题标题】：How to make something "instantaneously" in Processing如何在处理中“立即”制作一些东西
【发布时间】：2021-04-26 06:21:47
【问题描述】：

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

问题是，如果我超过了一定数量的“切片”，我可以清楚地看到 Processing 一一绘制每一行。我想逐渐改变切片的数量，这样你就可以看到它是如何演变的，但是线条只需要“出现”或立即改变，因为如果你看到它绘制每条线，“动画”就没有意义了。有什么方法可以提高程序的速度，还是让它一次显示所有行？

作为参考，我希望它看起来像这样：

YouTube video

这是我正在使用的代码（使用 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);
  }
}

提前谢谢你

【问题讨论】：

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

标签： processing

【解决方案1】：

要扩展John Coleman 所说的内容，您需要在draw() 中多次执行dibujar() 命令。在Processing中，画布是在draw()循环结束时渲染的，所以如果你在draw()中画多条线，它们都会同时出现。

这将涉及某种循环。如果你想一次画出整个乘法圈，你可以在draw()循环中将if替换为while：

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

我相信这会在一个帧中绘制整个乘法圈。然后你可以通过调节旋钮来改变乘法圈的参数，当你调节旋钮时，乘法圈会发生变化。

【讨论】：