Kinetic Line

I see an animated line inside a resizable box. To me the movement of the line is beautiful and the interaction between the line and the moving borders of the box is interesting. See for yourself.

I learned to code in the late 70's. Partly from my hardworking middle school Math teacher Mr. Dobbs but mainly from my father. Dad bought a TRS 80 Model II business computer and it was on this machine that I learned to write programs in the Beginner's All-Purpose Symbolic Instruction Code or BASIC. I loved everything about it. One of my all-time favorite bits of code dates from that time and goes like this:

10 REM THIS IS AN EXAMPLE OF AN ANIMATED MOVING LINE
20 GOTO40
30 SAVE"KINETIC/BAS":END
40 W=4 '  STEP
50 D=30 ' NUMBER OF BARS
60 K=2 '  ADD TO RND(W)
70 FORX=1TO4:Z=RND(W):NEXT
80 XI=RND(W);XJ=RND(W)
90 YI-RND(W):YJ=RHD(W)
100 X=RND(638)
110 X1=RND(638)
120 Y=RND(238)
130 Y1=RND(238)
140 DIM A(D,4)
150 I=1:E=2
160 CLS2
170 LINE(0,0)-(639,239),1,B
180 PRINT CHR$(2)
190 LINE(A(E,1),A(E.2))-(A(E,3),A(E,4)),0:LINE(X,Y)-(XI,Y1)
200 A(I,1)=X:A(I,2)=Y:A(I,3)=X1:A(I,4)=Y1
210 I=I+1:IF I>D THEN I=1
220 E=E+1:IF E>D THEN E=1
230 IF X+XI<1 OR X+XI>638 THEN XI=-1*SGN(XI)*(RND(W)+K)
240 IF X1+XJ<1 OR X1+XJ>638 THEN XJ=-1*SGN(XJ)*(RND(W)+K)
250 IF Y+YI<1 OR Y+YI>238 THEN YI=-l*SGN(YI)*(RND(W)+K)
260 IF Y1+YJ<1 OR Y1+YJ>238 THEN YJ=-1*SGN(YJ)*(RND(W)+K)
270 X=X+XI:Y=Y+YI:X1=X1+XJ:Y1=Y1+YJ
280 GOTO190

This project preserves the behavior of that code in JavaScript and adds a new feature to make it interactive. The original didn't feature a movable bounding box and this one does. 

The source code is available on GitHub.