Question

我一直在使用Processing处理一个小项目，而我想要实现的效果是一种使用“山峰”成形和移动，使用带有2个参数的Perlin Noise和noise（）函数。

我本来是使用图像作为背景的，但是出于说明目的，我将背景设为黑色，并且效果基本相同。

我的问题是我想了解山的“历史”，因为它们会在一段时间后逐渐消失，因此我制作了PShapes的历史，并绘制历史并在每一帧对其进行更新。

更新没有问题，但是绘制PShapes似乎会花费很多时间，当历史记录的长度为100个元素时，将帧速率从60降低到10。

下面是我使用的代码：

float noise_y = 0;
float noise_increment = 0.01;

// increment x in the loop by this amount instead of 1
// makes the drawing faster, since the PShapes have less vertices
// however, mountains look sharper, not as smooth
// bigger inc = better fps
final int xInc = 1;

// maximum length of the array
// bigger = less frames :(
final int arrLen = 100;

int lastIndex = 0;

PShape[] history = new PShape[arrLen];
boolean full = false;

// use this to add shapes in the history
PShape aux;

void setup() {
  size(1280, 720);
}

void draw() {
  background(0);

  // create PShape object
  aux = createShape();
  aux.beginShape();
  aux.noFill();
  aux.stroke(255);
  aux.strokeWeight(0.5);

  for (float x = 0; x < width + xInc; x = x + xInc) {
    float noise = noise(x / 150, noise_y) ;
    // get the actual y coordinate
    float y = map(noise, 0, 1, height / 2, 0);
    // create vertex of shape at x, y
    aux.vertex(x, y);
  }
  aux.endShape();
  // push the current one in the history

  history[lastIndex++] = aux;

  // if it reached the maximum length, start it over ( kinda works like a queue )
  if (lastIndex == arrLen) {
    lastIndex = 0;
    full = true;
  }

  // draw the history
  // this part takes the MOST TIME to draw, need to fix it. 
  // without it is running at 60 FPS, with it goes as low as 10 FPS
  if (full) {
    for (int i = 0; i < arrLen; i++) {
      shape(history[i]);
    }
  } else {
    for (int i = 0; i < lastIndex; i++) {
      shape(history[i]);
    }
  }

  noise_y = noise_y - noise_increment;
  println(frameRate);
}

我尝试使用不同的方式绘制“山脉”：我尝试编写自己的曲线类并绘制链接点的线，但性能却相同。我尝试将PShapes分组为

之类的PShape组对象

PShape p = new PShape(GROUP);
p.addChild(someShape);

我的表现也一样。

我当时考虑使用多个线程分别渲染每个形状，但是在进行了一些研究之后，只有一个线程负责渲染-动画线程，所以对我也没有好处。

我真的很想完成此操作，这看起来确实很简单，但我无法弄清楚。

Answer 1

一种可能的解决方案是，不绘制所有生成的形状，而仅绘制新形状。
要“查看”先前帧的形状，当然不能在帧的开头清除场景。
由于永远不会清除场景，因此，随着时间的流逝，将导致整个视图被形状覆盖。但是，如果场景在新帧开始时会稍微淡出，而不是清除它，那么“较旧”的形状将随着时间的推移变得越来越暗。这给人一种感觉，“较旧的”帧会随着时间的流逝而移入深度。

在初始化时清除背景

void setup() {
  size(1280, 720);
  background(0);
}

使用淡入淡出效果创建场景：

void draw() {

    // "fade" the entire view 
    blendMode(DIFFERENCE);
    fill(1, 1, 1, 255);
    rect(0, 0, width, height);

    blendMode(ADD);

    // create PShape object
    aux = createShape();
    aux.beginShape();
    aux.stroke(255);
    aux.strokeWeight(0.5);
    aux.noFill();
    for (float x = 0; x < width + xInc; x = x + xInc) {
      float noise = noise(x / 150, noise_y) ;
      // get the actual y coordinate
      float y = map(noise, 0, 1, height / 2, 0);
      // create vertex of shape at x, y
      aux.vertex(x, y);
    }
    aux.endShape();

    // push the current one in the history
    int currentIndex = lastIndex; 
    history[lastIndex++] = aux;
    if (lastIndex == arrLen)
      lastIndex = 0;

    // draw the newes shape
    shape(history[currentIndex]);

    noise_y = noise_y - noise_increment;
    println(frameRate, full ? arrLen : lastIndex);
}

查看预览：

处理-渲染形状太慢

1 个答案: