2c:null 2d:["$","title",null,{"children":"cccbd | Max Bo | Observable"}] 32:T1670,

Excerpt of some useful API docs

API: Function signatures and parameters

function boot(       context,         buffer, data) // Called only once
function pre (       context, cursor, buffer, data) // Called every frame
function main(coord, context, cursor, buffer, data) // Called for every cell
function post(       context, cursor, buffer, data) // Called every frame

The coord object contains the coordinates of each cell as x and y or as index.

const coord = {
	x,      // column of the cell (starting top left)
	y,      // row of the cell
	index   // index of the cell
}

The context object contains timing and size informations.
NOTE: The font is defined via CSS; the runner has no knowledge about the font.
A monospaced font is assumed but not mandatory.
An important value (in case of fixed with fonts) is the aspect ratio of a single character: it allows to correct the geometry of the rendered images and is stored in the aspect field of the metrics object.
The function to calculate the metrics is exposed in the run.js module and is used internally to determine the correct aspect ratio of a single character.

const context = {
	frame,          // current frame
	time,           // current time in ms
	cols,           // number of columns of the rendering context
	rows,           // number of rows of the rendering context
	width,          // width of the container element (pixels)
	height,         // height of the container element (pixels)
	metrics : {
		aspect      // aspect ratio of a single char (monospaced font assumed)
		cellWidth,  // width of a char
		lineHeight, // computed, but should be the same as CSS
		fontFamily, // CSS string
		fontSize,   // Derived from CSS (pixels)
		_update()   // Function to recalc the metrics (slow!)
	},
	settings,       // The settings object
	runtime : {
		cycle,      // local cycle count of the script (for debugging purposes)
		fps         // average frame rate (measured)
	},
}

The cursor object contains basic information about an eventual input (pointer).
The x and y fields are fractional, for greater precision.

const cursor = {
	x,          // column of the cell hovered
	y,          // row of the cell hovered
	pressed,    // mouse or pointer is pressed (boolean)
	p : {       // cursor state of the previous frame
		x,
		y,
		pressed
	}

The buffer parameter is an array and represents the display state.
The buffer can be manipulated by hand in pre() and (especially) in post().
NOTE: The buffer is not cleared automatically.

The data parameter is a reference to an optional (user-)data object passed as argument in the runner and shared with all the functions. It can also be used to pass data around the functions.

API: The return object in main()

The main() function can return a single char. In this case the char will be rendered black on a white background, with ‘regular’ weight (400).
Optionally the function can also return an object with the following fields:

const out = {
	char,            // the char to be rendered
	color,           // the foreground color (CSS string)
	backgroundColor, // the background color (CSS string)
	fontWeight       // the font weight (CSS value or string)
				     // the online version supports these three weights:
				     // 300, 400, 700 (other values will 'snap' to those)
}

API: Settings

An optional settings object can be exported and allows to overwrite some of the default run settings (the default values are listed below).

export const settings = {
	// Base settings and the default values
	element         : null,   // target element for output
	cols            : 0,      // number of columns, 0 is equivalent to 'auto'
	rows            : 0,      // number of columns, 0 is equivalent to 'auto'
	once            : false,  // if set to true the renderer will run only once
	fps             : 30,     // fps capping
	renderer        : 'text', // can be 'canvas', anything else falls back to 'text'
	allowSelect     : false   // allows selection of the rendered element
	restoreState    : false,  // will store the 'state' object in local storage
	                          // this is handy for live-coding situations

	// CSS settings for the output element (will override document settings)
	backgroundColor : '',     // document CSS: 'white'
	color           : '',     // document CSS: 'black'
	fontFamily      : '',     // document CSS: 'Simple Console'
	fontSize        : '',     // document CSS: '1em'
	fontWeight      : '',     // document CSS: 400
	letterSpacing   : '',     // document CSS: 'initial'
	lineHeight      : '',     // document CSS: '19px'

	// Settings specific to 'canvas' renderer (may change in future):
	canvasOffset : {          // can also be set to 'auto'
		x : 0,
		y : 0
	},
	canvasSize : {            // canvas size in pixels
		width  : 0,
		height : 0
	}
}

33:T4fa,run({ program: { boot(context, buffer, data) { data.waves = "█▇▆▅▄▃▂▁"; data.magnitude = "123456789"; data.charset = sort.sort( "○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦", context.metrics.fontFamily, /*ascending=*/ true ); data.blocks = "█▓▒░"; }, main(coord, context, cursor, buffer, data) { const { frame, time, cols, rows, width, height } = context; const { x, y, index } = coord; const { t, ...n } = normalize({ coord, context }); const blockX = d3.range(x - 3, x + 3); const blockY = d3.range(5, 8); const blockXPosition = Math.floor(frame / 3) % cols; const isInBlock = blockX.includes(blockXPosition) && blockY.includes((y + x) % rows); return { char: isInBlock ? x.toString()[x.toString().length - 1] : pick({ value: n.x + 0.4 - t / 900, from: data.charset }), color: isInBlock ? "cyan" : "grey", backgroundColor: isInBlock ? "purple" : "black", fontWeight: 400 }; } }, settings: { fps: 60, once: false, rows: 16, once: !playVdc, fontSize: "16px", backgroundColor: "black" } })34:T75d,viewof schemeq = Inputs.select( new Map([ ["Blues (sequential, single-hue)", "blues"], ["Greens (sequential, single-hue)", "greens"], ["Greys (sequential, single-hue)", "greys"], ["Purples (sequential, single-hue)", "purples"], ["Reds (sequential, single-hue)", "reds"], ["Oranges (sequential, single-hue)", "oranges"], ["Turbo (sequential, multi-hue)", "turbo"], ["Viridis (sequential, multi-hue)", "viridis"], ["Magma (sequential, multi-hue)", "magma"], ["Inferno (sequential, multi-hue)", "inferno"], ["Plasma (sequential, multi-hue)", "plasma"], ["Cividis (sequential, multi-hue)", "cividis"], ["Cubehelix (sequential, multi-hue)", "cubehelix"], ["Warm (sequential, multi-hue)", "warm"], ["Cool (sequential, multi-hue)", "cool"], ["BuGn (sequential, multi-hue)", "bugn"], ["BuPu (sequential, multi-hue)", "bupu"], ["GnBu (sequential, multi-hue)", "gnbu"], ["OrRd (sequential, multi-hue)", "orrd"], ["PuBuGn (sequential, multi-hue)", "pubugn"], ["PuBu (sequential, multi-hue)", "pubu"], ["PuRd (sequential, multi-hue)", "purd"], ["RdPu (sequential, multi-hue)", "rdpu"], ["YlGnBu (sequential, multi-hue)", "ylgnbu"], ["YlGn (sequential, multi-hue)", "ylgn"], ["YlOrBr (sequential, multi-hue)", "ylorbr"], ["YlOrRd (sequential, multi-hue)", "ylorrd"], ["BrBG (diverging)", "brbg"], ["PRGn (diverging)", "prgn"], ["PiYG (diverging)", "piyg"], ["PuOr (diverging)", "puor"], ["RdBu (diverging)", "rdbu"], ["RdGy (diverging)", "rdgy"], ["RdYlBu (diverging)", "rdylbu"], ["RdYlGn (diverging)", "rdylgn"], ["Spectral (diverging)", "spectral"], ["BuRd (diverging)", "burd"], ["BuYlRd (diverging)", "buylrd"], ["Rainbow (cyclical)", "rainbow"], ["Sinebow (cylical)", "sinebow"] ]), { label: "Color scheme", value: "turbo" } )35:[{"id":"50425c6e5df03ec9009cc35f417a2fae416d6de0e1f142a0bf65561a3e616260e48d49f29caac2a02e75449c1eab38f6a202bcfa1428b68dc0a1452a89957bd9","href":"https://static.observableusercontent.com/files/50425c6e5df03ec9009cc35f417a2fae416d6de0e1f142a0bf65561a3e616260e48d49f29caac2a02e75449c1eab38f6a202bcfa1428b68dc0a1452a89957bd9","name":"sort.js","type":"application/javascript","lastModified":1652671080018.081,"size":1874},{"id":"3c4920da2445ea97e040d5ed8cdaf95286013e0e62b7ef04df67f7704a6f3da9dc44d476db123f44a26d4cb3a2d856dfbe85e9da1e4424fc7f4dbe104c657427","href":"https://static.observableusercontent.com/files/3c4920da2445ea97e040d5ed8cdaf95286013e0e62b7ef04df67f7704a6f3da9dc44d476db123f44a26d4cb3a2d856dfbe85e9da1e4424fc7f4dbe104c657427","name":"run.js","type":"application/javascript","lastModified":1650160516872.738,"size":12115}] 30:{"id":"b06f475b4ec2f852","slug":"cccbd","title":"cccbd","thumbnail":"4afd658cfa055177db6663eb11b4600e1903715c8586f30c2e61f202d80ff1e6","access_level":"public","create_time":"$D2022-04-14T06:32:08.471Z","update_time":"$D2025-10-07T23:52:38.988Z","view_time":null,"first_public_time":"$D2022-11-07T00:46:38.960Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"cc48459e4293f942","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":"starter_2024"},"version":1117,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null}],"members":[{"type":"individual","id":"5bb83a6e9493ea1d","login":"mjbo","name":"Max Bo","avatar_url":"https://avatars-next.observableusercontent.com/05ae9baba40510a4a22fa7d179f29dd4ffd85fcff859c54a31d42e166ae61dfa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"2cfc47277eb1ab6a","slug":"art","title":"Art","owner":{"id":"cc48459e4293f942","login":"mjbo","name":"Max Bo"}},"type":"notebook","body":{"title":"cccbd","cells":[{"id":89,"value":"# _cccbd_\n\n## _some small experiments using [play](https://play.ertdfgcvb.xyz/abc.html)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"play = import(await FileAttachment(\"run.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"https://play.ertdfgcvb.xyz/src/modules/sort.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"sort = import(await FileAttachment(\"sort.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function run({ program, settings }) {\n const pre = document.createElement(\"pre\");\n play.run(program, { element: pre, ...settings });\n return pre;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"/**\n * Computes some useful derived variables, that are less sensitive\n * to the dimensions of the grid that is being used.\n */\nfunction normalize({ coord, context }) {\n return {\n // 0 leftmost, 1 rightmost\n x: coord.x / context.cols,\n // 0 topmost, 1 bottomost\n y: coord.y / context.rows,\n // ms to s\n t: context.time / 1000,\n // index of char\n i: coord.y * context.cols + coord.x\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"## [tixy.land](https://tixy.land/) reproductions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"function red(char) {\n return { char, color: \"red\" }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"function white(char) {\n return { char, color: \"white\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"/**\n * Given a value between 0 and 1, picks the value progress-wise:\n * 0 being the first element, 1 being the last element. Negative\n * values have their absolute value taken.\n */\nfunction pick({ value, from }) {\n const v = Math.min(1, Math.abs(value));\n return from[Math.floor(v * from.length - 1)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"viewof playDialogueWithAnAlien = Inputs.button(\"Play/Pause\", {\n label: \"dialogue with an alien by @chiptune\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, i, ...n } = normalize({ coord, context });\n\n const value = (1 / 32) * Math.tan((t / 64) * x * Math.tan(i - x));\n const char = pick({ value, from: data.charset });\n return value > 0 ? red(char) : white(char);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playDialogueWithAnAlien,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"viewof playSineUp = Inputs.button(\"Play/Pause\", {\n label: \"sin up\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, ...n } = normalize({ coord, context });\n\n const value = Math.sin(y / 8 + t);\n const char = pick({ value, from: data.charset });\n return value > 0 ? white(char) : red(char);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playSineUp,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"viewof playSineLeft = Inputs.button(\"Play/Pause\", {\n label: \"sin left\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, ...n } = normalize({ coord, context });\n\n const value = Math.sin(x / 8 + t);\n const char = pick({ value, from: data.charset });\n return value > 0 ? white(char) : red(char);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playSineLeft,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"viewof playBloopBloopBloop = Inputs.button(\"Play/Pause\", {\n label: \"bloop bloop bloop v2\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, ...n } = normalize({ coord, context });\n\n const value = ((x - 32) * (y - 8) - Math.tan(t) * 8) / 32;\n const char = pick({ value, from: data.charset });\n return value > 0 ? white(char) : red(char);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playBloopBloopBloop,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"viewof playWaves = Inputs.button(\"Play/Pause\", {\n label: \"waves\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, i, ...n } = normalize({ coord, context });\n\n const value = Math.sin(x / 2) - Math.sin(x - t) - y + 6;\n const char = pick({ value, from: data.charset });\n return value > 0 ? white(char) : red(char);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playWaves,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"viewof playFireworks = Inputs.button(\"Play/Pause\", {\n label: \"fireworks by @p_malin and @aemkei\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n data.playing = false;\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, i, ...n } = normalize({ coord, context });\n\n const value =\n -0.4 / (Math.hypot(x - (t % 64), y - (t % 16)) - (t % 2) * 16);\n const char = pick({ value, from: data.charset });\n return value > 0 ? white(char) : red(char);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playFireworks,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"## [Sliderland](https://sliderland.blinry.org/) reproductions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"viewof playSineDrip = Inputs.button(\"Play/Pause\", {\n label: \"sin drip\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"run({\n program: {\n main(coord, context, cursor, buffer) {\n const { x, y } = coord;\n const { sin } = Math;\n const v = sin(x + context.frame / 70) * 15;\n return v > y ? \"▇\" : \"\";\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playSineDrip,\n backgroundColor: \"black\",\n color: \"white\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"viewof playEndlessPattern = Inputs.button(\"Play/Pause\", {\n label: \"endless pattern\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"run({\n program: {\n main(coord, context, cursor, buffer) {\n const { t, ...n } = normalize({ coord, context });\n\n return (t * n.x * 4) % 1 < n.y ? \"▇\" : \"\";\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playEndlessPattern,\n backgroundColor: \"black\",\n color: \"white\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"viewof playMunchingSquares = Inputs.button(\"Play/Pause\", {\n label: \"munching squares by @daniel_bohrer\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"run({\n program: {\n main(coord, context, cursor, buffer) {\n const { x, y } = coord;\n const { t, ...n } = normalize({ coord, context });\n\n return (x ^ context.frame % 64) / 63 < n.y ? \"◢\" : \"\";\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playMunchingSquares,\n backgroundColor: \"black\",\n color: \"white\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"## [textshader](https://textshader.com/) reproductions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":951,"value":"viewof playBouncer = Inputs.button(\"Play/Pause\", {\n label: \"Bouncer\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"run({\n program: {\n main(coord, context, cursor, buffer) {\n const { x, y } = coord;\n const { t, ...n } = normalize({ coord, context });\n\n const bounce = (v, P) => {\n const a = v % (2 * P);\n return a < P ? a / P : 2 - a / P;\n };\n const drawBall = (t) => {\n const x2 = bounce(t, 3) * 0.8 + 0.1;\n const y2 = bounce(t, 3.95) * 0.8 + 0.1;\n const dist = Math.pow(x - x2, 2) + Math.pow(y - y2, 2);\n return Math.max(1.1 - dist * 50, 0);\n };\n\n return drawBall(t) + drawBall(t + 1) + drawBall(t + 2);\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playBouncer,\n backgroundColor: \"black\",\n color: \"white\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"viewof playVdc = Inputs.button(\"Play/Pause\", {\n label: \"vdc\",\n value: false,\n reduce: (v) => !v\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"viewof playStream = Inputs.button(\"Play/Pause\", {\n label: \"vdc\",\n value: false,\n reduce: (v) => !v\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"schemes = ({\n categorical: [\n \"accent\",\n \"category10\",\n \"dark2\",\n \"paired\",\n \"pastel1\",\n \"pastel2\",\n \"set1\",\n \"set2\",\n \"set3\",\n \"tableau10\"\n ],\n diverging: [\n \"brbg\",\n \"prgn\",\n \"piyg\",\n \"puor\",\n \"rdbu\",\n \"rdgy\",\n \"rdylbu\",\n \"rdylgn\",\n \"spectral\"\n ],\n reversedDiverging: [\"burd\", \"buylrd\"],\n singleHue: [\"blues\", \"greens\", \"greys\", \"oranges\", \"purples\", \"reds\"],\n multiHue: [\n \"turbo\",\n \"viridis\",\n \"magma\",\n \"inferno\",\n \"plasma\",\n \"cividis\",\n \"cubehelix\",\n \"warm\",\n \"cool\",\n \"bugn\",\n \"bupu\",\n \"gnbu\",\n \"orrd\",\n \"pubu\",\n \"pubugn\",\n \"purd\",\n \"rdpu\",\n \"ylgn\",\n \"ylgnbu\",\n \"ylorbr\",\n \"ylorrd\"\n ],\n cyclical: [\"rainbow\", \"sinebow\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"cubehelix = Plot.plot({\n color: {\n scheme: schemeq,\n legend: true\n },\n marks: [Plot.cell(d3.range(0, 1.1, 0.1), { x: (d) => d, fill: (d) => d })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"viewof playCube = Inputs.button(\"Play/Pause\", {\n label: \"play cubehelix\",\n value: false,\n reduce: (v) => !v\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"cubehelix.scale(\"color\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"run({\n program: {\n boot(context, buffer, data) {\n data.charset = sort.sort(\n \"○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◴◵◶◷◯◦\",\n context.metrics.fontFamily,\n /*ascending=*/ true\n );\n },\n main(coord, context, cursor, buffer, data) {\n const { x, y } = coord;\n const { t, ...n } = normalize({ coord, context });\n\n const value = Math.sin(x / 8 + t) / 2 + 0.5;\n console.log(value);\n const char = pick({ value, from: data.charset });\n\n return {\n char,\n color: cubehelix.scale(\"color\").apply(value),\n backgroundColor: \"black\",\n fontWeight: 400\n };\n }\n },\n settings: {\n fps: 60,\n once: false,\n rows: 16,\n once: !playCube,\n fontSize: \"16px\",\n backgroundColor: \"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"