Este es el objeto de píxel que estoy usando para emular el movimiento lineal.

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;

 }

}

Así es como estoy creando la línea real usando 1280 píxeles y moviéndolos hacia arriba y hacia abajo a través de la ventana de 1280x720.

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();
 }

} Cuando la línea llega al límite inferior, por alguna razón, 1 píxel de aproximadamente 10 se separará la línea por un píxel y la línea se convertirá en esta línea extraña casi rayada como se muestra aquí  Línea rota Esto es lo que parece cuando la línea se divide en el primer rebote Primer rebote  Romper

0
Thomas McSwain 14 dic. 2016 a las 08:00

2 respuestas

La mejor respuesta

Si va a realizar una manipulación por píxel, entonces necesita un entorno capaz para que pueda ver (y comprender) lo que está sucediendo. Aquí está su código, modificado para ejecutarse escalado 40 veces:

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;
  }
}

Algunas modificaciones menores:

  • rojo: la velocidad de píxel antes de tocar los límites
  • verde: la velocidad que tendrá el píxel después de tocar los límites f
  • frameRate (2): reduce la velocidad de fotogramas a 2 fotogramas por segundo para que podamos ver lo que está pasando

El problema no es ese píxel solitario. Como puede ver, cuando se toca la parte superior de la pantalla (y <1), la línea vuelve en un formato extraño. Esto se debe a que los píxeles van por debajo de y = 1 en pares, pero uno de ellos está más alejado de 1 que el otro. A pesar de eso, al moverlos, agregas 1 a ambos, lo que hace que mantengan su formación anterior y no cambien.

Si quita el comentario de las dos líneas en el código anterior, puede ver la corrección (que también corrige su píxel perdido)

y = 1 - y;

Y

y = 2*h - y + 1;

Básicamente, le estamos diciendo que la ubicación del píxel también debe fijarse, y no solo la velocidad. Básicamente, estamos invirtiendo la cantidad que el píxel viajó por debajo de 1 o por encima de 720 para reflejar, por lo que un píxel que viajó a 0.3 (lo que significa que es menos de 1) debe moverse a 0.7, mientras que un píxel a 0.6 debe moverse a 0.4.

Este es su código con las dos líneas agregadas:

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;
  }
}
0
Kevin Workman 10 jul. 2017 a las 22:10
for(int i = 0;i<first.length;i++){
 first[i]= new LineDot(i+1,(i+1)*0.5625);  
}

El valor 0.5625 es la razón por la que esto está sucediendo.

Al cambiarlo a 0.565, pude reducir los píxeles adicionales a 4 por línea.

Pruebe algún valor después de esto y es posible que pueda erradicar los píxeles adicionales.

Espero que esto ayuda!!

0
Aakash Khatri 16 dic. 2016 a las 11:40