Update README.md

64json · web-flow · commit e4e1e8e29726 · 2019-06-30T23:22:00.000+09:00
diff --git a/README.md b/README.md
@@ -14,11 +14,45 @@ npm install algorithm-visualizer
 ## Usage
 
 ```js
-const { LogTracer } = require('algorithm-visualizer');
-
-const logTracer = new LogTracer('Scratch Paper');
-
-logTracer.print('Visualize your own algorithm here!');
+// import visualization libraries {
+const { Array2DTracer, Layout, LogTracer, Tracer, VerticalLayout } = require('algorithm-visualizer');
+// }
+
+// define tracer variables {
+const array2dTracer = new Array2DTracer('Grid');
+const logTracer = new LogTracer('Console');
+// }
+
+// define input variables
+const messages = [
+  'Visualize',
+  'your',
+  'own',
+  'code',
+  'here!',
+];
+
+// highlight each line of messages recursively
+function highlight(line) {
+  if (line >= messages.length) return;
+  const message = messages[line];
+  // visualize {
+  logTracer.println(message);
+  array2dTracer.selectRow(line, 0, message.length - 1);
+  Tracer.delay();
+  array2dTracer.deselectRow(line, 0, message.length - 1);
+  // }
+  highlight(line + 1);
+}
+
+(function main() {
+  // visualize {
+  Layout.setRoot(new VerticalLayout([array2dTracer, logTracer]));
+  array2dTracer.set(messages);
+  Tracer.delay();
+  // }
+  highlight(0);
+})();
 ```
 
 Check out the [API reference](https://algorithm-visualizer.github.io/tracers.js/) for more information.
