0

我是处理新手。我用弹跳球编写了以下代码,但动画并不流畅。我已经在多台计算机上运行了该应用程序,我偶尔会看到一些球出现抖动或撕裂。我不认为它与计算时间有关,因为每帧涉及的计算并不多。此外,我已经阅读了处理已经是双缓冲的。

以下是相关代码:

 final int MAX_BALLS = 50;
 final int DISPLAY_WIDTH = 800;
 final int DISPLAY_HEIGHT = 600;
 final float MIN_SPEED = 1;
 final float MAX_SPEED = 5;
 final float MIN_SIZE = 30;
 final float MAX_SIZE = 50;
 Ball[] balls = new Ball[MAX_BALLS];

 void setup() {
   size(800, 600);
   stroke(255);
   background(0, 0, 0);
   for (int i=0; i<balls.length; i++) {
     balls[i] = new Ball(random(MIN_SIZE, MAX_SIZE), random(0, DISPLAY_WIDTH), random(0, DISPLAY_HEIGHT), random(MIN_SPEED, MAX_SPEED), random(MIN_SPEED, MAX_SPEED), 0, DISPLAY_WIDTH, 0, DISPLAY_HEIGHT);
   }
 } 

 void draw() {
   clear();
   for (int i = 0; i<balls.length; i++)
     balls[i].draw();
 }

 class Ball {
   private float size;
   private float x;
   private float y;
   private float vx;
   private float vy;
   private float minx;
   private float maxx;
   private float miny;
   private float maxy;
   private float r;
   private float g;
   private float b;

   public Ball(float size,float x, float y, float vx, float vy, float minx, float maxx, float miny, float maxy) {
     this.size = size;
     this.x = x;
     this.y = y;
     this.vx = vx;
     this.vy = vy;
     this.minx = minx;
     this.maxx = maxx;
     this.miny = miny;
     this.maxy = maxy;
     r = (int) random(30, 255);
     g = (int) random(30, 255);
     b = (int) random(30, 255);
   }

   void draw() {
     x = x + vx;
     if (x + size/2 > maxx) {
       vx = -vx;
       x = 2 * maxx - (x + size);
     } else if (x - size/2 < minx) {
       vx = -vx;
       x = 2 * minx - (x - size);
     }

     y = y + vy;
     if (y + size/2 > maxy) {
       vy = -vy;
       y = 2 * maxy - (y + size);
     } else if (y -size/2 < miny) {
       vy = -vy;
       y = 2 * miny - (y - size);
     }
     stroke(r,g,b);
     fill(r,g,b);
     ellipse(x, y, size, size);

   }   

 }

我怎样才能摆脱抖动和撕裂?如何确保以最佳方式使用显卡驱动程序。请注意,我使用带有 MATE 桌面管理器的 Linux Mint 17.3。所有经过测试的 PC 上的操作系统相同且行为相同。

[编辑 05/01/2016] 在屏幕外生成圆圈甚至使用屏幕大小的离线图像后,我仍然有些撕裂。这是更新的代码:

 final int MAX_BALLS = 50;
 final float MIN_SPEED = 1;
 final float MAX_SPEED = 5;
 final float MIN_SIZE = 30;
 final float MAX_SIZE = 50;
 Ball[] balls = new Ball[MAX_BALLS];
 PGraphics img;

 void setup() {
   frameRate(60);
   fullScreen();
   img = createGraphics(width, height);
   img.stroke(255);
   img.smooth();
   for (int i=0; i<balls.length; i++) {
     balls[i] = new Ball(random(MIN_SIZE, MAX_SIZE), random(0, width), random(0, height), random(MIN_SPEED, MAX_SPEED), random(MIN_SPEED, MAX_SPEED), 0, width, 0, height);
   }
 } 

 void draw() {
   img.beginDraw();
   img.background(0,0,0);
   img.clear();
   clear();
   for (int i = 0; i<balls.length; i++)
     balls[i].draw();

   img.text((int)frameRate+"fps",10,15);
   img.endDraw();
   image(img, 0, 0); // Put the whole image at once on the screen
 }

 class Ball {
   private float size;
   private float x;
   private float y;
   private float vx;
   private float vy;
   private float minx;
   private float maxx;
   private float miny;
   private float maxy;
   private PGraphics circle;
   private final int MARGIN = 10; // Margin to avoid circle to be drawn slightly outside the square

   public Ball(float size,float x, float y, float vx, float vy, float minx, float maxx, float miny, float maxy) {
     this.size = size;
     this.x = x;
     this.y = y;
     this.vx = vx;
     this.vy = vy;
     this.minx = minx;
     this.maxx = maxx;
     this.miny = miny;
     this.maxy = maxy;

     int r = (int) random(30, 255);
     int g = (int) random(30, 255);
     int b = (int) random(30, 255);

     circle = createGraphics((int) this.size + 2*MARGIN, (int) this.size + 2*MARGIN);
     circle.beginDraw();
     circle.background(0, 0);
     circle.fill(r, g, b);
     circle.ellipse(MARGIN + this.size/2, MARGIN + this.size/2, this.size, this.size);
     circle.endDraw();         
   }

   void draw() {
     x = x + vx;
     if (x + size/2 > maxx) {
       vx = -vx;
       x = 2 * maxx - (x + size);
     } else if (x - size/2 < minx) {
       vx = -vx;
       x = 2 * minx - (x - size);
     }

     y = y + vy;
     if (y + size/2 > maxy) {
       vy = -vy;
       y = 2 * maxy - (y + size);
     } else if (y -size/2 < miny) {
       vy = -vy;
       y = 2 * miny - (y - size);
     }

     img.image(circle, x - this.size/2 - MARGIN, y - this.size/2 - MARGIN);
   }   

 }
4

2 回答 2

1

事实证明,直接在图形上绘制许多圆圈会导致问题。为每个圆圈在单独的 PGraphics 上预渲染圆圈可以解决问题。以下是修改后的代码:

 final int MAX_BALLS = 50;
 final int DISPLAY_WIDTH = 800;
 final int DISPLAY_HEIGHT = 600;
 final float MIN_SPEED = 1;
 final float MAX_SPEED = 5;
 final float MIN_SIZE = 30;
 final float MAX_SIZE = 50;
 Ball[] balls = new Ball[MAX_BALLS];

 void setup() {
   frameRate(60);
   size(800, 600, FX2D);
   stroke(255);
   background(0, 0, 0);
   smooth();
   for (int i=0; i<balls.length; i++) {
     balls[i] = new Ball(random(MIN_SIZE, MAX_SIZE), random(0, DISPLAY_WIDTH), random(0, DISPLAY_HEIGHT), random(MIN_SPEED, MAX_SPEED), random(MIN_SPEED, MAX_SPEED), 0, DISPLAY_WIDTH, 0, DISPLAY_HEIGHT);
   }
 } 

 void draw() {
   clear();
   for (int i = 0; i<balls.length; i++)
     balls[i].draw();

     text((int)frameRate+"fps",10,15);

 }

 class Ball {
   private float size;
   private float x;
   private float y;
   private float vx;
   private float vy;
   private float minx;
   private float maxx;
   private float miny;
   private float maxy;
   private PGraphics circle;
   private final int MARGIN = 10; // Margin to avoid circle to be drawn slightly outside the square

   public Ball(float size,float x, float y, float vx, float vy, float minx, float maxx, float miny, float maxy) {
     this.size = size;
     this.x = x;
     this.y = y;
     this.vx = vx;
     this.vy = vy;
     this.minx = minx;
     this.maxx = maxx;
     this.miny = miny;
     this.maxy = maxy;

     int r = (int) random(30, 255);
     int g = (int) random(30, 255);
     int b = (int) random(30, 255);

     circle = createGraphics((int) this.size + 2*MARGIN, (int) this.size + 2*MARGIN);
     circle.beginDraw();
     circle.background(0, 0);
     circle.fill(r, g, b);
     circle.ellipse(MARGIN + this.size/2, MARGIN + this.size/2, this.size, this.size);
     circle.endDraw();         
   }

   void draw() {
     x = x + vx;
     if (x + size/2 > maxx) {
       vx = -vx;
       x = 2 * maxx - (x + size);
     } else if (x - size/2 < minx) {
       vx = -vx;
       x = 2 * minx - (x - size);
     }

     y = y + vy;
     if (y + size/2 > maxy) {
       vy = -vy;
       y = 2 * maxy - (y + size);
     } else if (y -size/2 < miny) {
       vy = -vy;
       y = 2 * miny - (y - size);
     }

     image(circle, x - this.size/2 - MARGIN, y - this.size/2 - MARGIN);
   }   

 }
于 2016-05-02T07:10:13.583 回答
0

我没有看到代码更新和渲染圈有任何问题。

使用 Processing 2,我已经可以看到不同渲染器的性能差异。

我在末尾添加了这个以draw()大致了解帧速率:

text((int)frameRate+"fps",10,15);

它设置我试过

size(800, 600,JAVA2D);
frameRate(60);

size(800, 600,P2D);
frameRate(60);

并注意到JAVA2DframeRate 非常接近 60fps,而P2D它下降到 ~40-45fps

这是在 OSX 上,而不是在 Linux Mint 上。尝试FX2D处理 3 中的渲染器,看看它与其他两个渲染器的比较。

此外,如果 Linux Mint 计算机上有 GPU,驱动程序已正确安装并且您有时间,您可以尝试将代码移植到 GLSL 并使用PSShader在处理中渲染它。

于 2016-04-30T10:56:39.303 回答