It's true, the windows one didn't fade. But the basic idea is that all the pixel values are just in an array. You draw the whole array to the screen on each frame. So each frame, you run through that array and divide all the color values by 2 for example, and any which are less than a certain threshold you just change to zero. Then you fill the specific points in the array where you want the next line to be drawn. The net effect is to fade out the old lines over time. You don't need to keep a list of past positions, or have any objects ;)
Got it. That makes sense but it’d never occurred to me to think about it before. I guess you could use an array N items long, with 4 values (x1,y1,x2,y2) in each element, and just keep a pointer to the oldest entry, incrementing it each time.
So, each ghost of a line is not stored at all. The moving line is stored as an object like you suggest. Each line has two Velocity-Point objects (which have 4 parameters: x,y location of the endpoint and x,y velocity of that point). So really a line can be viewed as an array with 8 values, which lives for the length of the whole program. I personally do kinda like object oriented code so it's helpful to think of the points and the velocity separately. But there's just one pointer to these values. The values are changed over time in that single Line object, and at each frame they're projected to the display buffer.
The display buffer is actually a flat 1D array which also lives through the whole program (mostly) where each 4 sequential values are the r,g,b,a for a single pixel. You don't ever need to copy that array unless you're doing something fancy with window resizing. A simple function translates any x,y coordinate pair (such as a point on a line) into the correct location in the flat array space, and you just modify that array as you go along. When you're done doing things to those values, you just overwrite the entire canvas with that 1D array in a single call.
In fact, the screen buffer array in this case was probably unnecessary, since <canvas> can easily let you get and set the values of individual pixels, draw lines, etc. But I wanted to do it in a flat array to reduce the number of draw calls to one per frame, and also to not overly bind my code to any particular display method.
mmm... that sounds fun! I'll have to think about how that works. I say never look anything up until you've exhausted everything you can come up with ;)
