Skip to content

Instantly share code, notes, and snippets.

@postspectacular
Last active March 7, 2024 06:32
Show Gist options
  • Save postspectacular/66d6b7c19612196c87cead5a6afd681d to your computer and use it in GitHub Desktop.
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...
// $ 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