Never ending animation from right to left?

callmepaul

Hello,

I am pretty new to processing. What I am trying to do is to create an animation of some kind of a continuous random crack which will go from right to left in the screen on a never ending flow.

I can't get my head around how to draw outside the bounds of the screen and then make it appear on the screen moving what was previously on the screen outside of it.

If anyone can point me in the right direction I will really appreciate it.

Thanks!

KevinWorkman

I'm not sure what you mean. Do you want the crack to reappear on the right side of the screen, or do you want it to appear like the screen is following the crack?

Can you post the code you have so far in the form of an MCVE?

GeorgeRoland

The sketch window's coordinates are from (0, 0) in the upper left corner to whatever you have set for width and height in the size() function. You can draw outside the screen on the left and top by using the - sign. For example, if you draw a circle like this: ellipse(-100, -100, 30, 30); the thirty-pixel-wide ellipse will not be visible because it is outside of the sketch window.

The general idea is to take your shape and subtract x values each frame to get it to move right to left across the sketch window. Then you need some kind of test to check whether it has moved far enough left. When that test is true, you reset the x coordinate to the right.

Try this:

int xPos = 350; // outside the sketch window for this size graphic
void setup(){
size(300, 300);
}

void draw(){
  background(0);
  ellipse(xPos, 150, 30, 30);
  xPos -=2;
  // here's the test and reset
  if(xPos < -20){
    xPos = 350;
  }
}

KevinWorkman

@GeorgeRoland We aren't sure that's what the OP is looking for, so please refrain from offering full-code solutions.

callmepaul

Thanks @GeorgeRoland and @KevinWorkman!

First of all thanks for the quick answers and excuse my english.

Kevin, what I am trying to do is like a timeline which will travel from the right of the screen to the left and then disappear when it is out of bounds. This timeline will be infinite.

Think of it as an electrocardiogram but with a 'crack' design.

I understand now that I can 'draw' outside of what is visible, so maybe I can use that logic to draw the upcoming 'crack' and then move the whole line from right to left to make that crack appear on the screen and in that way achieve the electrocardiogram type animation.

I hope it is a little bit clearer now with the electrocardiogram example. I will make some tests using the logic George shared and see if I can make something work.

KevinWorkman

I don't think that the logic that George gave you is what you're looking for.

If I were you, I would break your problem down into smaller steps. Step one: can you draw the crack without having it move? You might do this by creating an ArrayList of points, and then displaying those points as lines. You might also draw to a PGraphics, and then display that PGraphics in your draw() function.

Once you get that part working, then worry about animating it. If you go with the ArrayList approach, you might animate it by adding and removing points to that ArrayList. If you go with the PGraphics approach, you might animate it by moving the image and creating a new one that slides in as the first one leaves the screen.

There are a number of ways to do this, so your first step is figuring out which approach you want to take, then breaking the problem down into smaller steps and attempting those steps one at a time.

GeorgeRoland

callmepaul,

One question I have is whether you are trying to code the cracked line, say with line() functions, or whether you have a graphic you want to move on and off the screen, like the ellipse I used in the example.

You can, for example, create a long graphic that is, say, 1000 pixels wide and use a technique similar to that I showed with the ellipse to "scroll" that graphic.

callmepaul

Thanks again. Yes. I was working with the crack in parallel but couldn't get my head around how to move it.

George, I am coding the cracked line. I am looking at some examples on how some trees are drawn in processing and going from there. The idea is to make it random looking and each point should be different from the other. I am working on it in parallel but I couldn't think of a way to move the whole thing.

I think I will go with the option Kevin suggested of creating an ArrayList and adding elements to the end of the array when it is approaching the screen.

I found this example useful but instead of looping as it is now I will use the array to make it 'never ending' and creating new 'cracks' each time the line approaches the bounds of the screen.

int counter; 
void setup()
{
  smooth();
  size(800,600);
  counter=0; 
}
void draw()
{
  if(counter==width+120)
  {
    counter=0;
  }
  else
  {
    counter+=1; //Change for speed
    background(255);
  }
  drawECG(counter);
}
void drawECG(float center)
{
  strokeWeight(3);
  noFill();

  float ry=height/2;

  float anchor_y1=ry;
  float anchor_y2=ry;

  float cx1=center-70.0;
  float cy1=ry-150.0;

  float cx2=center-70.0;
  float cy2=ry+200.0;

  float startx=center-170;
  float endx=center+170;
  float enddiff = abs(endx-width);

  bezier(0.0,ry,startx/3,ry,startx/2,ry,startx,ry);

  bezier(startx,anchor_y1,cx1,cy1,cx2-50,cy2,center-30,ry);
  bezier(center-30,ry,center,ry-40,center+20,ry-450,center+60,ry);
  bezier(center+60,ry,center+80,ry+100,center+120,ry-70,endx,ry);

  bezier(width,ry,width-10,ry,width-15,ry,endx,ry);

}

Thanks again for all the help.

KevinWorkman

Using the ArrayList approach is probably what I would do. You might also use PGraphics instead, it's really up to you.

Try out the approach you choose and post your updated code if you get stuck again. Good luck!