@@ -14,11 +14,45 @@ npm install algorithm-visualizer
1414##Usage
1515
1616``` js
17- const {LogTracer }= require (' algorithm-visualizer'
18-
19- const logTracer = new LogTracer (' Scratch Paper'
20-
21- logTracer .print (' Visualize your own algorithm here!'
17+ // import visualization libraries {
18+ const {Array2DTracer ,Layout ,LogTracer ,Tracer ,VerticalLayout }= require (' algorithm-visualizer'
19+ // }
20+
21+ // define tracer variables {
22+ const array2dTracer = new Array2DTracer (' Grid'
23+ const logTracer = new LogTracer (' Console'
24+ // }
25+
26+ // define input variables
27+ const messages = [
28+ ' Visualize'
29+ ' your'
30+ ' own'
31+ ' code'
32+ ' here!'
33+ ];
34+
35+ // highlight each line of messages recursively
36+ function highlight (line ) {
37+ if (line>= messages .length )return ;
38+ const message = messages[line];
39+ // visualize {
40+ logTracer .println (message);
41+ array2dTracer .selectRow (line,0 ,message .length - 1 );
42+ Tracer .delay ();
43+ array2dTracer .deselectRow (line,0 ,message .length - 1 );
44+ // }
45+ highlight (line+ 1 );
46+ }
47+
48+ (function main () {
49+ // visualize {
50+ Layout .setRoot (new VerticalLayout ([array2dTracer, logTracer]));
51+ array2dTracer .set (messages);
52+ Tracer .delay ();
53+ // }
54+ highlight (0 );
55+ })();
2256```
2357
2458Check out the[ API reference] ( https://algorithm-visualizer.github.io/tracers.js/ ) for more information.