我正在使用底部的处理中断设置动画的行 "bounce"

Question

这是我用来模拟直线运动的像素对象。

class LineDot{
 float x;
 float y;
 float yspeed=-1;
   LineDot(float a, float b){
 x=a;
 y=b;
 }
 float getX(){
   return x;
 }
 float getY(){
   return y;
 }
 void reverse(){
   yspeed*=-1;
 }
 void show(){
   stroke(255,255,255);
   line(x,y,x,y);
 }
 void move(){
   if(y<1){
     yspeed*=-1;
   }
   if(y>720){
     yspeed*=-1;
   }
   y=y+yspeed;

 }

}

这就是我使用 1280 像素创建实际线条并在 1280x720 window 上上下移动它们的方式。

LineDot[] first = new LineDot[1280];
LineDot[] second = new LineDot[0];
void setup(){

  size(1280,720);

  for(int i = 0;i<first.length;i++){
    first[i]= new LineDot(i+1,(i+1)*0.5625);  
  }
  for(int i = 0;i<second.length;i++){
    second[i] = new LineDot(i+1,(i+30)*0.5625);
  }
}
void draw(){
  background(0,0,0);
  for(int i = 0;i<first.length;i++){
   first[i].show(); 
   first[i].move(); 
  }
  for(int i = 0;i<second.length;i++){
    second[i].show();
    second[i].move();
 }

} 当这条线由于某种原因达到底部限制时，大约 10 个像素中的 1 个像素将被一个像素分隔开，并且这条线变成了这条奇怪的几乎是条纹的线，如此处所示 This is what it looks like when the line is broken up on the first bounce

Answer 1

for(int i = 0;i<first.length;i++){
 first[i]= new LineDot(i+1,(i+1)*0.5625);  
}

值 0.5625 是发生这种情况的原因。

将其更改为 0.565 后，我能够将额外的像素减少到每行 4 个。

在此之后尝试一些值，您也许能够消除多余的像素。

希望对您有所帮助！！

Answer 2

如果您要进行逐像素操作，那么您需要一个功能强大的环境，以便您可以看到（并理解）正在发生的事情。这是您的代码，已修改为运行缩放 40 倍：

int w = 32;
int h = 16; 
LineDot[] first = new LineDot[w];
void setup() {
  size(1280, 720);
  for (int i = 0; i<first.length; i++) {
    first[i]= new LineDot(i+1, (i+1)*0.5625);
  }
  frameRate(2);
  noStroke();
}
void draw() {
  background(0, 0, 0);
  scale(40);
  for (int i = 0; i<first.length; i++) {
    first[i].show(); 
    first[i].limitCheck();
    first[i].move();
  }
  stroke(128);
  strokeWeight(1/40);
  for(int i = 0; i <= h; i++) {
    line(0,i,w,i);
  }
}
class LineDot {
  float x;
  float y;
  float yspeed=-1;
  LineDot(float a, float b) {
    x=a;
    y=b;
  }
  float getX() {
    return x;
  }
  float getY() {
    return y;
  }
  void reverse() {
    yspeed*=-1;
  }
  void show() {
    fill(255);
    rect(x, y, 1, 1);
    fill(255,0,0);
    rect(x, y+yspeed, 1, 1);
  }
  void limitCheck() {
    if (y<1) {
      yspeed*=-1;
      //y = 1 - y;
    }
    if (y>h) {
      yspeed*=-1;
      //y = 2*h - y + 1;
    }
    fill(0,255,0);
    rect(x, y+yspeed, 1, 1);
  }
  void move() {
    y=y+yspeed;
  }
}

一些小修改：

红色：达到极限前的像素速度
绿色：像素在达到极限 f
frameRate(2)：将帧率降低到每秒 2 帧，以便我们可以看到发生了什么

问题不在于那个孤立的像素。如您所见，当触摸屏幕的顶部时 (y<1)，returns 行以一种奇怪的格式出现。这是因为像素成对低于 y = 1，但其中一个像素比另一个像素更远离 1。尽管如此，当移动它们时，你将两者都加 1，导致它们保持之前的阵型而不是切换。

如果您取消注释上面代码中的两行，您可以看到修复（它也修复了您的杂散像素）

y = 1 - y;

和

y = 2*h - y + 1;

我们实际上是在告诉它像素的位置也需要固定，而不仅仅是速度。我们实际上是在反转像素移动到 1 以下或超过 720 以反射的量，因此移动到 0.3（意味着它小于 1）的像素应该移动到 0.7，而 0.6 的像素应该移动到 0.4。

这是您的代码，其中添加了两行：

LineDot[] first = new LineDot[1280];
LineDot[] second = new LineDot[0];
void setup() {

  size(1280, 720);

  for (int i = 0; i<first.length; i++) {
    first[i]= new LineDot(i+1, (i+1)*0.5625);
  }
  for (int i = 0; i<second.length; i++) {
    second[i] = new LineDot(i+1, (i+30)*0.5625);
  }
}
void draw() {
  background(0, 0, 0);
  for (int i = 0; i<first.length; i++) {
    first[i].show(); 
    first[i].move();
  }
  for (int i = 0; i<second.length; i++) {
    second[i].show();
    second[i].move();
  }
}
class LineDot {
  float x;
  float y;
  float yspeed=-1;
  LineDot(float a, float b) {
    x=a;
    y=b;
  }
  float getX() {
    return x;
  }
  float getY() {
    return y;
  }
  void reverse() {
    yspeed*=-1;
  }
  void show() {
    stroke(255, 255, 255);
    line(x, y, x, y);
  }
  void move() {
    if (y<1) {
      yspeed*=-1;
      y = 1 - y;
    }
    if (y>720) {
      yspeed*=-1;
      y = 2*720 - y + 1;
    }
    y=y+yspeed;
  }
}

我正在使用底部的处理中断设置动画的行 "bounce"

The line i'm animating using processing breaks on the bottom "bounce"

processing