How do I animate a line from my draw() function? - processing

Question

I'm using Processing to create a learning experience project that allows users to join network components together. I have links using standard lines, but I want to be able to show a signal moving through the line if there is a valid connection. Think of the line as a network cable for example. Is there anyway I can animate this line?
void draw(){
pushStyle();
stroke(0);
line(from.x, from.y, to.x, to.y);
popStyle();
}
} //draw function in the 'link' file

Answer 1

Of course you can, but your question is a little broad. You do have a particular type of animation in mind? Endless possibilities ;)
The basic way to handle something like this in processing is to increase some animation-variables every frame (or use time management - though that is beyond the basics).
Because the animation-variables (for instance position or color) are changed every frame, the animation is different every frame. It's animated.
Below I give an example of a small green line traveling over a black 'connection' line. If you read through the code I think you'll figure it out. This should be incorporated in a nice 'connection' class for ease of use on a larger scale.
//set coordinates for connection-line
int fromX = 100;
int toX = 600;
int fromY = 100;
int toY = 200;
//copy start coordinate for animation
int animx = fromX;
int animy = fromY;
//determine animation stepsize
int stepX = (toX-fromX)/10;
int stepY = (toY-fromY)/10;
void setup() {
size(800, 300);
//set framerate so animation is not to fast
frameRate(5);
//draw thick lines
strokeWeight(10);
}
void draw() {
background(255);
// draw connection in black
stroke(0);
line(fromX, fromY, toX, toY);
//draw animation in green
stroke(0, 255, 0);
line(animx, animy, animx+stepX, animy+stepY);
// step animation for next frame
animx = animx+stepX;
animy = animy+stepY;
// check for reset (if the animation on the next frame is drawn outside the line)
if (animx+stepX > toX)
{
animx = fromX;
}
if (animy+stepY > toY)
{
animy = fromY;
}
}