(20) Scrolling text - with a twist

Something very common in the old days of home computers was to make scrolling text of various kinds. Of course, back in those days it took good, optimized code to get something fancy. Today, with fast computers, object oriented coding one can make something fun with just a little code.

This example creates an object, a pxl (pixel) that has a x,y location and a xspeed, yspeed. We simply draw some text off the visible screen, "read" through all the non-black pixels and create a pxl object of each non-black pixel. Then we start moving all. When it "hits" a certain spot, the triangle, we bounce each pixel in a new direction and speed. Looks like this:



Load the code below into processing and see what you can change!

ArrayList p;

void setup() {
  int i, x, y;
  color c;
  size (853, 480);
  frameRate(60);

  p = new ArrayList();
  createText();

  background(0);
  stroke(255);
  fill(#ff0000);
  triangle(0, 0, 240, 240, 0, 480);
}

void createText() {
  PGraphics pg;
  int x, y;
  color c;

  pg = createGraphics(5000, 480);
  pg.beginDraw();

  pg.background(0);
  pg.fill(255);
  pg.stroke(255);
  pg.textSize(200);
  pg.textAlign(LEFT, CENTER);
  pg.text("<<< === Having fun with Processing! === >>> ", 0, 200);
  pg.endDraw();

  // Extract all non-black pixels, initial speed x=-6pxs/frame
  for (x=0; x<5000; x++) {
    for (y=0; y<480; y++) {
      if ((c=pg.get(x, y))!=color(0)) {
        p.add(new pxl(x+1000, int(y+100*sin(x/(PI*80))), 
          -65536*6, 0, c, color(0)));
      }
    }
  }
}

void draw () {
  int i;
  pxl a;

  stroke(255);
  fill(#ff0000);
  triangle(0, 0, 240, 240, 0, 480);
  for (i=0; i<p.size(); i=i+1) {
    a = (pxl) p.get(i);
    a.moveSpecial();
  }
}

// Class for pixels
class pxl 
{
  // Position and speed is x>>16 - lower 16-bits are "decimals"
  int x, y, xorg, yorg;
  int xtemp, ytemp, xtemp1, ytemp1, xtemp2, ytemp2; 
  int xspeed, yspeed;
  color c;                 // pixel color
  color b;                 // background color
  color c_temp;
  final int gravity = 00;
  final int resistance = 20;

  pxl(int _x, int _y, int _xspeed, int _yspeed, color _c, color _b) {
    // Remember all data
    x = xorg = _x<<16;
    y = yorg = _y<<16;
    xspeed = _xspeed;
    yspeed = _yspeed;
    c = _c;
    b = _b;
  }

  void display() {
    c_temp = get(x>>16, y>>16);
    set(x>>16, y>>16, c);
  }

  void hide() {
    set(x>>16, y>>16, b);
  }

  void updateSpeed() {
    long t = xspeed;
    xspeed = xspeed - ((int) (t * resistance)>>16);
    t = yspeed;
    yspeed = yspeed - ((int) (t * resistance)>>16);
    yspeed = yspeed + gravity;
    if (abs(xspeed)<100 && abs(yspeed)<100) {
      xspeed = int(random(-500000, 500000));
      yspeed = int(random(-500000, 500000));
    }
  }

  // 
  void moveSpecial() {
    int yt;
    hide();
    x = x + xspeed;
    y = y + yspeed;
    if ((x>>16)<=(240-abs(((y>>16)-240)))) {
      x = x - xspeed;
      y = y - yspeed;
      // change speeds 
      xspeed = int(random(1<<16, 10<<16));
      yt=int(-240+(y>>16))/48;

      yspeed = int(random((yt-5)<<16, (yt+5)<<16)) ;
      c = color(0xff, 0xff, int(random(0, 255)));
    }
    display();
    updateSpeed();
  }

  // Bounce when reaching an edge
  void moveBounce() {
    hide();
    x = x + xspeed;
    if (x<0 || x>(width<<16)) {
      x = x - xspeed;
      xspeed = -xspeed;
    } 
    y = y + yspeed;
    if (y<0 || y>(height<<16)) {
      y = y - yspeed;
      yspeed = -yspeed;
    } 
    display();
    updateSpeed();
  }
}

1 comment: