"name":"Presque Vu","description":"Presque Vu (French for “almost seen”) describes the feeling of being on the verge of remembering or realising something, just out of reach. This generative audiovisual piece explores that sensation, evoking the emotional tension of near-recollection through abstract soundscapes and shifting imagery.\n\nThe piece was created using vanilla JavaScript, Web Audio API and WebGL. Follow the link then click to start. For best results use headphones. If you're using a phone please turn the 'ringer' on and turn the sound down slightly."<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10`" preserveAspectRatio="xMidY " @0
-anchor="middl #que Vu</text>
</svg>
<!DOCTYPE html><@ead><meta charset="UTF-8 title>Presque Vu</body{margin:0;overflow:hidden;}canvas{display:block;}</"width="800"heigh tex-shader" typ 8">attribute vec4 aV`7Position;void main(@ mediump !t at;uniform#define S(a,b,t) smoothstepr=cross@i 3(0,1,0),f,d);c*=mix(.6,1.,or!K
t j=0;j<31;j++
zDrift=pow(ti!JalText(){const e=docuL-1
Click to Start WebGL. Your browser%\(t.VERTEX_SHADER`
t.ARRAY_BUFFERH0;e<n.numberOfCha!%C=a/n,a++,a<=n?&
"name":"Astral","description":"Astral is an endless generative music and visual experience.\n\nThe lead synth line make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives the piece a unique logic. A second synth pad provides accompanying chords.\n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Astral</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 name="viewport" conten %,initial-scale=1.0 D
title>Astral</{margin:0;overflow:hidden;height:100%;background:#0 10;display:flex;align-items:c ,sans-serif}canvas{pos left:0}#tc{z-index:1}#gc{ vec4 ap;void main(){gl_P2 st){return fract(s w(12.9898,78.233)))*43758.5453123 u=f*f*(3.0-2.0*f);mix(a,b,u.x)+(c-a)*u.y*@?sh"]
.createShader(!D zerty B*X max (2024)(cx,opt={mg:)F
5,do:true,r4,s:1.6,r
5,sd:9600}!dD
cd[i]=(Math.ra)
te==='suspe8S0lds={Dm:[293.66,349,</script></body></html>
"name":"Organism #12","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Organism #12</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #12</body{margin:0;overflow:hidden}canvas{display:block}</" width="800" heigh tex-shader" typ 7">attribute vec4 aV`7Position;void main(@ mediump !t at;uniform#define S(a,b,t) smoothstep`&
struct ray{`vr=cross@i 3(0,1,0),f,d);c*=mix(.6,1.,or!P
t j=0;j<28;j++K
Click to Start WebGL. Your browser%
.VERTEX_SHADERA[.COMPILE_STATUS)$,2@7
FLOAT,false(
mkC1={'C4':{'E j
PeriodicWavL# w);</script></body></html>
"name":"Organism #11","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Organism #11</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #11</body{margin:0;overflow:hidden;}canvas{display:block;}</ id="c1" width="800" heigh vs" typ -
x-shader/x- tex">attribute vec4 aV;void main(@
){gl_Position= fragment">precis A mediump !9 at;uniform#define S(a,b,t) smoothstepe
z){r a;a.o=cp;`"rr=cross@O 3(0,1,0),fc=S(s,s*(1.-b),d);c*=mix(.6,1., (int j=0;j<38;j++-.8+cos(an)*r,-4.5+s$?
Click to Start
=window.innerWK WebGL. Your browser#,
vs=gl.createShMT$.VERTEX_SHADER); COMPILE_STATUS)# a
ARRAY_BUFFER,b.p,2@+
FLOAT,false&==='suspende*!f"/Ac=()=>{ &(a*o 5n=r?l-i:i;lc[i]=
"name":"Organism #10","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Organism #10</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #10</body{margin:0;overflow:hidden;}canvas{display:block;}</" width="800" heigh tex-shader" typ 8">attribute vec4 aV`7Position;void main(@ mediump !w at;uniform#define S(a,b,t) smoothstepr=cross@O 3(0,1,0),fc=S(s,s*(1.-b),d);c*=mix(.6,1., or(int j=0;j<51;j++
>const mc=docuI
dt(){ct.fillSKa>
Click to Start=
=window.innerWLl WebGL. Your browser#vsh=gl.createShN
.VERTEX_SHADER!*.COMPILE_STATUS)$ n
ARRAY_BUFFER,b/Mp,2@+
FLOAT,false'/&n=rv?l-i:i;lc[i]=/body></html>
"name":"Organism #9","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Organism #9</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #9</body{margin:0;overflow:hidden;}canvas{display:block;}</" width="800" heigh tex-shader" typ 8">attribute vec4 aV;void main(@
){gl_Position= mediump !] at;uniform#define S(a,b,t) smoothstepi
z){r a;a.o=cP;`"r=cross@N 3(0,1,0),fr +
+max(0.,dot(p-@c=S(s,s*(1.-b),d);c*=mix(.6,1., (int j=0;j<71;j++y
>const mC=docuI~?
Click to StartD
=window.innerWL WebGL. Your browser#vSh=gl.createShM
.VERTEX_SHADER!.COMPILE_STATUS)$ Z
ARRAY_BUFFER,bP,2@+
FLOAT,false&==='suspende*0f /AC=()=>{ &(o*~ 5? '`? G@?@G`? `?B!@qL
p=mc[cN],t=Obj0cn=r?l-i:i;lC[i]=
"name":"Organism #8","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Organism #8</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #8</body{margin:0;overflow:hidden;}canvas{display:block;}</ id="mc" width="800" heigh vs" typ -
x-shader/x- tex">attribute vec4 ap;void main(@
){gl_Position= fragment">precis A mediump !9 at;uniform#define S(a,b,t) smoothstepr=cross@Q 3(0,1,0),fc=S(s,s*(1.-b),d);c*=mix(.6,1., or(int j=0;j<51;j++
>const mc=docuIById('mc'),ct=mc@uncIs
di(){ct.fillSJ>
Click to Start<
=window.innerWK WebGL. Your browser#e&
vs=gl.createShM
.VERTEX_SHADER!COMPILE_STATUS)#p,2@+
FLOAT,false&n=r?l-i:i;lc[i]=
"name":"Organism #7","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY " @0
-anchor="middl #>Organism #7</text>
</svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #7</body{margin:0;overflow:hidden}canvas{display:block}</ id="c1" width="800" heigh vs" typ ,
x-shader/x- tex">attribute vec4 ap;void main(){gl_Position= fragment">precis A mediump !2 at;uniform#define S(a,b,t) smoothstepz){r rr;rr.o=cP;`%alize(lk-cP),rt=cross@N
3(0,1,0),f),up+f*z,ix=c+uv.x*rt@or(int j=0;j<51;j++ract(t*i),sp=.15+?
Click to Start
=window.innerWL%vsh=gl.createShM.VERTEX_SHADER); .COMPILE_STATUS)# Z
ARRAY_BUFFER,bp,2@+
FLOAT,false&/body></html>
"name":"Organism #6","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY fill="black"/><text h" @0
-anchor="middl #>Organism #6</text></svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #6</body{margin:0;overflow:hidden;}canvas{display:block;}</ id="mc" width="800" heigh vs" typ -
x-shader/x- tex">attribute vec4 aP;void main(@
){gl_Position= fragment">precis A mediump !9 at;uniform#define S(a,b,t) smoothstepalize(l-c),r=cross@Ef,r),m= A
+f*z,i=m+u.x*r c=S(s,s*(1.-b),d);c*=mix(.6,1., (int j=0;j<71;j++ract(t*i),sp=.15+2.05,a1=t*sp,a2=-@5.+cos(a1)*r,2.5+s$7
>const mc=docuH
dT(){cx.fillSJ>
Click to Start<
=window.innerWK WebGL. Your browser#hvSh=gl.createShL
.VERTEX_SHADER!.COMPILE_STATUS)#=new FGS
32Array([-1+P,2@+
FLOAT,false&==='suspende* f&2'?@&`? 7`? &`?@7@f@7@?@3 7@>@]@?@&`?@7@?@G@?@X@ub7
pow(1-n/l,x/K/body></html>
"name":"Organism #5","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY " @0
-anchor="middl #>Organism #5</text>
</svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #5</body{margin:0;overflow:hidden;}canvas{display:block;}</ id="c" width="800" heigh vs" typ -
x-shader/x- tex">attribute vec4 ap;void main(@
){gl_Position= fragment">precis A mediump !8 at;uniform#define S(a,b,t) smoothstepg
z){r a;a.o=cP;`"rv=cross@N 3(0,1,0),fc=S(s,s*(1.-b),d);c*=mix(.6,1., (int j=0;j<51;j++=fC/iR.xy;u-=.5;F=
Click to Start
=window.innerWK9 WebGL. Your browser may no%z
.VERTEX_SHADER!.COMPILE_STATUS)#'An ` occurred `
ARRAY_BUFFER,ber(ap,2@+
FLOAT,false&@=@,`=@F@d@E@=@^@=a7@ps=mc[cN],t=Obj0n=r?l-i:i;lc[i]=
"name":"Organism #4","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY " @0
-anchor="middl #>Organism #4</text>
</svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #4</body{margin:0;overflow:hidden;}canvas{display:block;}</" width="800" heigh tex-shader" typ 8">attribute vec4 aV`7Position;void main(@ mediump !w at;uniform#define S(a,b,t) smoothstepr=cross@i 3(0,1,0),f,d);c*=mix(.6,1.,!W
t j=0;j<24;j++ract(t*i <D[
speed=.15+`K
Click to Start WebGL. Your browser%
.VERTEX_SHADERAa.COMPILE_STATUS)$,2@7
FLOAT,false)</script></body></html>
"name":"Organism #3","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY " @0
-anchor="middl #>Organism #3</text>
</svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #3</body{margin:0;overflow:hidden;}canvas{display:block;}</" width="800" heigh tex-shader" typ 8">attribute vec4 aV`7Position;void main(@ mediump !w at;uniform#define S(a,b,t) smoothstep`&
struct ray{`xr=cross@i 3(0,1,0),f,d);c*=mix(.6,1.,or!R
t j=0;j<21;j++K
Click to Start WebGL. Your browser%
.VERTEX_SHADERAa.COMPILE_STATUS)$,2@7
FLOAT,false)e,probability]of
PeriodicWavLS x</script></body></html>
"name":"Organism #2","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY " @0
-anchor="middl #>Organism #2</text>
</svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #2</body { margin: 0; overflow: hidd
en; }canvas &
display: block " width="800" heigh tex-shader" typ 9">attribute vec4 aV`7#define S(a,b,t) smoothstepr=cross@l 3(0,1,0),f,d);c*=mix(.6,1.,or!P
t j=0;j<16;j++K
Click to Start WebGL. Your browser%e
.VERTEX_SHADERA;.COMPILE_STATUS)$,2@7
FLOAT,false(</script></body></html>
"name":"Organism #1","description":"Organism is an endless, audio reactive generative music and visual experience.\nEach variation has a different visual movement and palette. The synth lines make use of Markov chains to determine the probabilities and possibilities for the subsequent note which gives each piece a unique logic. \n\nCreated with vanilla Javascript, Web Audio API and WebGL.\n\nClick to start. Phones may need the 'ringer' button on to start and benefit from having the volume turned down slightly.\n\nAzerty Betamax, 2024"<svg xmlns="http://www.w3.org/2000/svg" width="100%" heightviewBox="0 0 @" preserveAspectRatio="xMidY " @0
-anchor="middl #>Organism #1</text>
</svg><!DOCTYPE html><@ead><meta charset="UTF-8 title>Organism #1</body,canvas{margin:0;overflow:hidden;display:block;}</ id="c1" width="800" heigh vs" typ -
x-shader/x- tex">attribute vec4 a; void main(){gl_Position=a`#define S(a,b,t) smoothstepr=cross@L 3(0,1,0),f
length(p-(r k max(0.,dot c=S(s,s*(1.-b),d)*mix(.6,1.,
or(int j=0;j<1 2 u=fc/r.xy;u-=.5;EById('c1'),ctx=c1@?
Click to Start
=window.innerWJVvsh=gl.createShK.VERTEX_SHADER) Q.COMPILE_STATUS)$2@*
FLOAT,false&html>