TinyChan

/*
	Desmos (3D, ofgqiyzlnw; tqEsb):
		lerp(lerp(p[0],p[1],(a%s)/s),lerp(p[3],p[2],(a%s)/s),Math.floor(a/s)/s);
	Google “3D bilinear surface patch” (yUU6U) → [PBR Book] Bilinear Patches (pvcxz, ghost:eKs9W)
	[p5.js] beginShape(); (4lffl)
*/
function aLerp(a,b,amt){return a.map((x,i)=>x+(b[i]-x)*amt);}
function surfacePatch(a,b,c,d,s){
	let iter=s*s;
	strokeWeight(4);for(let i=0;i<4;i++){stroke(...[[255,0,0],[0,255,0],[0,0,255],[128,128,128]][i]);point(...[a,b,c,d][i]);}noStroke();
	beginShape(QUADS);
	/*
	A---B
	|   |
	D---C
	*/
	stroke(0);strokeWeight(1);
	for(let i=0;i<iter;i++){
		let sa=aLerp(aLerp(a,b,(i%s)/s),    aLerp(d,c,(i%s)/s),     Math.floor(i/s)   /s),
		    sb=aLerp(aLerp(a,b,(i%s)/s),    aLerp(d,c,(i%s)/s),    (Math.floor(i/s)+1)/s),
		    sc=aLerp(aLerp(a,b,((i%s)+1)/s),aLerp(d,c,((i%s)+1)/s),(Math.floor(i/s)+1)/s),
		    sd=aLerp(aLerp(a,b,((i%s)+1)/s),aLerp(d,c,((i%s)+1)/s), Math.floor(i/s)   /s);
		vertex(...sa);vertex(...sb);vertex(...sc);vertex(...sd);
	}
	endShape();
}
let random4point=(r=1)=>
	[
		[((Math.random()*2)-1)*r,((Math.random()*2)-1)*r,((Math.random()*2)-1)*r],
		[((Math.random()*2)-1)*r,((Math.random()*2)-1)*r,((Math.random()*2)-1)*r],
		[((Math.random()*2)-1)*r,((Math.random()*2)-1)*r,((Math.random()*2)-1)*r],
		[((Math.random()*2)-1)*r,((Math.random()*2)-1)*r,((Math.random()*2)-1)*r]
	],
	oldSurfaces=[],newSurfaces=[],timer=[0,120,0],updateSurfaces=()=>{
		oldSurfaces=newSurfaces.length?newSurfaces:[
			[[255,0,0],random4point(1000)],
			[[0,255,0],random4point(1000)],
			[[0,0,255],random4point(1000)]
		];
		newSurfaces=[
			[[255,(timer[2]%2)*255,0],random4point(1000)],
			[[0,255,(timer[2]%2)*255],random4point(1000)],
			[[(timer[2]%2)*255,0,255],random4point(1000)]
		];
	};
updateSurfaces();
function setup(){
	createCanvas(windowWidth,windowHeight,WEBGL);
}
function draw(){
	background(128);
	orbitControl(); //enable orbiting with the mouse
	ambientLight(100);
	pointLight(
		255,255,255,
		Math.cos(frameCount/50)*1e3,Math.sin(frameCount/50)*1e3,Math.sin(frameCount/200)*1e3
	);
	noStroke();
	for(let i=0;i<oldSurfaces.length;i++){
		let surface=oldSurfaces[i];
		surface[0]=aLerp(oldSurfaces[i][0],newSurfaces[i][0],timer[0]/timer[1]);
		for(let j=0;j<4;j++){
			surface[1][j]=aLerp(oldSurfaces[i][1][j],newSurfaces[i][1][j],timer[0]/timer[1]);
		}
		fill(...surface[0])
		surfacePatch(...surface[1],8)
	}
	timer[0]++;if(timer[0]>=timer[1]){timer[0]-=timer[1];updateSurfaces();timer[2]++;}
}