Last active
March 7, 2024 06:32
-
-
Save postspectacular/66d6b7c19612196c87cead5a6afd681d to your computer and use it in GitHub Desktop.
#HowToThing #004 Creating text-based plots to debug & visualize sequential data in a REPL-driven workflow. Here we're using https://thi.ng/dsp signal generators, but any numeric array or iterable will work...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // $ node | |
| // Welcome to Node.js v20.5.1. | |
| // Type ".help" for more information. | |
| const { barChartHStr, lineChartStr } = await import("@thi.ng/text-canvas"); | |
| const { adsr, osc, modOsc, rect, saw, sin, tri } = await import("@thi.ng/dsp"); | |
| // display line plot of 100 samples from an amplitude-modulate sine oscillator | |
| console.log(lineChartStr(20, modOsc(sin, 0.01, 0, osc(sin, 0.2)).take(100))); | |
| // ╭╮ ╭╮ ╭╮ ╭╮ | |
| // ╭╮ ││ ││ ╭╮ ╭╮ ││ ││ ╭╮ | |
| // ││ ││ ││ ││ ╭╮ ╭╮ ││ ││ ││ ││ | |
| // ╭╮ ││ ││ ││ ││ ││ ││ ││ ││ ││ ││ ╭╮ | |
| // ││ │╰╮ │╰╮ │╰╮ │╰╮ ││ ╭╮ ╭╮ ││ ╭╯│ ╭╯│ ╭╯│ ╭╯│ ││ | |
| // │╰╮ │ │ │ │ │ │ │ │ │╰╮ ││ ││ ╭╯│ │ │ │ │ │ │ │ │ ╭╯│ | |
| // ╭╮ │ │ │ │ │ │ │ │ │ │ │ │ ││ ││ │ │ │ │ │ │ │ │ │ │ │ │ ╭╮ | |
| // │╰╮ │ │ │ │ │ │ │ │ │ │ │ │ │╰╮ ╭╮ ╭╮ ╭╯│ │ │ │ │ │ │ │ │ │ │ │ │ ╭╯│ | |
| // │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │╰╮ ╭╯│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ | |
| // ╭─╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰╮ │ ╰╮ │ ╰╮ │ ╰╮ │ ╰╮ │ ╰╮ │ ╰╮ │ ╰╮ ╭─ | |
| // ╯ │ ╭╯ │ ╭╯ │ ╭╯ │ ╭╯ │ ╭╯ │ ╭╯ │ ╭╯ │ ╭╯ │ ╭╯ ╰────╯ ╰╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ | |
| // ╰╮│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │╭╯ | |
| // ╰╯ ╰╮│ │ │ │ │ │ │ │ │ │ │ │ │ ╰╮│ │╭╯ │ │ │ │ │ │ │ │ │ │ │ │ │╭╯ ╰╯ | |
| // ││ │ │ │ │ │ │ │ │ │ │ │ │ ╰╯ ╰╯ │ │ │ │ │ │ │ │ │ │ │ │ ││ | |
| // ││ ╰╮│ │ │ │ │ │ │ │ │ ╰╮│ │╭╯ │ │ │ │ │ │ │ │ │╭╯ ││ | |
| // ╰╯ ││ ╰╮│ ╰╮│ ╰╮│ ╰╮│ ││ ││ │╭╯ │╭╯ │╭╯ │╭╯ ││ ╰╯ | |
| // ││ ││ ││ ││ ││ ╰╯ ╰╯ ││ ││ ││ ││ ││ | |
| // ╰╯ ││ ││ ││ ││ ││ ││ ││ ││ ╰╯ | |
| // ╰╯ ││ ││ ╰╯ ╰╯ ││ ││ ╰╯ | |
| // ╰╯ ╰╯ ╰╯ ╰╯ | |
| // experiment with different waveform combinations (still AM oscillator)... | |
| // here carrier waveform is triangle, modulator a square w/ 4x frequency | |
| console.log(lineChartStr(10, modOsc(tri, 0.025, 0, osc(rect, 0.1)).take(100))); | |
| // ─╮ ╭╮ ╭─╮ ╭─╮ ╭╮ ╭ | |
| // ╰─╮ ╭─╯│ │ ╰─╮ ╭─╯ │ │╰─╮ ╭─╯ | |
| // ╰╮ ╭─╯ │ ╭╮ │ ╰╮ ╭╯ │ ╭╮ │ ╰─╮ ╭╯ | |
| // │ │ │ │╰─╮ ╭─╮ │ │ │ │ ╭─╮ ╭─╯│ │ │ │ | |
| // │ │ │ │ ╰────╯ │ │ │ │ │ │ ╰────╯ │ │ │ │ | |
| // │ ╭────╮ │ │ │ │ │ │ ╭────╮ │ │ │ │ │ │ ╭────╮ │ | |
| // │╭─╯ ╰─╯ │ │ │ │ │╭─╯ ╰─╮│ │ │ │ │ ╰─╯ ╰─╮│ | |
| // ╰╯ │ ╭╯ ╰─╮ │ ╰╯ ╰╯ │ ╭─╯ ╰╮ │ ╰╯ | |
| // │ ╭─╯ ╰─╮│ │╭─╯ ╰─╮ │ | |
| // ╰─╯ ╰╯ ╰╯ ╰─╯ | |
| // triangle modulated by sawtooth... | |
| console.log(lineChartStr(10, modOsc(tri, 0.025, 0, osc(saw, 0.1)).take(100))); | |
| // ╮ ╭╮ ╭╮ | |
| // ╰╮ ╭╮ │╰╮ ╭╯│ ╭╮ ╭ | |
| // ╰╮ ╭╯│ │ ╰╮ ╭╯ │ │╰╮ ╭╯ | |
| // ╰╮ ╭╯ │ │ ╰╮ ╭╯ │ │ ╰╮ ╭╯ | |
| // ╰╮ ╭╯ │ ╭─────────╮ │ ╰╮ ╭╯ │ ╭─────────╮ │ ╰─╮ ╭╯ | |
| // ╰──────────╯ │ ╭╯ ╰─╮ │ ╰──────────╯ │ ╭─╯ ╰╮ │ ╰─────────╯ | |
| // │ ╭╯ ╰╮ │ │ ╭╯ ╰╮ │ | |
| // │ ╭╯ ╰╮│ │╭╯ ╰╮ │ | |
| // │╭╯ ╰╯ ╰╯ ╰╮│ | |
| // ╰╯ ╰╯ | |
| // triangle vs triangle (modulated at 10x frequency) | |
| console.log(lineChartStr(10, modOsc(tri, 0.025, 0, osc(tri, 0.25)).take(100))); | |
| // ╮ ╭╮ ╭╮ | |
| // │ ╭╮ ╭╮ ││ ╭╮ ╭╮ ││ ╭╮ | |
| // │ ╭╮ ││ ││ ╭╮ ││ ╭╮ ││ ││ ╭╮ ││ ╭╮ ││ | |
| // │ ││ ╭╮ ││ ││ ╭╮ ││ ││ ││ ╭╮ ││ ││ ╭╮ ││ ││ ││ ╭╮ ││ | |
| // │ ││ ╭╮ ││ ││ ││ ││ ╭╮ ││ ││ ││ ╭╮ ││ ││ ││ ││ ╭╮╭╮ ││ ││ ││ ╭╮ ││ ││ | |
| // ╰╮╭╯╰╮╭╯╰────╯╰╮╭╯╰╮╭╯╰╮╭╯╰────╯╰╮╭╯╰╮╭╯╰╮╭╯╰╮╭╯╰────╯╰╮╭╯╰╮╭╯╰╮╭╯╰──╯╰╯╰╮╭╯╰╮╭╯╰╮╭╯╰╮╭╯╰────╯╰╮╭╯╰ | |
| // ││ ╰╯ ││ ││ ││ ╰╯ ││ ││ ╰╯ ││ ││ ││ ╰╯ ││ ││ ╰╯ ││ | |
| // ││ ╰╯ ││ ╰╯ ││ ││ ╰╯ ││ ╰╯ ││ ││ ╰╯ | |
| // ╰╯ ││ ╰╯ ╰╯ ││ ╰╯ ╰╯ | |
| // ╰╯ ╰╯ | |
| // sine & triangle... | |
| console.log(lineChartStr(10, modOsc(sin, 0.01, 0, osc(tri, 0.1)).take(100))); | |
| // ╭╮ ╭╮ ╭╮ | |
| // ││ ││ ╭╮ ││ ╭╮ | |
| // ╭╮ ╭╯╰╮ ╭╯╰╮ ╭╮ ╭╯╰╮ ╭╯╰╮ ╭╯╰╮ | |
| // ╭╯╰╮ │ │ │ │ ╭╯╰╮ ╭╮ │ │ │ │ │ │ ╭╮ | |
| // ──╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭──╮ ╭─╯╰─╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭─╯╰─╮ | |
| // ╰─╮╭─╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰─╮╭─╯ ╰─╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰╮ ╭╯ ╰─ | |
| // ╰╯ │ │ │ │ │ │ ╰╯ ╰╮╭╯ │ │ │ │ ╰╮╭╯ | |
| // ╰╮╭╯ ╰╮╭╯ ╰╮╭╯ ╰╯ ╰╮╭╯ ╰╮╭╯ ╰╯ | |
| // ╰╯ ││ ╰╯ ││ ││ | |
| // ╰╯ ╰╯ ╰╯ | |
| // same as bar chart | |
| console.log(barChartHStr(10, modOsc(sin, 0.01, 0, osc(tri, 0.1)).take(100))); | |
| // ▆ ▆ █ | |
| // █ █ █ █ █ | |
| // █ ▇██ ██▇ █ ▂█▄ ███ ▄█▂ | |
| // ▅██ ███ ███ ██▅ ▄ ███ ███ ███ ▄ | |
| // ▁▁ ▄███▆ █████ █████ ▆███▄ ▁▁ ▁▆██▃ ▆███▇ █████ ▇███▆ ▃██▆▁ | |
| // ███▇▂ ▅█████▂ ▁█████ █████▁ ▂█████▅ ▂▇███▇▇█████▄ ▂█████ █████ █████▂ ▄█████▇▇ | |
| // █████▄████████ ███████ ███████ ████████▄█████████████▃ ███████ ███████ ███████ ▃████████ | |
| // ██████████████▆ ▄███████ ███████▄ ▆███████████████████████ ████████▁ ███████ ▁████████ █████████ | |
| // ███████████████ █████████ █████████ ██████████████████████████████████ █████████ ███████████████████ | |
| // █████████████████████████ ████████████████████████████████████████████▂█████████▂███████████████████ | |
| // visualize a parametric ADSR envelope | |
| console.log(barChartHStr(10, adsr({ a: 25, acurve: 0.01, d: 25, s: 0.5, slen: 0, r: 100 }).take(100))); | |
| // ▂▃▄▅▆▆▇▇█████ | |
| // ▃▅▇███████████████ | |
| // ▅████████████████████▃ | |
| // ▄███████████████████████▇▃ | |
| // ▇███████████████████████████▇▅▄▂▂▁ | |
| // ███████████████████████████████████████████▇▇▇▇▇▇▇▄▂ | |
| // ██████████████████████████████████████████████████████▆▄▂ | |
| // ▇██████████████████████████████████████████████████████████▇▆▄▂▁ | |
| // ▃██████████████████████████████████████████████████████████████████▆▅▄▃▂▁▁ | |
| // █████████████████████████████████████████████████████████████████████████████▇▆▆▅▅▄▄▃▃▃▂▂▂▁▁▁▁ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment