Skip to content

Commit e4e1e8e

Browse files
authored
Update README.md
1 parent 0b22142 commit e4e1e8e

File tree

1 file changed

+39
-5
lines changed

1 file changed

+39
-5
lines changed

README.md

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -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

2458
Check out the [API reference](https://algorithm-visualizer.github.io/tracers.js/) for more information.

0 commit comments

Comments
 (0)