literallylara

// More info on the boilerplate at https://xem.github.io/articles/#webgl_quest
<canvas style=width:512px;height:512px id=a><svg onload='for(i in g=a.getContext`webgl`)g[i[0]+i[6]]=g[i];with(g)vA(P=cP(),2,5120,bD(B=ET-3,Int8Array.of(B,setInterval(x=>dr(6,vertexAttrib1f(1,NO+=.01),3),A=s=>sS(S=cS(FN++),s)|ce(S)|aS(P,S)),!A(`${V="precision lowp float;varying vec4 C,U;mat2 rot(float a){float c=cos(a),s=sin(a);return mat2(c,-s,s,c);}void main(){"}vec3 c=vec3(0),p,q;float t=0.,d,e,f,j,T=U.x;for(float i=0.;i<99.;i++){p=vec3(C.xy*3.,t-3.);q=p;q.yz*=rot(T-.8);q.xy*=rot(T-.6);e=max(length(q.xz)-.15,abs(q.y)-2.);q=p;q.xz*=rot(.8);q.yz*=rot(.6);f=length(vec2(length(q.xy)-2.,q.z))-.1;q=p;q.xz*=rot(-.8);q.yz*=rot(.6);f=min(f,length(vec2(length(q.xy)-2.,q.z))-.1);d=min(e,f);t+=d;if(d<.01){c=vec3(1.3-step(length(p),1.));j=i;break;}}gl_FragColor=vec4(c-t*j/50.,1);}`),B,!eV(bf(B,cB())),!A(`attribute vec4 A,B;${V}gl_Position=C=A;U=B;}`)),B+82),lo(P),ug(P))'>

literallylara

<canvas id=c style="border:1px solid"><script>

A = new AudioContext
C = c.getContext`2d`

a = A.createAnalyser()
s = A.createScriptProcessor(a.fftSize=b=1024,t=0,1)

s.connect(a)
a.connect(A.destination)

literallylara

/**
 * Calculates an element's bounds to any given
 * layer/skin (content, padding, border margin).
 *
 * @author Lara Sophie Schütt (@literallylara)
 * @license MIT
 *
 * @param {HTMLElement} el
 * @param {object} [options]

literallylara

/**
 * Performs a recursive binary search upon the interval [min,max]
 * where `getDirection()` determines the direction of the current value
 * in relation to the reference value.
 *
 * Due to the properties of this algorithm,
 * reaching the solution will always take less than `⌈log₂(max-min)⌉` steps.
 *
 * @author Lara Sophie Schütt (@literallylara)
 * @license MIT

literallylara

/**
 * RIFF WAVE PCM file generator
 * Reference: www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html
 *
 * @author Lara Sophie Schütt (@literallylara)
 * @license CC0
 */

const DUR = 5     // duration in seconds
const NCH = 1     // number of channels

literallylara

export default {
    "aliceblue": "#f0f8ff",
    "antiquewhite": "#faebd7",
    "aqua": "#00ffff",
    "aquamarine": "#7fffd4",
    "azure": "#f0ffff",
    "beige": "#f5f5dc",
    "bisque": "#ffe4c4",
    "black": "#000000",
    "blanchedalmond": "#ffebcd",

literallylara

/**
 * Promise wrapper for web workers.
 *
 * @author Lara Sophie Schütt (@literallylara)
 * @license MIT
 */

export default class PromiseWorker
{
    constructor(fn, ...args)

literallylara

/**
 * MIDI parser for JavaScript
 * Reference: midi.org/specifications-old/item/the-midi-1-0-specification
 *
 * @author Lara Sophie Schütt (@literallylara)
 * @license MIT
 */

const MIDI = {}

literallylara

/**
 * Performs a fuzzy search on a list of values (haystack)
 * with the provided query (needle) and sorts each match
 * based on its scoring.
 *
 * TODO: adjust scoring logic
 *
 * @author Lara Sophie Schütt (@literallylara)
 * @license MIT
 *

literallylara

Index

• Preface
• The Setup
• The Shader
• The Sound

Preface

Together with HellMood we won this year's (2016) JS1K competition and thought this might be a good opportunity to write about the development process and my motivation behind it. If you're already familiar with JS1K, feel free to skip the next two paragraphs.