Cosmetics

src/core/fps.js

@@ -5,7 +5,7 @@
 */
 
 export default class FPS {
-	constructor(){
+	constructor() {
 		this.frames = 0
 		this.ptime = 0
 		this.fps = 0

src/core/textrenderer.js

@@ -7,7 +7,7 @@
 const backBuffer = []
 
 let cols, rows
-export function textRenderer(context, buffers, settings){
+export function textRenderer(context, buffers, settings) {
 
 	const element = context.parentInfo.element
 

src/modules/camera.js

@@ -10,14 +10,14 @@ Initializes a user-facing camera, returns a video element (initialised asynchron
 export default { init }
 
 let video
-function init(callback){
+function init(callback) {
 	// Avoid double init of video object
 	video = video || getUserMedia(callback)
 	return video
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
-function getUserMedia(callback){
+function getUserMedia(callback) {
 
 	// getUserMedia is not supported by browser
 	if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) {
@@ -40,7 +40,7 @@ function getUserMedia(callback){
 		} else {
 			video.src = window.URL.createObjectURL(stream)
 		}
-	}).catch(function(err){
+	}).catch(function(err) {
 		let msg = 'No camera available.'
 		if (err.code == 1) msg = 'User denied access to use camera.'
 		console.log(msg);

src/modules/canvas.js

@@ -42,7 +42,7 @@ const WHITE = { r:255, g:255, b:255, a:1, gray:1 }
 
 export default class Canvas {
 
-	constructor(sourceCanvas){
+	constructor(sourceCanvas) {
 		this.canvas = sourceCanvas || document.createElement("canvas")
 
 		// Initialize the canvas as a black 1x1 image so it can be used
@@ -67,7 +67,7 @@ export default class Canvas {
 
 	// -- Functions that act on the canvas -------------------------------------
 
-	resize(dWidth, dHeight){
+	resize(dWidth, dHeight) {
 		this.canvas.width = dWidth
 		this.canvas.height = dHeight
 		this.pixels.length = 0
@@ -120,7 +120,7 @@ export default class Canvas {
 
 	// -- Functions that act directly on the pixel array -----------------------
 
-	mirrorX(){
+	mirrorX() {
 		const w = this.canvas.width
 		const h = this.canvas.height
 		const buf = this.pixels
@@ -137,7 +137,7 @@ export default class Canvas {
 		return this
 	}
 
-	normalize(){
+	normalize() {
 		normalizeGray(this.pixels, this.pixels, 0.0, 1.0)
 		return this
 	}
@@ -150,14 +150,14 @@ export default class Canvas {
 	// -- Getters (pixel array) ------------------------------------------------
 
 	// Get color at coord
-	get(x, y){
+	get(x, y) {
 		if (x < 0 || x >= this.canvas.width) return BLACK
 		if (y < 0 || y >= this.canvas.height) return BLACK
 		return this.pixels[x + y * this.canvas.width]
 	}
 
 	// Sample value at coord (0-1)
-	sample(sx, sy, gray=false){
+	sample(sx, sy, gray=false) {
 		const w = this.canvas.width
 		const h = this.canvas.height
 
@@ -189,7 +189,7 @@ export default class Canvas {
 	}
 
 	// Read
-	loadPixels(){
+	loadPixels() {
 		// New data could be shorter,
 		// empty without loosing the ref.
 		this.pixels.length = 0
@@ -213,7 +213,7 @@ export default class Canvas {
 
 	// -- Helpers --------------------------------------------------------------
 
-	writeTo(buf){
+	writeTo(buf) {
 		if (Array.isArray(buf)) {
 			for (let i=0; i<this.pixels.length; i++) buf[i] = this.pixels[i]
 		}
@@ -223,7 +223,7 @@ export default class Canvas {
 	// Debug -------------------------------------------------------------------
 
 	// Attaches the canvas to a target element for debug purposes
-	display(target, x=0, y=0){
+	display(target, x=0, y=0) {
 		target = target || document.body
 		this.canvas.style.position = "absolute"
 		this.canvas.style.left = x + "px"
@@ -255,7 +255,7 @@ function getElementSize(source) {
 }
 
 
-function centerImage(sourceCanvas, targetCanvas, scaleX=1, scaleY=1, mode=MODE_CENTER){
+function centerImage(sourceCanvas, targetCanvas, scaleX=1, scaleY=1, mode=MODE_CENTER) {
 
 	// Source size
 	const s = getElementSize(sourceCanvas)
@@ -350,7 +350,7 @@ function paletteQuantize(arrayIn, arrayOut, palette) {
 }
 
 // Normalizes the gray component (auto levels)
-function normalizeGray(arrayIn, arrayOut, lower=0.0, upper=1.0){
+function normalizeGray(arrayIn, arrayOut, lower=0.0, upper=1.0) {
 	arrayOut = arrayOut || []
 
 	let min = Number.MAX_VALUE

src/modules/color.js

@@ -32,17 +32,17 @@ Colors in exported palettes are augmented to:
 */
 
 // Convert r,g,b,a values to {r,g,b,a}
-export function rgb(r,g,b,a=1.0){
+export function rgb(r,g,b,a=1.0) {
 	return {r,g,b,a}
 }
 
 // Convert r,g,b,a values to {r,g,b,a}
-export function hex(r,g,b,a=1.0){
+export function hex(r,g,b,a=1.0) {
 	return rgb2hex({r,g,b,a})
 }
 
 // Convert r,g,b,a values to 'rgb(r,g,b,a)'
-export function css(r,g,b,a=1.0){
+export function css(r,g,b,a=1.0) {
 	if (a === 1.0) return `rgb(${r},${g},${b})`
 	// CSS3 (in CSS4 we could return rgb(r g b a))
 	return `rgba(${r},${g},${b},${a})`}

src/modules/drawbox.js

@@ -137,7 +137,7 @@ const defaultTextBoxStyle = {
 import { wrap, measure } from './string.js'
 import { merge, setRect, mergeRect, mergeText } from './buffer.js'
 
-export function drawBox(text, style, buffers, target){
+export function drawBox(text, style, buffers, target) {
 
 	const s = {...defaultTextBoxStyle, ...style}
 
@@ -212,7 +212,7 @@ const defaultInfoStyle = {
 	borderStyle : 'round',
 }
 
-export function drawInfo(context, cursor, buffers, style){
+export function drawInfo(context, cursor, buffers, style) {
 
 	let info = ''
 	info += 'FPS         ' + Math.round(context.runtime.fps) + '\n'

src/modules/image.js

@@ -13,7 +13,7 @@ export default {
 	load
 }
 
-function load(path){
+function load(path) {
 
 	const source = document.createElement('canvas')
 	source.width = 1

src/modules/num.js

@@ -17,7 +17,7 @@ export default {
 }
 
 // Maps a value v from range 'in' to range 'out'
-export function map(v, inA, inB, outA, outB){
+export function map(v, inA, inB, outA, outB) {
 	return outA + (outB - outA) * ((v - inA) / (inB - inA))
 }
 
@@ -41,7 +41,7 @@ export function sign(n) {
 }
 
 // GLSL mix
-export function mix(v1, v2, a){
+export function mix(v1, v2, a) {
 	return v1 * (1 - a) + v2 * a
 }
 

src/modules/sdf.js

@@ -10,11 +10,11 @@ https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
 import { clamp, mix } from "./num.js"
 import { length, sub, dot, mulN } from "./vec2.js"
 
-export function sdCircle(p, radius){ // vec2, float
+export function sdCircle(p, radius) { // vec2, float
 	return length(p) - radius
 }
 
-export function sdBox(p, size){     // vec2, vec2
+export function sdBox(p, size) {     // vec2, vec2
 	const d = {
 		x : Math.abs(p.x) - size.x,
 		y : Math.abs(p.y) - size.y,

src/modules/sort.js

@@ -9,7 +9,7 @@ The fontFamily paramter needs to be set because it's used by the canvas element
 to draw the correct font.
 */
 
-export function sort(charSet, fontFamily, ascending = false){
+export function sort(charSet, fontFamily, ascending = false) {
 
 	const size = 30
 	const ctx = document.createElement('canvas').getContext('2d')
@@ -27,7 +27,7 @@ export function sort(charSet, fontFamily, ascending = false){
 	}
 
 	let out = []
-	for (let i=0; i<charSet.length; i++){
+	for (let i=0; i<charSet.length; i++) {
 		ctx.fillStyle = 'black'
 		ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
 		ctx.fillStyle = 'rgb(255,255,255)'

src/modules/string.js

@@ -8,7 +8,7 @@
 // Doesn’t break words and keeps trailing line breaks.
 // Counts lines and maxWidth (can be greater than width).
 // If no width is passed the function just measures the 'box' of the text.
-export function wrap(string, width=0){
+export function wrap(string, width=0) {
 
 	if (width==0) return measure(string)
 
@@ -21,7 +21,7 @@ export function wrap(string, width=0){
 	for (const p of paragraphs) {
 		const chunks = p.split(' ')
 		let len = 0
-		for(const word of chunks){
+		for(const word of chunks) {
 			// First word
 			if (len == 0) {
 				out += word

src/modules/vec2.js

@@ -165,7 +165,7 @@ export function neg(v, out) {
 }
 
 // Rotates a vector
-export function rot(a, ang, out){
+export function rot(a, ang, out) {
 	out = out || vec2(0, 0)
 
 	const s = Math.sin(ang)

src/programs/basics/coordinates_index.js

@@ -9,7 +9,7 @@
 const pattern = '|▁|▂|▃|▄|▅|▆|▇|▆|▅|▄|▃|▂'
 
 // Resize the browser window to modify the pattern.
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const i = coord.index % pattern.length
 	return pattern[i]
 }

src/programs/basics/coordinates_xy.js

@@ -5,7 +5,7 @@
 [header]
 */
 
-export function main(coord, context, cursor, buffers){
-	const char = String.fromCharCode((coord.y + coord.x) % 32 + 60)
+export function main(coord, context, cursor, buffers) {
+	const char = String.fromCharCode((coord.y + coord.x) % 62 + 65)
 	return char
 }

src/programs/basics/cursor.js

@@ -5,7 +5,7 @@
 [header]
 */
 
-export function main(coord, context, cursor){
+export function main(coord, context, cursor) {
 	// The cursor coordinates contain the cell
 	const x = Math.floor(cursor.x) // column of the cell hovered
 	const y = Math.floor(cursor.y) // row of the cell hovered
@@ -16,7 +16,7 @@ export function main(coord, context, cursor){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers, {
 		color : 'white', background : 'royalblue', shadowStyle : 'gray'
 	})

src/programs/basics/how_to_draw_a_circle.js

@@ -7,7 +7,7 @@
 
 import { length } from '/src/modules/vec2.js'
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 
 	// Used to fix screen aspect
 	const m = Math.min(context.cols, context.rows)
@@ -28,7 +28,7 @@ export function main(coord, context, cursor, buffers){
 
 // Draw some info
 import { drawBox } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	// Apply some rounding
 	const ar = cursor.pressed ? (''+context.metrics.aspect).substr(0, 8) : 1
 

src/programs/basics/how_to_draw_a_square.js

@@ -11,14 +11,14 @@ import { map } from '/src/modules/num.js'
 export const settings = { fps : 60 }
 
 // Function to measure a distance to a square
-export function box(p, size){
+export function box(p, size) {
 	const dx = Math.max(Math.abs(p.x) - size.x, 0)
 	const dy = Math.max(Math.abs(p.y) - size.y, 0)
 	// return the distance from the point
 	return Math.sqrt(dx * dx + dy * dy)
 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
     const t = context.time
     const m = Math.min(context.cols, context.rows)
     const a = context.metrics.aspect
@@ -51,7 +51,7 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers, {
 		color : 'white', background : 'royalblue', shadowStyle : 'gray'
 	})

src/programs/basics/name_game.js

@@ -15,7 +15,7 @@ export const settings = {
 
 const TAU = Math.PI * 2
 
-export function main(coord, context){
+export function main(coord, context) {
 	const a = context.frame * 0.05
 	const f = Math.floor((1 - Math.cos(a)) * 10) + 1
 	const g = Math.floor(a / TAU) % 10 + 1

src/programs/basics/performance_test.js

@@ -11,7 +11,7 @@ export const settings = { fps : 60 }
 
 const { cos } = Math
 
-export function main(coord, context, cursor){
+export function main(coord, context, cursor) {
 
 	// Hold the mouse button to switch the direction
 	// of the gradient and observe the drop in FPS.
@@ -39,6 +39,6 @@ export function main(coord, context, cursor){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }

src/programs/basics/simple_output.js

@@ -5,7 +5,7 @@
 [header]
 */
 
-export function main(){
+export function main() {
 	return '?'
 }
 

src/programs/basics/time_frames.js

@@ -9,13 +9,13 @@
 // by exporting a 'settings' object (see the manual for details).
 export const settings = { fps : 10 }
 
-export function main(coord, context){
+export function main(coord, context) {
 	const f = context.frame
 	return String.fromCharCode((coord.y + coord.x + f) % 32 + 65)
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers, {
 		color : 'white', background : 'royalblue', shadowStyle : 'gray'
 	})

src/programs/basics/time_milliseconds.js

@@ -12,7 +12,7 @@ const pattern = 'ABCxyz01═|+:. '
 // Character coordinates are passed in coord {x, y, index}.
 // The function must return a single character or, alternatively, an object:
 // {char, color, background, weight}.
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const t = context.time * 0.0001
 	const x = coord.x
 	const y = coord.y
@@ -28,7 +28,7 @@ import { drawInfo } from '/src/modules/drawbox.js'
 
 // This function is called after the main loop and is useful
 // to manipulate the buffers; in this case with a window overlay.
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	// An extra object can be passed to drawInfo to alter the default style
 	drawInfo(context, cursor, buffers, {
 		color : 'white', background : 'royalblue', shadowStyle : 'gray'

src/programs/camera/camera_double_res.js

@@ -22,7 +22,7 @@ pal.push(CSS3.white)
 pal.push(CSS3.black)
 pal.push(CSS3.lightblue)
 
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
 	const a = context.metrics.aspect
 
 	// The canvas is resized to the double of the height of the context
@@ -32,7 +32,7 @@ export function pre(context, cursor, buffers){
 	can.cover(cam, a * 2).quantize(pal).mirrorX().writeTo(buffers.data)
 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	// Coord also contains the index of each cell:
 	const idx   = coord.y * context.cols * 2 + coord.x
 	const upper = buffers.data[idx]
@@ -46,7 +46,7 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }
 

src/programs/camera/camera_gray.js

@@ -16,7 +16,7 @@ const can = new Canvas()
 
 const density = sort(' .x?▂▄▆█', 'Simple Console', false)
 
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
 	const a = context.metrics.aspect
 
 	// The canvas is resized so that 1 cell -> 1 pixel
@@ -27,7 +27,7 @@ export function pre(context, cursor, buffers){
 	can.cover(cam, a).mirrorX().normalize().writeTo(buffers.data)
 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	// Coord also contains the index of each cell:
 	const color = buffers.data[coord.index]
 	const index = Math.floor(color.gray * (density.length-1))
@@ -35,7 +35,7 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }
 

src/programs/camera/camera_rgb.js

@@ -26,7 +26,7 @@ pal.push(rgb(100, 255, 255))
 //pal.push(rgb(255, 182, 193))
 //pal.push(rgb(255, 255, 255))
 
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
 	const a = context.metrics.aspect
 
 	// The canvas is resized so that 1 cell -> 1 pixel
@@ -37,7 +37,7 @@ export function pre(context, cursor, buffers){
 	can.cover(cam, a).mirrorX().quantize(pal).writeTo(buffers.data)
 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	// Coord also contains the index of each cell
 	const color = buffers.data[coord.index]
 	// Add some chars to the output
@@ -51,6 +51,6 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }

src/programs/demos/donut.js

@@ -13,7 +13,7 @@ all the gaps.
 
 export const settings = { background : 'whitesmoke' }
 
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
 
 	const TAU = Math.PI * 2
 
@@ -78,7 +78,7 @@ export function pre(context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers, {
 		color : 'white', background : 'royalblue', shadowStyle : 'gray'
 	})

src/programs/demos/doom_flame.js

@@ -18,7 +18,7 @@ let cols, rows
 
 const noise = valueNoise()
 
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
 
 	// Shorthand
 	const buf = buffers.data
@@ -55,7 +55,7 @@ export function pre(context, cursor, buffers){
 	}
 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const u = buffers.data[coord.index]
 	if (u === 0) return // Inserts a space
 
@@ -125,6 +125,6 @@ function valueNoise() {
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }

src/programs/demos/doom_flame_full_color.js

@@ -32,7 +32,7 @@ const noise = valueNoise()
 
 let cols, rows
 
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
 
 	// Shorthand
 	const buf = buffers.data
@@ -69,7 +69,7 @@ export function pre(context, cursor, buffers){
 	}
 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 
 	const u = buffers.data[coord.index]
 	const v = flame[clamp(u, 0, flame.length-1)]
@@ -143,6 +143,6 @@ function valueNoise() {
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }

src/programs/demos/gol_double_res.js

@@ -48,7 +48,7 @@ export function pre(context, cursor, buffers) {
 		buffers.data[0] = []
 		buffers.data[1] = []
 		// Initialize with some random state
-		for (let i=0; i<len; i++){
+		for (let i=0; i<len; i++) {
 			const v = Math.random() > 0.5 ? 1 : 0
 			buffers.data[0][i] = v
 			buffers.data[1][i] = v
@@ -66,8 +66,8 @@ export function pre(context, cursor, buffers) {
 		const cx = Math.floor(cursor.x) // cursor has float values
 		const cy = Math.floor(cursor.y * 2)
 		const s = 5
-		for (let y=cy-s; y<=cy+s; y++){
-			for (let x=cx-s; x<=cx+s; x++){
+		for (let y=cy-s; y<=cy+s; y++) {
+			for (let x=cx-s; x<=cx+s; x++) {
 				const val = Math.random() < 0.5 ? 1 : 0
 				set(val, x, y, w, h, prev)
 			}
@@ -76,7 +76,7 @@ export function pre(context, cursor, buffers) {
 
 	// Update the automata
 	for (let y=0; y<h; y++) {
-		for (let x=0; x<w; x++){
+		for (let x=0; x<w; x++) {
 			const current = get(x, y, w, h, prev)
 			const neighbors =
 				get(x - 1, y - 1, w, h, prev) +
@@ -116,7 +116,7 @@ export function main(coord, context, cursor, buffers) {
 
 // Draw some info
 import { drawBox } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 
 	const buff = buffers.data[(context.frame + 1) % 2]
 	const numCells = buff.reduce((a, b) => a + b, 0)

src/programs/demos/mod_xor.js

@@ -11,7 +11,7 @@ const pattern = '└┧─┨┕┪┖┫┘┩┙┪━'
 
 export const settings = { weight: 700 }
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const t1 = Math.floor(context.frame / 2)
 	const t2 = Math.floor(context.frame / 128)
 	const x = coord.x
@@ -23,7 +23,7 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
     drawInfo(context, cursor, buffers, { shadowStyle : 'gray' })
 }
 

src/programs/demos/numbers.js

@@ -39,7 +39,7 @@ const spacingY = 1
 
 const bit = (n, k) => n >> k & 1
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 
 	const f = context.frame
 

src/programs/demos/sinsin_checker.js

@@ -14,7 +14,7 @@ const weights = [100, 700]
 
 const { floor, sin } = Math
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const t = context.time * 0.001
 	const x = coord.x - context.cols / 2
 	const y = coord.y - context.rows / 2
@@ -30,6 +30,6 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
     drawInfo(context, cursor, buffers, { shadowStyle : 'gray' })
 }

src/programs/demos/sinsin_wave.js

@@ -7,7 +7,7 @@
 
 const pattern = '┌┘└┐╰╮╭╯'
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const t = context.time * 0.0005
 	const x = coord.x
 	const y = coord.y
@@ -17,6 +17,6 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers, { shadowStyle : 'gray' })
 }

src/programs/header.txt

@@ -1,9 +1,4 @@
 ---------------------------------------------------------------------------
-Meta-Enter   : run
-Meta-Period  : show/hide editor
-Meta-S       : save a new version (locally, with permalink)
-Meta-Shift-U : upload a version to the server (needs author and title tags)
----------------------------------------------------------------------------
 Type ?help
      anywhere (or edit the previous line)
      to open the manual for an overview about the playground,
@@ -13,3 +8,8 @@ Type ?immediate on
 Type ?video night
      to switch to dark mode for the editor (day for light).
 ---------------------------------------------------------------------------
+Meta-Enter   : run
+Meta-Period  : show/hide editor
+Meta-S       : save a new version (locally, with permalink)
+Meta-Shift-U : upload a version to the server (needs author and title tags)
+---------------------------------------------------------------------------

src/programs/sdf/balls.js

@@ -12,7 +12,7 @@ const density = '#ABC|/:÷×+-=?*· '
 
 const { PI, sin, cos, exp, abs } = Math
 
-export function main(coord, context, cursor, buffer){
+export function main(coord, context, cursor, buffer) {
 	const t = context.time * 0.001 + 10
     const m = Math.min(context.cols, context.rows)
     const a = context.metrics.aspect
@@ -31,7 +31,7 @@ export function main(coord, context, cursor, buffer){
 	let d = Number.MAX_VALUE
 
 	const num = 12
-	for (let i=0; i<num; i++){
+	for (let i=0; i<num; i++) {
 		const r = map(cos(t * 0.95 * (i + 1) / (num + 1)), -1, 1, 0.1, 0.3)
 		const x = map(cos(t * 0.23 * (i / num * PI + PI)), -1, 1, -1.2, 1.2)
 		const y = map(sin(t * 0.37 * (i / num * PI + PI)), -1, 1, -1.2, 1.2)
@@ -47,7 +47,7 @@ export function main(coord, context, cursor, buffer){
 	return density[index]
 }
 
-function transform(p, trans, rot){
+function transform(p, trans, rot) {
 	const s = sin(-rot)
 	const c = cos(-rot)
 	const dx = p.x - trans.x

src/programs/sdf/circle.js

@@ -12,7 +12,7 @@ const density = sort('/\\MXYZabc!?=-. ', 'Simple Console', false)
 
 export const settings = { fps : 60 }
 
-export function main(coord, context, cursor, buffer){
+export function main(coord, context, cursor, buffer) {
 	const t  = context.time * 0.002
     const m = Math.min(context.cols, context.rows)
     const a = context.metrics.aspect

src/programs/sdf/cube.js

@@ -76,7 +76,7 @@ export function pre(context, cursor) {
 	}
 }
 
-export function main(coord, context, cursor){
+export function main(coord, context, cursor) {
 	const t = context.time * 0.01
 	const m = min(context.cols, context.rows)
     const a = context.metrics.aspect
@@ -111,7 +111,7 @@ export function main(coord, context, cursor){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }
 

src/programs/sdf/rectangles.js

@@ -10,7 +10,7 @@ import { sdBox, opSmoothUnion } from '/src/modules/sdf.js'
 
 let density = '▚▀abc|/:÷×+-=?*· '
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 
 	const t = context.time
     const m = Math.max(context.cols, context.rows)
@@ -40,7 +40,7 @@ export function main(coord, context, cursor, buffers){
 	return density[index]
 }
 
-function transform(p, trans, rot){
+function transform(p, trans, rot) {
 	const s = Math.sin(-rot)
 	const c = Math.cos(-rot)
 	const dx = p.x - trans.x
@@ -52,6 +52,6 @@ function transform(p, trans, rot){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }

src/programs/sdf/two_circles.js

@@ -10,7 +10,7 @@ import { sub, vec2 } from '/src/modules/vec2.js'
 
 const density = '#WX?*:÷×+=-· '
 
-export function main(coord, context, cursor, buffers){
+export function main(coord, context, cursor, buffers) {
 	const t = context.time
     const m = Math.min(context.cols, context.rows)
     const a = context.metrics.aspect
@@ -44,7 +44,7 @@ export function main(coord, context, cursor, buffers){
 }
 
 import { drawInfo } from '/src/modules/drawbox.js'
-export function post(context, cursor, buffers){
+export function post(context, cursor, buffers) {
 	drawInfo(context, cursor, buffers)
 }
 
@@ -52,7 +52,7 @@ export function post(context, cursor, buffers){
 // and pass it to the main function as a global or as object in buffers.data
 /*
 const p = vec2(0, 0)
-export function pre(context, cursor, buffers){
+export function pre(context, cursor, buffers) {
    	const m = Math.min(context.cols, context.rows)
     const a = context.metrics.aspect
 	p.x = 2.0 * (cursor.x - context.cols / 2) / m * a,

src/run.js

@@ -138,7 +138,7 @@ export function run(program, element, runSettings) {
 		// But a definition of the font via CSS is preferable and more flexible.
 		/*
 		var font = new FontFace('Simple Console', 'url(/css/fonts/simple/SimpleConsole-Light.woff)', { style: 'normal', weight: 400 })
-		font.load().then(function(f){
+		font.load().then(function(f) {
 			document.fonts.add(f)
 		  	element.style.fontFamily = font.family
 		  	element.fontVariantLigatures = 'none'
@@ -162,7 +162,7 @@ export function run(program, element, runSettings) {
 		document.fonts.ready.then((e) => {
 			// Run this three times
 			let count = 3
-			;(function __run_thrice__(){
+			;(function __run_thrice__() {
 				if (--count > 0) {
 					requestAnimationFrame(__run_thrice__)
 				} else {
@@ -343,7 +343,7 @@ export function run(program, element, runSettings) {
 // -- Helpers ------------------------------------------------------------------
 
 // Disables selection for an HTML element
-function disableSelect(el){
+function disableSelect(el) {
 	el.style.userSelect = 'none'
 	el.style.webkitUserSelect = 'none' // for Safari on mac and iOS
 	el.style.mozUserSelect = 'none'    // for mobile FF
@@ -359,7 +359,7 @@ function enableSelect(el) {
 }
 
 // Copies the content of an element to the clipboard
-export function copyContent(el){
+export function copyContent(el) {
 	// Store selection default
 	const selectionEnabled = !el.dataset.selectionEnabled == 'false'
 
@@ -410,7 +410,7 @@ export function calcMetrics(el) {
 }
 
 // Returns some CSS info
-function getCSSInfo(el){
+function getCSSInfo(el) {
 	const style = window.getComputedStyle(el)
 	return Object.freeze({
 		fontFamily : style.getPropertyValue('font-family'),

tests/benchmark.html

@@ -41,7 +41,7 @@
 
 		fun = functions[step]
 
-		function loop(t){
+		function loop(t) {
 
 			const af = requestAnimationFrame(loop)
 
@@ -79,8 +79,8 @@
 		// Direct write to innerHTML
 		function baseline(target, frame) {
 			let html = ''
-			for (let j=0; j<rows; j++){
-				for (let i=0; i<cols; i++){
+			for (let j=0; j<rows; j++) {
+				for (let i=0; i<cols; i++) {
 					const idx = (i + j * rows + frame) % chars.length
 					html += chars[idx]
 				}
@@ -95,8 +95,8 @@
 		// Direct write to innerHTML
 		function a(target, frame) {
 			let html = ''
-			for (let j=0; j<rows; j++){
-				for (let i=0; i<cols; i++){
+			for (let j=0; j<rows; j++) {
+				for (let i=0; i<cols; i++) {
 					const idx = (i + j * rows + frame) % chars.length
 					html += `<span>${chars[idx % chars.length]}</span>`
 				}
@@ -111,8 +111,8 @@
 		// Direct write to innerHTML
 		function b(target, frame) {
 			let html = ''
-			for (let j=0; j<rows; j++){
-				for (let i=0; i<cols; i++){
+			for (let j=0; j<rows; j++) {
+				for (let i=0; i<cols; i++) {
 					const idx = (i + j * rows + frame)
 					const style = `color:${colors[idx % colors.length]};background-color:${colors[(idx+1) % colors.length]};`
 					html += `<span style="${style}">${chars[idx % chars.length]}</span>`
@@ -126,7 +126,7 @@
 
 		// Direct write to innerHTML of each span
 		// Re-use of <spans>
-		const r = new Array(rows).fill(null).map(function(e){
+		const r = new Array(rows).fill(null).map(function(e) {
 			const span = document.createElement('span')
 			span.style.display = 'block'
 			return span
@@ -135,23 +135,23 @@
 		function c(target, frame) {
 			if (frame == 0) {
 				target.innerHTML = ''
-				for (let j=0; j<rows; j++){
+				for (let j=0; j<rows; j++) {
 					target.appendChild(r[j])
 				}
 			}
-			// for (let j=0; j<rows; j++){
+			// for (let j=0; j<rows; j++) {
 			// 	r[j].style.display = 'none'
 			// }
-			for (let j=0; j<rows; j++){
+			for (let j=0; j<rows; j++) {
 				let html = ''
-				for (let i=0; i<cols; i++){
+				for (let i=0; i<cols; i++) {
 					const idx = (i + j * rows + frame)
 					const style = `color:${colors[idx % colors.length]};background-color:${colors[(idx+1) % colors.length]};`
 					html += `<span style="${style}">${chars[idx % chars.length]}</span>`
 				}
 				r[j].innerHTML = html
 			}
-			// for (let j=0; j<rows; j++){
+			// for (let j=0; j<rows; j++) {
 			// 	r[j].style.display = 'block'
 			// }
 		}
@@ -166,9 +166,9 @@
 
 		function d(target, frame) {
 			p.innerHTML = ''
-			for (let j=0; j<rows; j++){
+			for (let j=0; j<rows; j++) {
 			//	let html = ''
-				for (let i=0; i<cols; i++){
+				for (let i=0; i<cols; i++) {
 					const idx = (i + j * rows + frame)
 					const style = `color:${colors[idx % colors.length]};background-color:${colors[(idx+1) % colors.length]};`
 					p.innerHTML += `<span style="${style}">${chars[idx % chars.length]}</span>`
@@ -179,7 +179,7 @@
 			}
 			target.innerHTML = ''
 			target.appendChild(fragment)
-			// for (let j=0; j<rows; j++){
+			// for (let j=0; j<rows; j++) {
 			// 	r[j].style.display = 'block'
 			// }
 		}

tests/browser_bugs/error_listener_bug.html

@@ -42,7 +42,7 @@
 	</script>
 
 	<script>
-		for(let b=0; b<2 b++){} // CAPTURED
+		for(let b=0; b<2 b++) {} // CAPTURED
 	</script>
 
 	<!-- module -->
@@ -53,7 +53,7 @@
 	</script>
 
 	<script type="module">
-		for(let a=0; a<2 a++){} // NOT CAPTURED (but still displayed in the console)
+		for(let a=0; a<2 a++) {} // NOT CAPTURED (but still displayed in the console)
 	</script>
 
 </body>

tests/multi.html

@@ -40,7 +40,7 @@
 		run(prog2, pre[2]).catch(errorHandler)
 		run(prog3, pre[3]).catch(errorHandler)
 
-		function errorHandler(e){
+		function errorHandler(e) {
 			console.warn(e.message)
 			console.log(e.error)
 		}

tests/promise_chain.html

@@ -29,7 +29,7 @@
 		function b() {
 
 	    		c( // <---
-				function c(){
+				function c() {
 	    			setTimeout(() => resolve("b"), 1000)
 	    		}
 

tests/single.html

@@ -29,7 +29,7 @@
 	<script type="module">
 		import { run } from '/src/run.js'
 		import * as program from '/src/programs/basics/time_milliseconds.js'
-		run(program, document.querySelector('pre')).catch(function(e){
+		run(program, document.querySelector('pre')).catch(function(e) {
 			console.warn(e.message)
 			console.log(e.error)
 		})