DEV Community

Cover image for vscode scrubbing

vscode scrubbing

Maia Taewana
Visual live coding
・1 min read

scrubbing experiment

the cursor is locked during drag operation and is hidden

This is a small proof-of-concept for the VSCode extension. Scrubbing is a required part of live shader coding and it was important to have this part working with the current VSCode API and WebView limitations.

// This is the code that computes the new value
// from the scrubbing distance. It is meant to allow
// very small and very large changes in value.
// (POW: 5, BIG: 100, FAR: 400, MAX_RES: 6, POW_RES: 3, FAR_RES: 100)
const big = isFloat ? BIG : BIG * 10
const delta = Math.pow(dist / FAR, POW)
const value = base + delta * big
const resol = MAX_RES / Math.max(1, Math.abs(Math.pow(dist / FAR_RES, POW_RES)))
const [a,b] = value.toString().split('.')
element.innerHTML = isFloat ? `${a}.${(b || '0').slice(0, resol)}` : a
Enter fullscreen mode Exit fullscreen mode

Source: vscode-tuitui

Discussion (0)