2b:null 2c:["$","title",null,{"children":"Grand Tour in WebGL2, with enhancements | tiga1231 | Observable"}] 31:T736,tick = { //using time widget now; console.log('tick', +performance.now().toFixed(2)); if(playButton.value % 2 == 0){ //play time.value = (time.value+1/100) % (+time[1].max); } playButton[0].innerText = playButton.value%2==0 ? "Stop":"Play"; let s = time.value * speed; //using viewof time // let s = time * speed; // Render with positions computed in CPU/js // let gtMatrix = numeric.dot(Y0, math.expm(math.multiply(s, delta))._data); // let positions_3d = numeric.dot(positions, gtMatrix.map(row=>row.slice(0,3))); // let directions = numeric.dot( // positions, // numeric.dot(gtMatrix, delta.map(d=>d.slice(0,3))) // ); // let positions_traj_3d; // if(shouldDraw.indexOf('trajectories')>=0){ // let gtMatrixPerStep = d3.range(trajSteps) // .map(i=>numeric.dot(gtMatrix, // math.expm(math.multiply(-trajLength*i/trajSteps, delta))._data), // ); // positions_traj_3d = positions.map(p=>gtMatrixPerStep.map(gt=>numeric.dot(p, gt.map(d=>d.slice(0,3))))); // } // render(positions_3d, directions, positions_traj_3d); // Render grand tour in the shader/GPU // let gtMatrix = gt.torus(s); // let gtMatrixPerStep = d3.range(trajSteps).map(i=>{ // return gt.torus(s-trajLength*i/trajSteps); // }); let gtMatrix = numeric.dot(Y0, math.expm(math.multiply(s, delta))._data); let gtMatrixPerStep = d3.range(trajSteps) .map(i=>numeric.dot(gtMatrix, math.expm(math.multiply(-trajLength*i/trajSteps, delta))._data), ); //for glyph let directions = numeric.dot( positions, numeric.dot(gtMatrix, delta.map(d=>d.slice(0,3))) ); gl.bindBuffer(gl.ARRAY_BUFFER, dirBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(directions.flat()), gl.STATIC_DRAW); render_gt(gtMatrix, gtMatrixPerStep); return s; }32:T4b0,fShader_ssao = FragmentShader(`#version 300 es precision highp float; in vec2 v_texCoord; uniform sampler2D u_pos; uniform sampler2D u_depth; int n_samples = ${n_ssao_samples}; uniform vec3 samples[${n_ssao_samples}]; out vec4 outColor; void main() { vec3 current_pos = texture(u_pos, v_texCoord).xyz; current_pos.z = texture(u_depth, v_texCoord).x; float occlusion_factor = 0.0; for(int i=0; icurrent_pos.z && dist<${occlusionThresh.toFixed(2)}){ occlusion_factor += 0.3 - dist / ${occlusionThresh.toFixed(2)}; // occlusion_factor += smoothstep(0.0, ${occlusionThresh.toFixed(2)}*2.0, dist); }else{ occlusion_factor += 0.0; } } occlusion_factor /= float(n_samples); outColor = vec4(occlusion_factor, occlusion_factor, occlusion_factor, occlusion_factor); } `)33:T127d,// function render(positions, directions, positions_traj){ // console.log('render'); // //render to a texture // gl.bindFramebuffer(gl.FRAMEBUFFER, setup.frameBuffers[0]); // gl.drawBuffers([gl.COLOR_ATTACHMENT0,gl.COLOR_ATTACHMENT1, ]); // gl.clearColor(...CLEAR_COLOR, 1.0); // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // // draw trajectory lines // if(positions_traj!== undefined){ // gl.useProgram(program_traj_3d); // console.log(positions_traj); // gl.bindBuffer(gl.ARRAY_BUFFER, gl_data_traj_3d.buffers.a_position); // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions_traj.flat().flat()), gl.STATIC_DRAW); // enableAttribute(program_traj_3d, 'a_position', gl_data_traj_3d.buffers.a_position, 3); // enableAttribute(program_traj_3d, 'a_color', gl_data_traj_3d.buffers.a_color, 3); // gl.uniformMatrix4fv(gl_data_traj_3d.uniforms.camera, false, camera); // let steps = trajSteps; // for(let i=0; i=0){ // gl.useProgram(program_3d); // gl.bindBuffer(gl.ARRAY_BUFFER, gl_data_3d.buffers.a_position); // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions.flat()), gl.STATIC_DRAW); // gl.bindBuffer(gl.ARRAY_BUFFER, gl_data_3d.buffers.a_direction); // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(directions.flat()), gl.STATIC_DRAW); // enableAttribute(program_3d, 'a_position', gl_data_3d.buffers.a_position, 3); // enableAttribute(program_3d, 'a_color', gl_data_3d.buffers.a_color, 3); // enableAttribute(program_3d, 'a_direction', gl_data_3d.buffers.a_direction, 3); // gl.uniformMatrix4fv(gl_data_3d.uniforms.camera, false, camera); // gl.drawArrays(gl.POINTS, 0, n); // } // gl.bindFramebuffer(gl.FRAMEBUFFER, null); // //screen space ambient occlusion // gl.bindFramebuffer(gl.FRAMEBUFFER, setup.frameBuffers[1]); // gl.drawBuffers([gl.COLOR_ATTACHMENT0]); // gl.clearColor(...CLEAR_COLOR, 1.0); // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // gl.useProgram(program_ssao); // enableAttribute(program_ssao, 'a_position', positionBuffer_ssao, 2); // enableAttribute(program_ssao, 'a_texCoord', texCoordBuffer_ssao, 2); // gl.activeTexture(gl.TEXTURE0); // gl.bindTexture(gl.TEXTURE_2D, setup.textures[0][1]); //load position texture // gl.uniform1i(posLoc, 0); // gl.activeTexture(gl.TEXTURE1); // // gl.bindTexture(gl.TEXTURE_2D, setup.textures[0].depthTexture); //load position texture // gl.bindTexture(gl.TEXTURE_2D, setup.textures[0][0]); //load color texture // gl.uniform1i(colorLoc, 1); // gl.uniform3fv(sampleLoc, ssao_samples.flat()); // gl.drawArrays(gl.TRIANGLES, 0, 6); // gl.bindFramebuffer(gl.FRAMEBUFFER, null); // // // //blur // gl.bindFramebuffer(gl.FRAMEBUFFER, setup.frameBuffers[2]); // gl.drawBuffers([gl.COLOR_ATTACHMENT0]); // gl.clearColor(...CLEAR_COLOR, 1.0); // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // gl.useProgram(program_blur); // enableAttribute(program_blur, 'a_position', positionBuffer_ssao, 2); // enableAttribute(program_blur, 'a_texCoord', texCoordBuffer_ssao, 2); // gl.activeTexture(gl.TEXTURE0); // gl.bindTexture(gl.TEXTURE_2D, setup.textures[1][0]); //load ssao texture // gl.uniform1i(imageLoc_blur, 0); // gl.drawArrays(gl.TRIANGLES, 0, 6); // gl.bindFramebuffer(gl.FRAMEBUFFER, null); // // // //draw to canvas // gl.clearColor(...CLEAR_COLOR, 1.0); // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // gl.useProgram(program_combine); // enableAttribute(program_combine, 'a_position', positionBuffer_ssao, 2); // enableAttribute(program_combine, 'a_texCoord', texCoordBuffer_ssao, 2); // gl.activeTexture(gl.TEXTURE0); // // gl.bindTexture(gl.TEXTURE_2D, setup.textures[0][0]); //draw markers and trajs // gl.uniform1i(imageLoc_combine, 0); // gl.activeTexture(gl.TEXTURE1); // gl.bindTexture(gl.TEXTURE_2D, setup.textures[1][0]); //use ssao texture // // gl.bindTexture(gl.TEXTURE_2D, setup.textures[2][0]); //use blured ssao texture // gl.uniform1i(shadeLoc_combine, 1); // gl.drawArrays(gl.TRIANGLES, 0, 6); // }34:Tab2,fShader = FragmentShader(`#version 300 es precision highp float; in vec4 v_color; in vec4 v_position; in vec3 v_direction; layout(location = 0) out vec4 outColor; layout(location = 1) out vec4 outPosition; void main() { vec2 pointCoord = (gl_PointCoord.xy-0.5)*2.0 * 1.414; vec2 dir = normalize(v_direction.xy); vec2 glyphCoord = mat2(dir.y, dir.x, dir.x, -dir.y)*pointCoord; float len = length(normalize(v_direction).xy)*1.414; len = max(len, 1.0); float slope = pow(len*len-(1.414/2.0)*(1.414/2.0),0.5) / ((1.414/2.0)); float dist = length(glyphCoord); if ( // dist <= 1.0 // || glyphCoord.y < -abs(glyphCoord.x) + 1.41421 // && glyphCoord.y > abs(glyphCoord.x) // dist <= 1.41421/2.0 // || glyphCoord.y < -abs(glyphCoord.x)*1.73205 + 1.41421 // && glyphCoord.y > abs(glyphCoord.x) dist <= 1.41421/2.0 || glyphCoord.y < -abs(glyphCoord.x)*slope + len && glyphCoord.y > abs(glyphCoord.x) / slope ){}else{ discard; } outColor = v_color; vec3 light_color = vec3(1.0, 1.0, 1.0); //surface norm of a sphere // vec3 n = vec3(pointCoord.xy, 1.0); // n.z = pow(1.0 - n.x*n.x - n.y*n.y, 0.5); // n = normalize(n); vec3 n = vec3(pointCoord.xy, 1.0); if(sign(v_direction.x)==sign(pointCoord.x) && sign(v_direction.y)==sign(-pointCoord.y)){ if(abs(pointCoord.x) < abs(pointCoord.y)){ n.x /= 1.414; }else{ n.y /= 1.414; } } n = normalize(n); //surface norm of a cubic curve // dist *= 2.0; // vec3 n = vec3((gl_PointCoord.xy - 0.5) * 2.0 / 1.414, 1.0); // n.z = (dist+1.0) / (pow(6.0*dist,2.0) - 6.0*dist + 10.0); // n = normalize(n); vec3 l = normalize(vec3(-1.0, 1.0, 5.0)); // surface->light direction // vec3 l = normalize(vec3(sign(v_direction.x), sign(v_direction.y), 2.0)); // surface->light direction vec3 l_leg = l - dot(l,n)*l; vec3 l_prime = dot(l,n)*l - l_leg; vec3 v = vec3(0.0, 0.0, 1.0); // surface->viewer direction float diffuse = max(dot(l, n), 0.0); float ambient = 0.5; float specular = pow(max(0.0, dot(l_prime, v)), 40.0); outColor.rgb = outColor.rgb * min(1.0, diffuse+ambient) + 0.5*light_color*specular; // vec3 outline_color = mix(vec3(0.1, 0.1, 0.1 ), outColor.rgb, 0.5); // outColor.rgb = mix( // outColor.rgb, // outline_color, // smoothstep(0.1, 0.0, abs(dist-0.45 )) // ); float pointSize = ${pointSize.toFixed(2)} * ${devicePixelRatio.toFixed(2)}; outPosition = v_position;// + vec4(n, 1.0) * 0.01; // / vec4(${width.toFixed(2)}, ${height.toFixed(2)}, 1.0, 1.0); } `)35:T5d1,delta = { // console.log('delta'); let batchSize = 256; let delta = tf.randomNormal([ndim, ndim]).variable(); // let optimizer = tf.train.momentum(1e-1, 0.9); let optimizer = tf.train.adam(0.1); let positions_tf = tf.tensor(positions).matMul(Y0); for(let i=0;i<1;i++){ for(let j=0; j{ let deltaSnap = delta.sub(delta.transpose()).div(2); deltaSnap = deltaSnap.div(deltaSnap.norm()); delta.assign(deltaSnap); let samples_i = Array(batchSize).fill(0.0).map(_=>randint(0, falseNeighbors.length-1)); let xi = positions_tf.gather(samples_i.map(i=>falseNeighbors[i][0]), 0); let xj = positions_tf.gather(samples_i.map(i=>falseNeighbors[i][1]), 0); let yi = xi.matMul(deltaSnap.gather([0,1,2],1)); let yj = xj.matMul(deltaSnap.gather([0,1,2],1)); // let dot = yi.mul(yj).sum(1); // let norm = yi.norm(1).add(yj.norm(1)); // let loss = dot.sum();//.add(norm.mean().mul(-1)); let yiNorm = yi.div(yi.norm('euclidean', 1, true)); let yjNorm = yj.div(yj.norm('euclidean', 1, true)); let cossim = yiNorm.mul(yjNorm).sum(1); let loss = cossim.pow(2).add(cossim.abs()).mean(); if (j==n_iters-1) loss.print(); return loss; }); } // test_render(await delta.array()); } return delta.arraySync(); // let delta = deltaRandom; // return delta; }36:T47c,function colorByHidden(){ let residual = numeric.dot(positions, gt.matrix.map(row=>row.slice(2,ndim))); let sample = reshape(residual, 13).map(d=>d[0]); // let sample = residual.slice(0,100); let svd = numeric.svd(sample); v0.value = svd.V[0]; v0.prev = v0.prev===undefined ? svd.V[0]:v0.prev let sign = v0.prev===undefined ? 1.0 : math.sign(cossim(v0.value, v0.prev)); v0.value = numeric.mul(svd.V[0], sign); v0.value = normalize(mix(v0.value, v0.prev, 0.01)); v0.prev = v0.value; let pc0 = numeric.dot(residual, v0.value); pc0 = pc0.map((pc,i)=>pc*sign); let sc = d3.scaleLinear().domain(d3.extent(pc0)).range([0,1]); let interpolate = d3.interpolateViridis; let colors = pc0.map(p=>rgb(interpolate(sc(p)))); // let f = d3.interpolateViridis; // // let sc = d3.scaleQuantize(d3.schemeCategory10).domain(d3.extent(pc0)); // let sc = d3.scaleQuantize(d3.range(3).map(i=>f(i/(3-1)))).domain(d3.extent(pc0)); // let colors = pc0.map(p=>rgb(sc(p))); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors.flat()), gl.STATIC_DRAW); return colors; }37:T11ef,function render_gt(gtMatrix, gtMatrixPerStep){ let steps = gtMatrixPerStep.length; //render to a texture gl.bindFramebuffer(gl.FRAMEBUFFER, setup.frameBuffers[0]); gl.drawBuffers([gl.COLOR_ATTACHMENT0,gl.COLOR_ATTACHMENT1, ]); gl.clearColor(...CLEAR_COLOR, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // draw trajectory lines if(shouldDraw.indexOf('trajectories')>=0){ gl.useProgram(program_traj_gt); for(let i=0; isplit_matrix(mat)); gl.uniformMatrix4fv(gtLoc2, false, gtMatrices2.flat().flat().flat()); gl.uniformMatrix4fv(cameraLoc2, false, camera); for(let i=0; i= 0){ // gl.drawArrays(gl.POINTS, i*steps, steps); gl.drawArrays(gl.LINE_STRIP, i*steps, steps); } } } // draw markers if(shouldDraw.indexOf('markers')>=0){ gl.useProgram(program_gt); for(let i=0; i{ res.textures.push([]); let frameBuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer); res.frameBuffers.push(frameBuffer); for(let j=0; ji/nrows*Math.PI*2); let phis = d3.range(ncols).map(i=>i/ncols*Math.PI*2); let positions = []; let colors = []; let inter = d3.interpolateRainbow; let sc = d3.scaleLinear().domain([0,Math.PI*2]).range([0,1]); thetas.forEach(theta=>{ phis.forEach(phi=>{ // let x = (R+r*cos(theta)) * cos(phi); // let y = (R+r*cos(theta)) * sin(phi); // let z = r * sin(theta) * cos(phi/2); // let w = r * sin(theta) * sin(phi/2); let x = R * (cos(theta/2)*cos(phi)-sin(theta/2)*sin(phi*2)); let y = R * (sin(theta/2)*cos(phi)+cos(theta/2)*sin(phi*2)); let z = P * cos(theta) * (1+eps*sin(phi)); let w = P * sin(theta) * (1+eps*sin(phi)); positions.push([x,y,z,w]); let c = d3.rgb(d3.color(inter(sc(theta))).darker(0.6)); colors.push([c.r/255, c.g/255, c.b/255]); }); }); return {colors, positions}; }3a:T5c4,umap = { // let positions = await FileAttachment("15-Bottleneck.bin").arrayBuffer().then(d=>{ // let array = [...new Float32Array(d)]; // array = reshape(array, 15); // array = array.map(a=>a.slice(0,5)); // return array; // }); // let positions = await FileAttachment("12-Inception.bin").arrayBuffer().then(d=>{ // let positions = await FileAttachment("13-Inception.bin").arrayBuffer().then(d=>{ // let positions = await FileAttachment("14-MaxPool2d.bin").arrayBuffer().then(d=>{ let positions = await FileAttachment("16-Inception@1.bin").arrayBuffer().then(d=>{ // let positions = await FileAttachment("20-Softmax@1.bin").arrayBuffer().then(d=>{ let array = [...new Float32Array(d)]; array = reshape(array, 5); return array; }); let attributes = await FileAttachment("attributes@1.csv").csv(); let center = math.mean(positions, 0); let std = math.std(positions, 0); positions = positions.map(p=>math.subtract(p, center)); // positions = positions.map(p=>p.map((d,i)=>d/std[i])); let sc = d3.scaleOrdinal(d3.schemeCategory10); // let sc = d3.scaleOrdinal([ // '#a6cee3','#1f78b4','#b2df8a','#33a02c', // '#fb9a99','#e31a1c','#fdbf6f','#ff7f00', // '#cab2d6','#6a3d9a' // ]); let colors = attributes.map(a=>{ let l = a.label_coarse; // let l = a.has_face; // let l = 0; let c = d3.rgb(sc(l)); return [c.r/255, c.g/255, c.b/255]; }); return {positions, colors}; } 3b:T45b,dsprites_vae = { // positions = FileAttachment("2-latent-code-5D-umap.bin").arrayBuffer().then(d=>{ // positions = FileAttachment("latent-code-ellipse.bin").arrayBuffer().then(d=>{ // positions = FileAttachment("latent-code-orientation-focused.bin").arrayBuffer().then(d=>{ let positions = await FileAttachment("1-latent-code.bin").arrayBuffer().then(d=>{ let array = [...new Float32Array(d)]; array = reshape(array, 5); let center = math.mean(array, 0); array = array.map(p=>math.subtract(p, center)); return array; }); let attributes = await FileAttachment("attributes@2.csv").csv(); console.log(attributes[0]); // let attr = 'Shape'; // let sc = d3.scaleOrdinal(d3.schemeCategory10); // let colors = attributes.map(a=>{ // let l = +a[attr]; // // let l = 0; // return rgb(sc(l)); // }); let attr = 'Scale'; let sc = d3.scaleLinear().domain(d3.extent(attributes, d=>+d[attr])); let interpolate = d3.interpolateViridis; let colors = attributes.map(a=>{ let l = +a[attr]; return rgb(interpolate(sc(l))); }); return {positions, colors}; }3c:T456,dsprites_umap = { let positions = await FileAttachment("dsprites-umap-5d.bin") .arrayBuffer() .then(d=>{ let array = [...new Float32Array(d)]; array = reshape(array, 5); // array = array.map(d=>d.slice(2,5)); return array; }); let center = math.mean(positions, 0); let std = math.std(positions, 0); positions = positions.map(p=>math.subtract(p, center)); positions = positions.map(p=>p.map((d,i)=>d/std[i])); let attributes = await FileAttachment("dsprites-umap-5d-attributes (2).csv").csv(); // let attr = 'Orientation'; // let sc = d3.scaleLinear().domain([0, Math.PI/2]); // let interpolate = d3.interpolateRainbow; // let attr = 'Scale'; // let attr = 'Pos X'; // let attr = 'Pos Y'; // let sc = d3.scaleLinear().domain(d3.extent(attributes, d=>+d[attr])); // let interpolate = d3.interpolateViridis; let attr = 'Shape'; let sc = d3.scaleOrdinal(d3.schemeCategory10); let interpolate = d=>d; let colors = attributes.map(a=>{ let l = +a[attr]; return rgb(interpolate(sc(l))); }); return {attributes, positions, colors} }3d:[{"id":"63c81a4207eaf24263e4e4b052cde50cb5a42d3631fa3f172e55c1558e1e0cc52ecd2fee686aa107e7075b9437ed68bbc568f679236db66f72279468c54372f7","href":"https://static.observableusercontent.com/files/63c81a4207eaf24263e4e4b052cde50cb5a42d3631fa3f172e55c1558e1e0cc52ecd2fee686aa107e7075b9437ed68bbc568f679236db66f72279468c54372f7","name":"1-latent-code.bin","type":"application/octet-stream","lastModified":1649477738991.511,"size":1000000},{"id":"e076f089e8ab2687e3d2ec893f949c370d063446f27ebfae8e964cd5bd71200b24fb83a111ac2c49086d77790a13fbb7666582c74081da1e6d1cf3eae49d3be9","href":"https://static.observableusercontent.com/files/e076f089e8ab2687e3d2ec893f949c370d063446f27ebfae8e964cd5bd71200b24fb83a111ac2c49086d77790a13fbb7666582c74081da1e6d1cf3eae49d3be9","name":"attributes@2.csv","type":"text/csv","lastModified":1649477833474.339,"size":995394},{"id":"0439a3a1a9a246964ec8b38fb5007368ce7880c94346e04326477e529046ec9e40068bfcd148d44ea2b1cfdb5a600e316dd8cf920e13daad25d77847d0566227","href":"https://static.observableusercontent.com/files/0439a3a1a9a246964ec8b38fb5007368ce7880c94346e04326477e529046ec9e40068bfcd148d44ea2b1cfdb5a600e316dd8cf920e13daad25d77847d0566227","name":"iris.csv","type":"text/csv","lastModified":1649170486547.033,"size":4601},{"id":"6d507291c6e038748459552788661f4f13ee26fad59cf533c07798d67a275484789ffb88237382c76050f54b72c619db7ad60c72bd714e2fec1fd1da6d7a5530","href":"https://static.observableusercontent.com/files/6d507291c6e038748459552788661f4f13ee26fad59cf533c07798d67a275484789ffb88237382c76050f54b72c619db7ad60c72bd714e2fec1fd1da6d7a5530","name":"attributes@1.csv","type":"text/csv","lastModified":1649230146555.472,"size":2755572},{"id":"1569c6659b9c570d25424a8453c2edbfdbc163f016c7cf846bb8c146e5bbca905cd5fa95f7e7467eb0d07940699780e6d9efb35f46f2466fd185af1df24b2929","href":"https://static.observableusercontent.com/files/1569c6659b9c570d25424a8453c2edbfdbc163f016c7cf846bb8c146e5bbca905cd5fa95f7e7467eb0d07940699780e6d9efb35f46f2466fd185af1df24b2929","name":"16-Inception@1.bin","type":"application/octet-stream","lastModified":1649712471641.774,"size":1000000},{"id":"bdc87f290d694375363328f0b68ff4c2f5e711c77d4a8b43065a3b8b346192487b499ad38fcaec03771b2ca14155beab12d82dbfa9a9eac5ef8909691c66dd15","href":"https://static.observableusercontent.com/files/bdc87f290d694375363328f0b68ff4c2f5e711c77d4a8b43065a3b8b346192487b499ad38fcaec03771b2ca14155beab12d82dbfa9a9eac5ef8909691c66dd15","name":"dsprites-umap-5d-attributes (2).csv","type":"text/csv","lastModified":1650038956174.594,"size":2700042},{"id":"47a3084cde06645133bdaf6bca5c656599e7194e1aca013909faf5fd2d1eea1b3ec9941a2edb0c51f19ddec28bf65f68d48b49304d3ead50305a1c655060acff","href":"https://static.observableusercontent.com/files/47a3084cde06645133bdaf6bca5c656599e7194e1aca013909faf5fd2d1eea1b3ec9941a2edb0c51f19ddec28bf65f68d48b49304d3ead50305a1c655060acff","name":"dsprites-umap-5d.bin","type":"application/octet-stream","lastModified":1650038382918.339,"size":1000000},{"id":"0ecd3dea55d4ec31bf9a7cb492b2cf57de2029c3b93dd337af9be59b461f9ed1b61e3e7d7772d4c20d8f58d0e448cf3895de29cca8c84db3d07560f6f9060241","href":"https://static.observableusercontent.com/files/0ecd3dea55d4ec31bf9a7cb492b2cf57de2029c3b93dd337af9be59b461f9ed1b61e3e7d7772d4c20d8f58d0e448cf3895de29cca8c84db3d07560f6f9060241","name":"transient-attributes.csv","type":"text/csv","lastModified":1650557794578.236,"size":3024718},{"id":"ecf4643b87dea667eac1edf4e67e815b101f6799dc16b5986a084a05d34e74dcec3bc95d69585c8870d51b72ceabd925432c9554484d2266edf80d58824ab8dc","href":"https://static.observableusercontent.com/files/ecf4643b87dea667eac1edf4e67e815b101f6799dc16b5986a084a05d34e74dcec3bc95d69585c8870d51b72ceabd925432c9554484d2266edf80d58824ab8dc","name":"12-Inception@4.bin","type":"application/octet-stream","lastModified":1650637492232.384,"size":274272},{"id":"301dbae1e3da19f303edb7026fb5da4198599783a9c5c812b5649a2e02470c8eadc5228d2d66f7b93e9d9da344778cd20b214b68eb3033e4d8f49010c003815f","href":"https://static.observableusercontent.com/files/301dbae1e3da19f303edb7026fb5da4198599783a9c5c812b5649a2e02470c8eadc5228d2d66f7b93e9d9da344778cd20b214b68eb3033e4d8f49010c003815f","name":"12-Inception@3.bin","type":"application/octet-stream","lastModified":1650637457439.158,"size":171420},{"id":"73edefe8c6926aa23122c4abbe3602df38ebafbcf6755f07e4836f825529d179d88e85633899c627968932744d8f04e1a85088952b6091e8d0ae43fec9708cca","href":"https://static.observableusercontent.com/files/73edefe8c6926aa23122c4abbe3602df38ebafbcf6755f07e4836f825529d179d88e85633899c627968932744d8f04e1a85088952b6091e8d0ae43fec9708cca","name":"12-Inception@2.bin","type":"application/octet-stream","lastModified":1650637421942.447,"size":102852},{"id":"749dcf9d57572b4018057fa4e59d49aee61663282529b63ff7f123662fdc46eac9468058adb0e15c0788a631b0649b7bf9bd6f8b8c35584f59a04eab50d6c7db","href":"https://static.observableusercontent.com/files/749dcf9d57572b4018057fa4e59d49aee61663282529b63ff7f123662fdc46eac9468058adb0e15c0788a631b0649b7bf9bd6f8b8c35584f59a04eab50d6c7db","name":"12-Inception@1.bin","type":"application/octet-stream","lastModified":1650637312324.757,"size":68568}] 2f:{"id":"2a503a9fb3db7e7d","slug":null,"title":"Grand Tour in WebGL2, with enhancements","thumbnail":null,"access_level":"public","create_time":"$D2022-04-05T14:50:39.142Z","update_time":"$D2025-09-05T01:34:33.259Z","view_time":null,"first_public_time":"$D2022-10-20T05:14:07.170Z","has_unpublished_edits":null,"fork":{"id":"7b3f1fae8e69a084","slug":null,"title":"WebGL Demo - less boilerplate","owner":{"id":"7775d06948a95c4e","login":"tiga1231","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7775d06948a95c4e","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":"starter_2024"},"version":14379,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null}],"members":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null,"role":"editor"},{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5fa1c7fa9229376f","slug":"webgl","title":"WebGL","owner":{"id":"7775d06948a95c4e","login":"tiga1231","name":""}},"type":"notebook","body":{"title":"Grand Tour in WebGL2, with enhancements","cells":[{"id":0,"value":"# Grand Tour in WebGL2, with enhancements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof gl = {\n const canvas = DOM.canvas(width * devicePixelRatio, height * devicePixelRatio);\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n canvas.style.background = '#333333';\n const gl = canvas.value = canvas.getContext(\"webgl2\");\n // gl.viewport(0, 0, canvas.width, canvas.height);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"// viewof shouldPlay = Inputs.toggle({label: \"Play\", value:true})\nplayButton = Inputs.button('Play')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3492,"value":"viewof ssao_radius = Inputs.range([0.00001, 0.1], {\n label: \"ssao_radius\",\n value: 0.002\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"time = Inputs.range([0, 100], {label: \"Time\", value:0, step:0.01})\n// viewof time = Inputs.range([0, 100], {label: \"Time\", value:0, width:width})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7720,"value":"positions = umap.positions\n// viewof positions = Inputs.select(new Map([\n// // [\"GoogLeNet UMAP\", pca(reshape(umap.positions, 7).map(d=>d.slice(0,1).flat()))],\n// [\"GoogLeNet UMAP\", umap.positions],\n// // [\"Simplcial Complex\", simplicialComplex],\n// // [\"dSprites UMAP\", dsprites_umap],\n// // [\"Iris\", iris],\n \n// // [\"transient 2D\", transient_attributes_2d_umap],\n// // [\"transient 3D\", transient_attributes_3d_umap],\n// // [\"transient 5D\", transient_attributes_5d_umap],\n// // [\"transient 8D\", transient_attributes_8d_umap],\n// ]), {label: \"Data\"}\n// )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6539,"value":"### SSAO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6390,"value":"viewof n_ssao_samples = Inputs.range([0,128], {label:'ssao_samples', step:1, value:16})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3688,"value":"viewof occlusionThresh = Inputs.range([0.001, 4], {\n label: \"ssao_thresh\",\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6551,"value":"### Other Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1746,"value":"viewof clear_color = Inputs.color({label: \"Bg color\", value: \"#333333\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8447,"value":"viewof shouldDraw = Inputs.checkbox([\"markers\", \"trajectories\"], {\n value: [\"markers\"],\n label: \"Draw\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11157,"value":"viewof azimuth = Inputs.range([0,360], {label:'Azimuth', value:0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11220,"value":"viewof elevation = Inputs.range([0,90], {label:'Elevation', value:0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6278,"value":"viewof scale = Inputs.range([0.3,2], {label: 'scale', value:1.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"viewof trajLength = Inputs.range([0,20], {label:\"Trajecotry length\", value:3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12047,"value":"viewof bundling_strength = Inputs.range([0,20], {label:'bundling_strength', value:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"viewof trajSteps = Inputs.range([1,50],{label:\"Trajecotry steps\", step:1, value:32})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6202,"value":"viewof blur_size = Inputs.range([0,4], {step:1, label:'ssao_blur_radius', value:0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2558,"value":"viewof speed = Inputs.range([0,10], {label: 'Animation speed', value:0.5, step:0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9674,"value":"viewof render_mode = Inputs.radio([\"depth_test\", \"blend_alpha\"], {label: \"Render mode\", value:\"depth_test\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"viewof pointSize = Inputs.range([0.0,40], {label:'point_size', value:8, step:0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10043,"value":"viewof n_iters = Inputs.range([1,200], {label:\"n_iters\", value:0, step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9804,"value":"// color_by = transient_attributes.attr_names[attr_index]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12214,"value":"// n_points = n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9768,"value":"// viewof attr_index = Inputs.range([0,41], {step:1, label:\"Color by attribute\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11862,"value":"centers = {\n return cluster.idxs.map((c,i)=>{\n return c!==-1 ? cluster.centroids[c] : positions[i];\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11873,"value":"centerBuffer_traj = {\n let centers_traj = pad(centers, Math.ceil(ndim/4)*4).map(c=>d3.range(trajSteps).map(()=>c));\n return createBuffer(new Float32Array(centers_traj.flat().flat()));\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11849,"value":"// colors = reshape(umap.colors, 7).map(d=>d.slice(0,1).flat())\ncolors = umap.colors\n// colors = transient_attributes_colors\n\n\n//color by cluster\n// colors = { \n// let sc = d3.scaleOrdinal(d3.schemeCategory10);\n// return cluster.idxs.map(c=>c!=-1?rgb(sc(c)):rgb('#777'));\n// }\n\n//single color\n// colors = cluster.idxs.map(c=>rgb(d3.hcl(120,80,80)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12104,"value":"// cluster = clusterByKmeans(positions, 20)\n\n//GoogLeNet\ncluster = clusterByKmeans(positions, 15)\n// cluster = clusterByDBSCAN(positions, 0.1*vmax, Math.round(n/100))\n// cluster = clusterByDBSCAN(positions, 0.07*vmax, Math.round(0.0035*n))\n// cluster = clusterByDBSCAN(positions, 0.05*vmax, Math.round(n/200))\n// cluster = clusterByDBSCAN(positions, 0.05*vmax, 15)\n\n//Transient Attribute\n// cluster = clusterByDBSCAN(positions, 0.1*vmax, ndim+1)\n// cluster = clusterByDBSCAN(positions, 0.11*vmax, ndim+1)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3084,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"vShader_trajectory_gt = VertexShader(`#version 300 es\n precision highp float;\n \n in vec4 a_position_0;\n in vec4 a_position_1;\n in vec4 a_center_0;\n in vec4 a_center_1;\n\n in vec4 a_color;\n out vec4 v_color;\n out float v_alpha;\n uniform float t;\n uniform mat4 camera;\n\n //gt\n uniform mat4 grandtour[${trajSteps*Math.pow(Math.ceil(ndim/4),2)}];\n uniform int gtOffset;\n in float a_offset;\n\n float n_blocks = ${Math.pow(Math.ceil(ndim/4),2).toFixed(2)};\n\n out vec4 v_position;\n\n void main() {\n ${position_code_traj}\n gl_Position.w = 1.0;\n gl_Position = camera * gl_Position;\n gl_Position.z -= 0.0001;\n\n v_color = vec4(a_color.rgb, 1.0);\n v_color.a = 1.0;\n v_color.a = exp(-10.0*a_offset/${trajSteps.toFixed(1)});\n // v_color.a = 0.0;\n\n //depth cuing\n float v_frac = (gl_Position.z+1.0)/2.0;\n // gl_PointSize *= (gl_Position.z+1.0)/2.0;\n v_position = gl_Position;\n // v_color.rgb *= (v_frac+0.1);\n\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11376,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11344,"value":"gl_data_3d = ({\n buffers: {\n a_position: createBuffer(new Float32Array(positions.map(d=>d.slice(0,3)).flat())),\n a_direction: createBuffer(new Float32Array(directions.flat())),\n a_color: createBuffer(new Float32Array(colors.flat())),\n },\n uniforms: {\n camera: gl.getUniformLocation(program_3d, 'camera'),\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11707,"value":"gl_data_traj_3d = ({\n buffers: {\n a_position: createBuffer(new Float32Array(\n positions.map(p=>d3.range(trajSteps).map(()=>p.slice(0,3))).flat().flat()\n )),\n a_color: createBuffer(new Float32Array(\n colors.map(c=>d3.range(trajSteps).map(()=>c)).flat().flat()\n )),\n },\n uniforms: {\n camera: gl.getUniformLocation(program_traj_3d, 'camera'),\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11329,"value":"vShader_3d = VertexShader(`#version 300 es\n precision highp float;\n \n in vec4 a_position;\n in vec4 a_color;\n in vec3 a_direction;\n\n uniform mat4 camera;\n\n out vec4 v_color;\n out vec4 v_position;\n out vec3 v_direction;\n \n void main() {\n\n gl_Position = camera * a_position;\n gl_Position.w = 1.0;\n\n gl_PointSize = ${pointSize.toFixed(2)} * ${devicePixelRatio.toFixed(2)};\n\n v_position = (gl_Position + 1.0) / 2.0;\n v_direction = (camera * vec4(a_direction, 1.0)).xyz;\n v_color = vec4(a_color.rgb, 1.0);\n\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10028,"value":"Y0 = math.identity(ndim)._data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7960,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9810,"value":"deltaRandom = {\n console.log('deltaRandom');\n let r = math.random([ndim, ndim]);\n r = math.subtract(r, math.transpose(r));\n return r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"camera = {\n let cam = mat4.create();\n mat4.ortho(cam, -vmax/scale*aspect, vmax/scale*aspect, -vmax/scale, vmax/scale, -vmax, vmax);\n mat4.rotateX(cam, cam, elevation/180*Math.PI);\n mat4.rotateY(cam, cam, azimuth/180*Math.PI);\n \n // mat4.perspective(cam, 120, width/height, 0.01, 100);\n // mat4.multiplyScalar(cam, cam, 0.1);\n // mat4.targetTo(cam, [0,1,1],[0,0,0],[0,1,0]);\n \n return cam;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6932,"value":"v0 = ({value:undefined, prev:undefined})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6784,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6564,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"vShader_gt = VertexShader(`#version 300 es\n precision highp float;\n \n in vec4 a_position_0;\n in vec4 a_position_1;\n\n in vec4 a_color;\n in vec3 a_direction;\n\n uniform float t;\n uniform mat4 grandtour[${Math.pow(Math.ceil(ndim/4), 2)}];\n uniform mat4 camera;\n\n out vec4 v_color;\n out vec4 v_position;\n out vec3 v_direction;\n \n void main() {\n ${position_code}\n\n v_color.rgb = a_color.rgb;\n v_color.a = 1.0;\n\n gl_Position = camera * gl_Position;\n v_direction = (camera * vec4(a_direction, 1.0)).xyz;\n\n gl_Position.w = 1.0;\n gl_PointSize = ${pointSize.toFixed(2)} * ${devicePixelRatio.toFixed(2)};\n \n //depth cuing\n // float v_frac = (gl_Position.z+1.0)/2.0 + 0.4;\n // gl_PointSize *= v_frac;\n // v_color.rgb = v_color.rgb * v_frac; \n // v_color.rgb *= max(\n // 0.1,\n // (0.5+(camera * gl_Position).z} + 1.0) / 2.0\n // );\n\n v_position = (gl_Position + 1.0) / 2.0;\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"fShader_trajectory = FragmentShader(`#version 300 es\n precision highp float;\n in vec4 v_color;\n in vec4 v_position;\n\n layout(location = 0) out vec4 outColor;\n layout(location = 1) out vec4 outPosition;\n\n void main() {\n outColor = v_color;\n outPosition = (v_position + 1.0) / 2.0;\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3086,"value":"vShader_ssao = VertexShader(`#version 300 es\n\nprecision highp float;\n\nin vec2 a_position;\nin vec2 a_texCoord;\nout vec2 v_texCoord;\n\nvoid main() {\n gl_Position.xy = a_position;\n gl_Position.z = 0.0;\n gl_Position.w = 1.0;\n gl_PointSize = 10.0;\n v_texCoord = a_texCoord;\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4468,"value":"vShader_blur = VertexShader(`#version 300 es\n\nprecision highp float;\n\nin vec2 a_position;\nin vec2 a_texCoord;\nout vec2 v_texCoord;\n\nvoid main() {\n gl_Position.xy = a_position;\n gl_Position.z = 0.0;\n gl_Position.w = 1.0;\n gl_PointSize = 10.0;\n v_texCoord = a_texCoord;\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4470,"value":"fShader_blur = FragmentShader(`#version 300 es\n\nprecision highp float;\nin vec2 v_texCoord;\nout vec4 outColor;\n\nuniform sampler2D u_image;\n\nvoid main() {\n vec2 onePixel = vec2(1.0) / vec2(textureSize(u_image, 0));\n\n vec4 current_color = texture(u_image, v_texCoord);\n outColor = current_color;\n\n int count = 0;\n for (int i=${-Math.floor(blur_size/2)}; i<=${Math.ceil(blur_size/2)}; i++){\n for (int j=${-Math.floor(blur_size/2)}; j<=${Math.ceil(blur_size/2)}; j++){\n outColor += texture(u_image, v_texCoord + onePixel*vec2(i, j));\n count++;\n }\n }\n outColor /= float(count);\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4473,"value":"vShader_combine = VertexShader(`#version 300 es\n\nprecision highp float;\n\nin vec2 a_position;\nin vec2 a_texCoord;\nout vec2 v_texCoord;\n\nvoid main() {\n gl_Position.xy = a_position;\n gl_Position.z = 0.0;\n gl_Position.w = 1.0;\n gl_PointSize = 10.0;\n v_texCoord = a_texCoord;\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4475,"value":"fShader_combine = FragmentShader(`#version 300 es\n\nprecision highp float;\nin vec2 v_texCoord;\nout vec4 outColor;\n\nuniform sampler2D u_image;\nuniform sampler2D u_shade;\n\nvoid main() {\n\n vec4 color = texture(u_image, v_texCoord.xy);\n float shade = texture(u_shade, v_texCoord).x;\n // outColor = vec4(\n // mix(\n // color.rgb, \n // vec3(${CLEAR_COLOR[0]*0.5}, ${CLEAR_COLOR[1]*0.5}, ${CLEAR_COLOR[2]*0.5}), \n // max(shade-0.5, 0.0)\n // ), 1.0\n // );\n outColor = vec4(color.rgb*(1.0-shade), 1.0);\n // outColor = vec4(shade, shade, shade, 1.0);\n}\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"vmax = d3.max(positions, d=>math.norm(d))// / vmax_factor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"aspect = width/height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"## Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1733,"value":"CLEAR_COLOR = {\n let c = d3.rgb(clear_color);\n return [c.r/255, c.g/255, c.b/255];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"fog_color = `vec4(${CLEAR_COLOR}, 0.1)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"position_code = {\n let n_blocks = Math.ceil(ndim/4);\n return [\n 'gl_Position=', \n ...d3.range(n_blocks).map(i=>` +grandtour[${i*n_blocks}]*a_position_${i}`),\n // ...d3.range(n_blocks).map(i=>` +grandtour[${i}]*a_position_${i}`),\n ';'\n ].join('');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"position_code_traj = {\n let n_blocks = Math.ceil(ndim/4);\n return [\n `float mixing_factor = min(1.0, exp(-${bundling_strength.toFixed(2)}*pow(a_offset/${trajSteps.toFixed(2)}, 1.0))+0.02);\\n`,\n 'gl_Position=', \n ...d3.range(n_blocks).map(i=>\n // ` +grandtour[int(a_offset)*${n_blocks*n_blocks}+${i*n_blocks}]*a_position_${i}`),\n ` +grandtour[int(a_offset)*${n_blocks*n_blocks}+${i*n_blocks}]*mix(a_center_${i},a_position_${i},mixing_factor)`),\n ';'\n ].join('');\n}\n// gl_Position = grandtour[int(a_offset*n_blocks)+0] * a_position_0\n// + grandtour[int(a_offset*n_blocks)+2] * a_position_1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"## gl Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4598,"value":"### SSAO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6396,"value":"ssao_samples = d3.range(n_ssao_samples).map(d=>d3.range(3).map(e=>{\n return Math.sign(Math.random()-0.5) * Math.pow(Math.random()*2-1, 2);\n}))\n// ssao_samples = d3.range(n_ssao_samples).map(i=>{\n// let theta = Math.PI*2*i/n_ssao_samples + Math.random()*Math.PI*2/n_ssao_samples;\n// return [Math.cos(theta), Math.sin(theta), randn()];\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3250,"value":"sampleLoc = gl.getUniformLocation(program_ssao, 'samples')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3434,"value":"posLoc = gl.getUniformLocation(program_ssao, \"u_pos\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4980,"value":"depthLoc = gl.getUniformLocation(program_ssao, \"u_depth\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3148,"value":"positionBuffer_ssao = createBuffer(([\n [-1,1],[1,-1],[1, 1],\n [-1,1],[-1,-1],[1,-1],\n]).flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"texCoordBuffer_ssao = createBuffer(([\n [0,0],[1,1],[1,0],\n [0,0],[0,1],[1,1],\n]).flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4605,"value":"### Blur","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4924,"value":"imageLoc_blur = gl.getUniformLocation(program_blur, \"u_image\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4608,"value":"### Combine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4613,"value":"shadeLoc_combine = gl.getUniformLocation(program_combine, \"u_shade\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4616,"value":"imageLoc_combine = gl.getUniformLocation(program_combine, \"u_image\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4601,"value":"### Main","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"n = positions.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"positionBuffer = {\n let data = pad(positions, Math.ceil(ndim/4)*4);\n let array = new Float32Array(data.flat());\n return createBuffer(array);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10244,"value":"directions = numeric.dot(positions, delta.map(d=>d.slice(0,3)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10232,"value":"dirBuffer = {\n let array = new Float32Array(directions.flat());\n return createBuffer(array);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"colorBuffer = {\n let array = new Float32Array(colors.flat());\n return createBuffer(array);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"// gtLoc = d3.range(Math.pow(Math.ceil(ndim/4),2)).map(i=>gl.getUniformLocation(program, `grandtour[${i}]`))\n\ngtLoc = gl.getUniformLocation(program_gt, `grandtour`)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"cameraLoc = gl.getUniformLocation(program_gt, 'camera');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2739,"value":"function pad(data, size=8){\n return data.map(d=>[...d, ...Array(size-d.length).fill(0.0)]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"### Program_traj","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":962,"value":"positionBuffer_traj = {\n let data = pad(positions, Math.ceil(ndim/4)*4);\n data = data.map(p=>d3.range(trajSteps).map(()=>p)).flat().flat();\n return createBuffer(data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"colorBuffer_traj = {\n let data = colors.map(c=>d3.range(trajSteps).map(()=>c)).flat().flat();\n return createBuffer(data);\n // return createBuffer(time_varying_colors.flat().flat());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7362,"value":"time_varying_colors = {\n // let hue = 20;\n // let lum_scale = d3.scaleLinear().domain([0,trajSteps-1]).range([20,100])\n // let chroma_scale = d3.scaleLinear().domain([0,trajSteps-1]).range([80,20])\n\n let hue = 60;\n let lum_scale = d3.scaleLinear().domain([0,trajSteps-1]).range([100,20])\n let chroma_scale = d3.scaleLinear().domain([0,trajSteps-1]).range([80,50])\n \n return colors.map(c=>d3.range(trajSteps).map(i => {\n let rgb_val = d3.hcl(hue,chroma_scale(i),lum_scale(i)).rgb()\n // let rgb_val = d3.hcl(hue_scale(i),chroma_scale(i),lum_scale(i)).rgb()\n let r = Math.max(0,Math.min(255,rgb_val.r))\n let g = Math.max(0,Math.min(255,rgb_val.g))\n let b = Math.max(0,Math.min(255,rgb_val.b))\n return [r/255,g/255,b/255]\n }))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"offsetBuffer_traj = {\n let data = Array(n).fill(0).map(()=>d3.range(trajSteps)).flat();\n // let array = new Float32Array(data);\n return createBuffer(data);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"gtLoc2 = gl.getUniformLocation(program_traj_gt, `grandtour`)\n// gtLoc2 = {\n// let n_matrices = Math.pow(Math.ceil(ndim/4), 2);\n// return d3.range(trajSteps).map(i=>{\n// return d3.range(n_matrices).map(j=>{\n// return gl.getUniformLocation(program_traj, `grandtour[${i*n_matrices+j}]`)\n// });\n// }).flat();\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"cameraLoc2 = gl.getUniformLocation(program_traj_gt, 'camera');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8884,"value":"simplicialComplex = simplicialComplexDataset(\n 4, \n [\n // [0,1],[0,2],[0,3],[1,2],[1,3],[2,3],\n [0,1,2],[0,1,3]\n ], \n 21\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10089,"value":"function parsePosition(arrayBuffer, dim, centered=true, standardize=false){\n let positions = [...new Float32Array(arrayBuffer)];\n positions = reshape(positions, dim);\n if(centered){\n let center = math.mean(positions, 0);\n positions = positions.map(p=>math.subtract(p, center));\n }\n if(standardize){\n let std = math.std(positions, 0);\n positions = positions.map(p=>p.map((d,i)=>d/std[i]));\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9736,"value":"transient_attributes_2d_umap = parsePosition(await FileAttachment(\n \"12-Inception@1.bin\"\n).arrayBuffer(),2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9817,"value":"transient_attributes_3d_umap = parsePosition(\n await FileAttachment(\"12-Inception@2.bin\").arrayBuffer(), 3) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9741,"value":"transient_attributes_5d_umap = parsePosition(await FileAttachment(\n \"12-Inception@3.bin\"\n).arrayBuffer(),5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10132,"value":"transient_attributes_8d_umap = parsePosition(await FileAttachment(\n \"12-Inception@4.bin\"\n).arrayBuffer(),8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9962,"value":"transient_attributes = {\n let attributes = await FileAttachment(\"transient-attributes.csv\").csv();\n attributes.forEach(d=>{\n d.cameraId = d.file_name.split('/')[0];\n })\n let attr_names = Object.keys(attributes[0]).slice(2);\n return {attributes, attr_names};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10002,"value":"// transient_attributes_colors = {\n// let sc = attr_index >= 40 ? \n// d3.scaleOrdinal(d3.schemeCategory10.concat(d3.schemeTableau10))\n// // .domain(new Set(transient_attributes.attributes.map(d=>d.cameraId)))\n// : d3.interpolateViridis;\n// let colors = transient_attributes.attributes.map(a=>{\n// let l = attr_index==41 ? 0 :\n// attr_index==40 ? a.cameraId : \n// a[transient_attributes.attr_names[attr_index]];\n// let c = d3.rgb(sc(l));\n// return [c.r/255, c.g/255, c.b/255];\n// });\n// return colors;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12085,"value":"function clusterByDBSCAN(data, radius=0.1, n_neighbors=10){\n let groups = (new clustering.DBSCAN()).run(data, radius, n_neighbors);\n // let groups = (new clustering.OPTICS()).run(data, radius, n_neighbors);\n let res = {idxs:Array(data.length).fill(-1), centroids:[], groups:groups};\n groups.forEach((g,i)=>{\n g.forEach(j=>{res.idxs[j] = i;});\n res.centroids.push(math.mean(g.map(j=>data[j]), 0));\n });\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11966,"value":"function pca(data){\n let svd = numeric.svd(data);\n return svd.U.map(u=>numeric.mul(u, svd.S));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6001,"value":"### Klein Bottle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5214,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"### UMAP data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1318,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2681,"value":"### dSprites Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2679,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7300,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"### Iris data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"iris = {\n let data = await FileAttachment(\"iris.csv\").csv().then(data=>{\n let pos = data.map(d=>[\n +d.sepallength,\n +d.sepalwidth,\n +d.petallength,\n +d.petalwidth,\n ]);\n let labels = data.map(d=>d.class);\n return {pos, labels, attributes:data};\n });\n \n let positions = data.pos;\n let center = math.mean(positions, 0);\n positions = positions.map(p=>math.subtract(p, center));\n\n let sc = d3.scaleOrdinal(d3.schemeCategory10);\n let colors = data.labels.map(l=>{\n let c = d3.rgb(sc(l));\n // let c = d3.rgb(sc(0));\n return [c.r/255, c.g/255, c.b/255];\n });\n \n return {data:data.attributes, positions, colors};\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2021,"value":"ndim = positions[0].length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"gt = new GrandTourCore(ndim, 1e-2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"draw = {\n setup;\n tick;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11327,"value":"program_3d = createProgram(vShader_3d, fShader)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"program_gt = createProgram(vShader_gt, fShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11704,"value":"program_traj_3d = createProgram(vShader_3d, fShader_trajectory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"program_traj_gt = createProgram(vShader_trajectory_gt, fShader_trajectory)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3081,"value":"program_ssao = createProgram(vShader_ssao, fShader_ssao);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4477,"value":"program_blur = createProgram(vShader_blur, fShader_blur);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4479,"value":"program_combine = createProgram(vShader_combine, fShader_combine);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"function createProgram(vShader, fShader){\n const program = gl.createProgram();\n gl.attachShader(program, vShader);\n gl.attachShader(program, fShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw gl.getProgramInfoLog(program);\n invalidation.then(() => gl.deleteProgram(program));\n return program;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3088,"value":"function VertexShader(source){\n return createShader(gl, gl.VERTEX_SHADER, source);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3090,"value":"function FragmentShader(source){\n return createShader(gl, gl.FRAGMENT_SHADER, source);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"function createShader(gl, type, source){\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){\n throw gl.getShaderInfoLog(shader);\n }\n invalidation.then(() => gl.deleteShader(shader));\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"function createBuffer(data){\n data = new Float32Array(data);\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);\n invalidation.then(() => gl.deleteBuffer(buffer));\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"// function createIndexBuffer(data){\n// data = new Uint16Array(data);\n// const buffer = gl.createBuffer();\n// gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);\n// gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);\n// invalidation.then(() => gl.deleteBuffer(buffer));\n// return buffer;\n// }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"function enableAttribute(program, name, buffer, attrSize=4, stride=0, offset=0){\n let attr = gl.getAttribLocation(program, name);\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.vertexAttribPointer(attr, attrSize, gl.FLOAT, false, stride, offset);\n gl.enableVertexAttribArray(attr);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"function reshape(arr, size){\n let res = []; \n for(var i=0;i < arr.length;i = i+size)\n res.push(arr.slice(i,i+size));\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"function split_matrix(matrix){\n let nrow = Math.ceil(matrix.length/4) * 4;\n let ncol = Math.ceil(matrix[0].length/4) * 4;\n let padded = math.identity(nrow, ncol)._data;\n for(let i=0; irow.slice(j*4, j*4+4));\n res.push(submatrix);\n }\n }\n return res;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3135,"value":"function createTexture(){\n // Create a texture.\n var texture = gl.createTexture();\n\n gl.activeTexture(gl.TEXTURE0);\n gl.bindTexture(gl.TEXTURE_2D, texture);\n // Set the parameters so we don't need mips and so we're not filtering\n // and we don't repeat\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n \n return texture;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"function randn() {\n var u = 0, v = 0;\n while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)\n while(v === 0) v = Math.random();\n return Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6654,"value":"function rgb(color){\n let c = d3.rgb(color);\n return [c.r/255, c.g/255, c.b/255];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8846,"value":"function simplex1d(m){\n return numeric.linspace(0,1,m).map(i=>{\n return [i, 1-i];\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8857,"value":"function simplex2d(m, n){\n return numeric.linspace(0,1,m).map(i=>{\n return numeric.linspace(0,1-i,1+Math.ceil(n*(1-i))).map(j=>{\n return[i,j,1-i-j];\n });\n }).flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8840,"value":"function simplicialComplexDataset(n_components=4, simplex_dims=[[0,3]], n_points=11){\n let positions = [];\n simplex_dims.forEach(s_dims=>{\n let simp;\n if(s_dims.length == 2){\n let s1d = simplex1d(n_points);\n simp = math.zeros([s1d.length, n_components]);\n s1d.forEach((s,i)=>{\n simp[i][s_dims[0]] = s[0];\n simp[i][s_dims[1]] = s[1];\n });\n }else if(s_dims.length == 3){\n let s2d = simplex2d(n_points, n_points);\n simp = math.zeros([s2d.length, n_components]);\n s2d.forEach((s,i)=>{\n simp[i][s_dims[0]] = s[0];\n simp[i][s_dims[1]] = s[1];\n simp[i][s_dims[2]] = s[2];\n });\n }\n positions = positions.concat(simp);\n });\n\n let sc = d3.interpolateViridis;\n let colors = positions.map(p=>rgb(sc(p[2])));\n\n let center = math.mean(positions, 0);\n positions = positions.map(p=>numeric.sub(p, center));\n return {positions, colors};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8077,"value":"function randint(vmin, vmax){\n return Math.round(Math.random()*(vmax-vmin) + vmin);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8316,"value":"falseNeighbors = {\n let positions_low = positions.map(row=>row.slice(0,2));\n let tree_low = createKDTree(positions_low);\n let knn_low = positions_low.map((p,i)=>{\n let nn = tree_low.knn(p, 5+1).slice(1,);\n knn[i].forEach(d=>{\n let i = nn.indexOf(d);\n if(i>=0){\n nn.splice(i,1);\n }\n });\n return nn.map((d,j)=>[i,nn[j]]);\n });\n return knn_low.flat();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8308,"value":"knn = {\n let tree = createKDTree(positions);\n let knn = positions.map(p=>tree.knn(p, 30+1).slice(1,));\n return knn;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6934,"value":"function cossim(a,b){\n return numeric.dot(a,b) / Math.sqrt(numeric.dot(a,a) * numeric.dot(b,b));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6971,"value":"function mix(a,b,factor){\n return numeric.add(numeric.mul(a, factor), numeric.mul(b,1-factor));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11867,"value":"function clusterByKmeans(positions, k){\n let clusters = kmeans(positions, k);\n return {\n idxs: clusters.idxs, \n centroids: clusters.centroids, \n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6982,"value":"function normalize(a){\n return numeric.div(a, math.norm(a));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7382,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6356,"value":"## Import\n- https://observablehq.com/@observablehq/how-to-require-stubborn-modules\n- https://observablehq.com/@observablehq/module-require-debugger","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"import {GrandTourCore} from \"e6eb89cc9fd10702\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12448,"value":"clustering = require('https://bundle.run/density-clustering@1.3.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11690,"value":"kmeans = require('https://bundle.run/skmeans@0.11.3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"math = require('mathjs')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8306,"value":"createKDTree = require('https://bundle.run/static-kdtree@1.0.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"mat4 = glMatrix.mat4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"glMatrix = require('gl-matrix@3.4.3/gl-matrix-min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6354,"value":"numeric = (await import('https://cdn.skypack.dev/numeric@1.2.6?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7379,"value":"tf = require('@tensorflow/tfjs')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 30:"$2f:body"