make curtain like behaviour in drawing of lines

Question

I am new to Processing.js and need a little bit support with this issue. I have made a HTML-Canvas animation where I have lines with a curtain like behavior which can be seen here:

Click

this is made with a canvas plugin called Paper.js I now want to get similar effect on processing but don't really know how to figure it out. My attempt was:

float x;
float y;

void setup() {
   size(1024, 768);
   strokeWeight(2);
   background(0, 0, 0);
}

void mouseMoved() {
   x = mouseX;
   y = mouseY;
}

void draw() {
   background(0);
   line(50, 50, x += x - x/5, y += y - y/5);
   stroke(255, 255, 255);
   line(50, 700, x += x - x/15, y += y - y/15);

   stroke(255, 255, 255);
   line(75, 50, x += x - x/25, y += y - y/25);
   stroke(255, 255, 255);
   line(75, 700, x += x - x/35, y += y - y/35);

   // and so on, would create it within a loop
}

So what I am trying to do is basically get the same effect which I have done in HTML and adapt it in Processing.js.

Thanks in advance.

Answer 1

I'd strongly recommend ignoring the paper.js and reimplementing this properly. We're seeing a sequence of lines that connect to a historical line of coordinates, based on mouse position, so let's just implement that:

class Point {
  float x, y;
  Point(float _x, float _y) { x=_x; y=_y; }}

// our list of historical points
ArrayList<Point> points;

// the horizontal spacing of our lines has fixed interval
float interval;

// how many lines do we want to draw?
int steps = 50;

void setup() {
  size(500, 500);
  // initialise the "history" as just the midpoint
  points = new ArrayList<Point>();
  for (int i=0; i<steps; i++) {
    points.add(new Point(width/2, height/2));
  }
  // compute the horizontal interval, because it's
  // width-dependent. Never hard code dependent values.
  interval = width/(float)steps;
  // the lower we set this, the slower it animates.
  frameRate(60);
}

void draw() {
  // white background, black lines
  background(255);
  stroke(0);
  // for each historic point, draw two
  // lines. One from height 0 to the point,
  // another from height [max] to the point. 
  Point p;
  for (int i=0; i<steps; i++) {
    p = points.get(i);
    line(interval/2 + i*interval, 0, p.x, p.y);
    line(interval/2 + i*interval, height, p.x, p.y);
  }

  // when we move the mouse, that counts as a new historic point
  points.remove(0);
  points.add(new Point(mouseX, mouseY));
}

Sketch running in the browser: http://jsfiddle.net/M2LRy/1/

(You could speed this up by using a round-robin array instead of an ArrayList, but ArrayLists are pretty convenient here)