Overscan character-cell instruments

OVERSCANUI KIT

The cheapest instrument class there is, held to the same protocol as the drawn ones. Every mark below is a character in the element's own resolved face. Nothing is drawn, nothing is a canvas, and the whole thing costs about what a span costs — which is the point, because the cost of a screen was measured as living entirely in its instruments. There is one rule these have that the drawn instruments do not: the glyph ladder is itself an instrument, so it is measured before it is trusted. A face without U+2581..U+2588 substitutes, and a substituted glyph reads as a level it is not.

Sparkline

plaingapsdecimatedpast the axisno reading

demo/ascii.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-spark
  min="0"
  max="100"
  cells="40"
></ov-spark>

const values = await fetch('./data/ascii-0-values.json').then(r => r.json())
document.querySelector('ov-spark').values = values

import { OvSpark } from 'overscan/react'

const values = await fetch('./data/ascii-0-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

import { OvSpark } from 'overscan/vue'

const values = await fetch('./data/ascii-0-values.json').then(r => r.json())

<OvSpark
  :values="values"
  min="0"
  max="100"
  cells="40"
/>

import OvSpark from 'overscan/svelte/OvSpark.svelte'

const values = await fetch('./data/ascii-0-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

terminal

variation: values (40 points, 9 dropped)

import 'overscan'
import 'overscan/overscan.css'

<ov-spark
  min="0"
  max="100"
  cells="40"
></ov-spark>

const values = await fetch('./data/ascii-1-values.json').then(r => r.json())
document.querySelector('ov-spark').values = values

import { OvSpark } from 'overscan/react'

const values = await fetch('./data/ascii-1-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

import { OvSpark } from 'overscan/vue'

const values = await fetch('./data/ascii-1-values.json').then(r => r.json())

<OvSpark
  :values="values"
  min="0"
  max="100"
  cells="40"
/>

import OvSpark from 'overscan/svelte/OvSpark.svelte'

const values = await fetch('./data/ascii-1-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

industrial

variation: values (2000 points)

import 'overscan'
import 'overscan/overscan.css'

<ov-spark
  min="0"
  max="100"
  cells="40"
></ov-spark>

const values = await fetch('./data/ascii-2-values.json').then(r => r.json())
document.querySelector('ov-spark').values = values

import { OvSpark } from 'overscan/react'

const values = await fetch('./data/ascii-2-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

import { OvSpark } from 'overscan/vue'

const values = await fetch('./data/ascii-2-values.json').then(r => r.json())

<OvSpark
  :values="values"
  min="0"
  max="100"
  cells="40"
/>

import OvSpark from 'overscan/svelte/OvSpark.svelte'

const values = await fetch('./data/ascii-2-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

cyber

variation: values (40 points)

import 'overscan'
import 'overscan/overscan.css'

<ov-spark
  min="0"
  max="100"
  cells="40"
></ov-spark>

const values = await fetch('./data/ascii-3-values.json').then(r => r.json())
document.querySelector('ov-spark').values = values

import { OvSpark } from 'overscan/react'

const values = await fetch('./data/ascii-3-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

import { OvSpark } from 'overscan/vue'

const values = await fetch('./data/ascii-3-values.json').then(r => r.json())

<OvSpark
  :values="values"
  min="0"
  max="100"
  cells="40"
/>

import OvSpark from 'overscan/svelte/OvSpark.svelte'

const values = await fetch('./data/ascii-3-values.json').then(r => r.json())

<OvSpark
  values={values}
  min="0"
  max="100"
  cells="40"
/>

antiseptic

esper

neo

machina

holo

aegis

vector

plain — forty samples into forty cells. one glyph per reading
gaps — nine missing. the gap is full height and broken, so it cannot be read as a low sample
decimated — 2000 samples into 40 cells. the survivor of each bucket is the sample furthest from its median, so the spikes live
past the axis — marked at the boundary, never clipped to it
no reading — dashes, never a flat line at zero

Cell gauge

plainlowfulloverno reading