29:null 2a:["$","title",null,{"children":"Museu Nacional - WikiCommons (Esboços) | Lucas Barcellos Oliveira | Observable"}] 2f:T456,md`--- ## Introdução No dia 2 de setembro de 2018, por volta das 19h30min, um incêndio grandes proporções começou a consumir o Museu Nacional, instituição que completava 200 anos de preservação e pesquisa da História no palácio histórico localizado na Quinta da Boa Vista, Rio de Janeiro, Brasil. O fogo, que se estendeu madrugada adentro, destruiu a maior parte de um acervo da ordem das dezenas de milhões de peças e reduziu o edifício histórico que o abrigava, ora ocupado pela antiga família imperial do Brasil, a paredes, fachada e escombros. À luz de tal acontecimento, um esforço de recuperação de parte dessa história foi mobilizado. Organizações, grupos de pesquisa e a própria administração do Museu solicitaram que o público enviasse fotos e vídeos capturados no local, perenizando o que já foi exposto. A WikiCommns, fundação e plataforma que disponibiliza conteúdo online de forma aberta e mantida por uma comunidade de internautas de todo o mundo, encabeça parte dessa iniciativa, reunindo centenas de fotos de itens que hoje tornaram-se apenas isso: fotos.`30:Td2a,{ let sleep = ms => new Promise((r, j)=>setTimeout(r, ms)); const width=1000, height=750; const svg = d3.select(DOM.svg(width, height)); svg.append("image").attr("width","100%").attr("heigth","100%").attr("xlink:href","https://i.imgur.com/ziYGEdf.jpg"); let day=new Date(2018,8,2,19,30,0); let today=new Date(); svg.append("text").html(""+Math.round((today.getTime()-day.getTime())/1000/60/60/24)+" DIAS SEM MEMÓRIA").attr("font-family","sans-serif").attr("font-size",32).attr("font-weight","bold").attr("x", width/10).attr("y", height/20).attr("pointer-events","none"); svg.append('filter') .attr('id','desaturate') .append('feColorMatrix') .attr('type','matrix'); let counter=10; let imagesDict=images.map((d,i)=>{return{link:d.link,category:d.category,datetime:d.datetime,description:d.description,show:i<10}}); let showImages=imagesDict.filter(d=>d.show); let sim=d3.forceSimulation().nodes(showImages) .force('center', d3.forceCenter(width/2.5,height/3)) .force('charge', d3.forceManyBody().strength(50)) .force('collision', d3.forceCollide().radius(100)) .on('tick',ticked); let join=svg.selectAll("g image").data(showImages,d=>d.link); let enterJoin=join.enter().append("g") .append("image") .attr("xlink:href", d=>d.link) .attr("width", 0) .attr("height", 0) .on("click",clicked) .call(drag(sim)); enterJoin.append("title").text(d=>d.link.split("/").slice(-1)[0]+"\n"+d.category+"\n"+d.datetime+"\n"+d.description); let exitJoin=join.exit().transition().duration(1000).attr("y", height).remove(); enterJoin.merge(join) .transition() .duration(1000) .attr("width", 150) .attr("height", 200); async function clicked(d){ d.show=false; imagesDict[counter].show=true; counter++; showImages=imagesDict.filter(d=>d.show); console.log(imagesDict); sim=d3.forceSimulation().nodes(showImages) .force('center', d3.forceCenter(width/2.5,height/3)) .force('charge', d3.forceManyBody().strength(50)) .force('collision', d3.forceCollide().radius(100)) .on('tick',ticked); join=svg.selectAll("g image").data(showImages,d=>d.link); exitJoin=join.exit() .transition() .duration(1000) .style('filter', 'url(#desaturate)') .transition() .duration(1000) .attr("y", height) .remove(); for (let i=0;i<=1;i+=0.01){ let a=(1-i)+i*0.333; let b=(1-a)/2; let m=svg.selectAll("filter feColorMatrix"); await sleep(1); m.attr('values',`${a} ${b} ${b} 0 0 ${b} ${a} ${b} 0 0 ${b} ${b} ${a} 0 0 0 0 0 1 0`); } enterJoin=join.enter().append("g").append("image") .attr("xlink:href", d=>d.link) .attr("width", 0) .attr("height", 0) .transition() .duration(1000) .attr("width", 150) .attr("height", 200) .on("click",clicked) .call(drag(sim)); enterJoin.append("title").text(d=>d.link.split("/").slice(-1)[0]+"\n"+d.category+"\n"+d.datetime+"\n"+d.description); enterJoin.merge(join) .transition() .duration(1000) .attr("width", 150) .attr("height", 200); } function ticked(){ svg.selectAll("g image") .attr("x", d=>d.x) .attr("y", d=>d.y); } return svg.node(); }31:T1048,{ let sleep = ms => new Promise((r, j)=>setTimeout(r, ms)); const width=1000, height=750; const svg = d3.select(DOM.svg(width, height)); svg.append("image").attr("width","100%").attr("heigth","100%").attr("xlink:href","https://i.imgur.com/ziYGEdf.jpg"); let day=new Date(2018,8,2,19,30,0); let today=new Date(); svg.append("text").html(""+Math.round((today.getTime()-day.getTime())/1000/60/60/24)+" DIAS SEM MEMÓRIA").attr("font-family","sans-serif").attr("font-size",32).attr("font-weight","bold").attr("x", width/10).attr("y", height/20).attr("pointer-events","none"); svg.append('filter') .attr('id','desaturate') .append('feColorMatrix') .attr('type','matrix'); let counter=10; let imagesDict=images.map((d,i)=>{return{link:d.link,category:d.category,datetime:d.datetime,description:d.description,show:i<10}}); let showImages=imagesDict.filter(d=>d.show); let sim=d3.forceSimulation().nodes(showImages) .force('center', d3.forceCenter(width/2.5,height/3)) .force('charge', d3.forceManyBody().strength(50)) .force('collision', d3.forceCollide().radius(100)) .on('tick',ticked); let join=svg.selectAll("g").data(showImages,d=>d.link); let enterJoin=join.enter().append("g"); let frames=enterJoin .append("image") .attr("xlink:href", "https://www.beautycolorcode.com/c0c0c0-2048x1536.png") .attr("width", 0) .attr("height", 0) .attr("preserveAspectRatio","none"); let photos=enterJoin .append("image") .attr("xlink:href", d=>d.link) .attr("width", 0) .attr("height", 0) .on("click",clicked) .call(drag(sim)); photos.append("title").text(d=>d.link.split("/").slice(-1)[0]+"\n"+d.category+"\n"+d.datetime+"\n"+d.description); let exitJoin=join.exit().transition().duration(1000).attr("y", height).remove(); frames.merge(join) .transition() .duration(1000) .attr("width", 155) .attr("height", 220); photos.merge(join) .transition() .duration(1000) .attr("width", 150) .attr("height", 200); async function clicked(d){ d.show=false; imagesDict[counter].show=true; counter++; showImages=imagesDict.filter(d=>d.show); console.log(imagesDict); sim=d3.forceSimulation().nodes(showImages) .force('center', d3.forceCenter(width/2.5,height/3)) .force('charge', d3.forceManyBody().strength(50)) .force('collision', d3.forceCollide().radius(100)) .on('tick',ticked); join=svg.selectAll("g").data(showImages,d=>d.link); exitJoin=join.exit() exitJoin.selectAll("image") //fazer selecionar apenas foto, sem moldura, para dessaturizar .transition() .duration(1000) .style('filter', 'url(#desaturate)') .transition() .duration(1000) .attr("y", height) .remove(); for (let i=0;i<=1;i+=0.01){ let a=(1-i)+i*0.333; let b=(1-a)/2; let m=svg.selectAll("filter feColorMatrix"); await sleep(1); m.attr('values',`${a} ${b} ${b} 0 0 ${b} ${a} ${b} 0 0 ${b} ${b} ${a} 0 0 0 0 0 1 0`); } enterJoin=join.enter().append("g"); let frames=enterJoin .append("image") .attr("xlink:href", "https://www.beautycolorcode.com/c0c0c0-2048x1536.png") .attr("width", 0) .attr("height", 0) .attr("preserveAspectRatio","none"); let photos=enterJoin .append("image") .attr("xlink:href", d=>d.link) .attr("width", 0) .attr("height", 0) .transition() .duration(1000) .attr("width", 150) .attr("height", 200) .on("click",clicked) .call(drag(sim)); photos.append("title").text(d=>d.link.split("/").slice(-1)[0]+"\n"+d.category+"\n"+d.datetime+"\n"+d.description); frames.merge(join) .transition() .duration(1000) .attr("width", 155) .attr("height", 220); photos.merge(join) .transition() .duration(1000) .attr("width", 150) .attr("height", 200); } function ticked(){ svg.selectAll("g image") .attr("x", d=>d.x) .attr("y", d=>d.y); } return svg.node(); }32:T695,{ const width=1000, height=1000; const svg = d3.select(DOM.svg(width, height)); svg.append("image").attr("width","100%").attr("heigth","100%").attr("xlink:href","https://i.imgur.com/ziYGEdf.jpg"); let day=new Date(2018,8,2,19,30,0); let today=new Date(); svg.append("text").html(""+Math.round((today.getTime()-day.getTime())/1000/60/60/24)+" DIAS SEM MEMÓRIA").attr("font-family","sans-serif").attr("font-size",32).attr("font-weight","bold").attr("x", width/10).attr("y", height/20).attr("pointer-events","none"); let sim=d3.forceSimulation().nodes(images) .force('center', d3.forceCenter(width/2.5,height/2.5)) .force('charge', d3.forceManyBody().strength(50)) .force('collision', d3.forceCollide().radius(100)) .on('tick',ticked); let sel=svg.selectAll("g image").data(images); let enterSel=sel.enter().append("g").append("image") .attr("xlink:href", d=>d.link) .attr("width", 150) .attr("height", 150) .call(drag(sim)); enterSel.append("title").text(d=>d.link.split("/").slice(-1)[0]+"\n"+d.category+"\n"+d.datetime+"\n"+d.description); function ticked(){ svg.selectAll("g image") .attr("x", d=>d.x) .attr("y", d=>d.y); } let pos={"Indígena":0*width/7,"Arqueologia":1*width/7,"Fósseis":2*width/7,"Antropologia":3*width/7,"Miscelânia":4*width/7,"Pinturas":5*width/7,"Paleontologia":6*width/7,"Entomologia (Insetos)":7*width/7}; if(organize==true){ sim.forceSimulation().nodes(images) .force('x', d3.forceX().x(d=>pos[d.category]).strength(500)) .force('y', d3.forceY().y(d=>0).strength(500)); } return svg.node(); }33:T14f5,images=[{link:"https://upload.wikimedia.org/wikipedia/commons/9/9c/Cer%C3%A2mica_ind%C3%ADgena_MN_01.jpg",category:"Indígena",datetime:"10 January 2015, 15:08:38",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/e/ed/Cer%C3%A2mica_ind%C3%ADgena_MN_02.jpg",category:"Indígena",datetime:"10 January 2015, 15:08:45",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/8/8a/Orhan_%28vessels%29.jpg",category:"Arqueologia",datetime:"22 July 2017",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/d/d2/Roger_%28vessels%29.jpg",category:"Arqueologia",datetime:"22 July 2017",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/a/af/Stephen_%28vessels%29.jpg",category:"Arqueologia",datetime:"22 July 2017",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/4/48/Becky_%28vessels%29.jpg",category:"Arqueologia",datetime:"22 July 2017",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/b/bb/Est%C3%A1tua_do_deus_B%C3%A9s_01.jpg",category:"Arqueologia",datetime:"12:13, 11 January 2015",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/3/3a/Museu_Nacional_f%C3%B3ssil_marinho.jpg",category:"Fósseis",datetime:"23 May 2010",description:"English: National Museum, Rio de Janeiro"}, {link:"https://upload.wikimedia.org/wikipedia/commons/d/d8/11214369-Museu_Nacional_de_Hist%C3%B3ria_Natural_UFRJ_-_22_Outubro_2010_-_Rio_de_Janeiro_-_Brazil.jpg",category:"Antropologia",datetime:"22 October 2010",description:"Museu Nacional de História Natural UFRJ - 22 Outubro 2010 - Rio de Janeiro - Brazil"}, {link:"https://upload.wikimedia.org/wikipedia/commons/0/01/Cr%C3%A2nio_de_Luzia.jpg",category:"Antropologia",datetime:"2 August 2012",description:"O crânio e ossos da coxa e da bacia de Luzia foram achados em 1975, no Município de Pedro Leopoldo, Minas Gerais. Seu esqueleto foi datado de 11,5 mil anos atrás e ela deve ter morrido aos 25 anos. Neste século, seu rosto foi reconstituído na Inglaterra. Trata-se do esqueleto humano mais antigo encontrado no Brasil. (Texto exibido na exposição)."}, {link:"https://upload.wikimedia.org/wikipedia/commons/c/ce/Fon%C3%B3grafo_-_Cole%C3%A7%C3%A3o_Roquette-Pinto_MN_01.jpg",category:"Miscelânia",datetime:"10 January 2015, 14:59:09",description:"Fonógrafo da Coleção Roquette-Pinto, 1912. Acervo de etnologia do Museu Nacional/UFRJ, Rio de Janeiro, Brasil."}, {link:"https://upload.wikimedia.org/wikipedia/commons/2/22/Autor_desconhecido_-_D._Jo%C3%A3o_VI_%28MN-UFRJ%29.jpg",category:"Pinturas",datetime:"2017:07:29 20:04: 3",description:"English: Portrait of John VI of Portugal (1767-1826) Português: Autor e data desconhecidos - D. João VI. Acervo do Museu Nacional/UFRJ - Rio de Janeiro, RJ, Brasil."}, {link:"https://upload.wikimedia.org/wikipedia/commons/5/54/20130825_Brazil_Rio_de_Janeiro_0286-3_%28croped%29.jpg",category:"Pinturas",datetime:"24 August 2013, 18:06:36",description:""}, {link:"https://upload.wikimedia.org/wikipedia/commons/7/7d/1526555_-_Bar%C3%A3o_de_Guahy_-_Meteorito_Bendeg%C3%B3_-_Museu_Nacional_de_Hist%C3%B3ria_Natural_UFRJ_-_22_Outubro_2010_-_-_Rio_de_Janeiro_-_Brazil.jpg",category:"Pinturas",datetime:"22 October 2010",description:"Joaquim Elísio Pereira Marinho, primeiro e único barão e visconde de Guahy - descobridor do Meteorito Bendegó - Museu Nacional de História Natural UFRJ - 22 Outubro 2010 - Rio de Janeiro - Brazil"}, {link:"https://upload.wikimedia.org/wikipedia/commons/b/b8/Pregui%C3%A7a-gigante_%28Eremotherium%29_MN_01.jpg",category:"Paleontologia",datetime:"14:40, 9 January 2015",description:"Ground sloth (Eremotherium laurillardi) Classification: Xenarthra, Megatherinae Size: 4 meters (height); 6 meters (length) weight: 5 t Feeding: herbivore"}, {link:"https://upload.wikimedia.org/wikipedia/commons/1/16/F%C3%B3ssil_de_Cr%C3%A2nio_de_Lambeosaurus_sp.jpg",category:"Paleontologia",datetime:"17 July 2018, 14:44:21",description:"Fóssil de Crânio de Lambeosaurus sp. (herbívoro - 75 m.a. - Cretáceo Superior) da Coleção de Paleontologia - Museu Nacional/RJ"}, {link:"https://upload.wikimedia.org/wikipedia/commons/8/89/Museu_Nacional_-_Quinta_da_Boa_Vista_-_RJ_02.jpg",category:"Paleontologia",datetime:"14:15, 9 January 2015",description:"Santanaraptor skeleton Classification: Saurischia, Tyrannosauroidea Size: 2 meters (length) Feeding: carnivore"}, {link:"https://upload.wikimedia.org/wikipedia/commons/a/a9/F%C3%B3ssil_de_cr%C3%A2nio_de_Tyrannosaurus_rex.jpg",category:"Paleontologia",datetime:"17 July 2018, 14:44:11",description:"Fóssil de crânio de Tyrannosaurus rex da Coleção de Paleontologia - Museu Nacional/RJ"}, {link:"https://upload.wikimedia.org/wikipedia/commons/2/21/Acervo_de_Entomologia_-_Museu_Nacional_09.jpg",category:"Entomologia (Insetos)",datetime:"11 January 2015, 13:27:48",description:"Acervo de entomologia do Museu Nacional/UFRJ - Rio de Janeiro, Brasil."}, {link:"https://upload.wikimedia.org/wikipedia/commons/9/9b/Acervo_de_Entomologia_-_Museu_Nacional_56.jpg",category:"Entomologia (Insetos)",datetime:"11 January 2015, 13:30:22",description:"Acervo de entomologia do Museu Nacional/UFRJ - Rio de Janeiro, Brasil."}]34:T4b1,ctx = { const params = {alpha: false, depth: false, stencil: false, antialias: false}; let gl = canvas.getContext('webgl2', params); const isWebGL2 = !!gl; if (!isWebGL2) { gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params); } let halfFloat; let supportLinearFloat; if (isWebGL2) { gl.getExtension('EXT_color_buffer_float'); supportLinearFloat = gl.getExtension('OES_texture_float_linear'); } else { halfFloat = gl.getExtension('OES_texture_half_float'); supportLinearFloat = gl.getExtension('OES_texture_half_float_linear'); } gl.clearColor(0.0, 0.0, 0.0, 1.0); const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES; const internalFormat = isWebGL2 ? gl.RGBA16F : gl.RGBA; let internalFormatRG = isWebGL2 ? gl.RG16F : gl.RGBA; let formatRG = isWebGL2 ? gl.RG : gl.RGBA; if (isWebGL2) { if (!supportRenderTextureFormat(gl, internalFormatRG, formatRG, halfFloatTexType)) { internalFormatRG = gl.RGBA16F; formatRG = gl.RGBA; } } return { gl, ext: {internalFormat, internalFormatRG, formatRG, halfFloatTexType, supportLinearFloat} }; }35:Tc58,mainLoop = { let i = 0; while (true) { gl.viewport(0, 0, textureWidth, textureHeight); if (splatStack.length > 0) multipleSplats(splatStack.pop()); advectionProgram.bind(); gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight); gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.first[2]); gl.uniform1i(advectionProgram.uniforms.uSource, velocity.first[2]); gl.uniform1f(advectionProgram.uniforms.dt, dt); gl.uniform1f(advectionProgram.uniforms.dissipation, velocityDissipation); blit(velocity.second[1]); velocity.swap(); gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.first[2]); gl.uniform1i(advectionProgram.uniforms.uSource, density.first[2]); gl.uniform1f(advectionProgram.uniforms.dissipation, densityDissipation); blit(density.second[1]); density.swap(); curlProgram.bind(); gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight); gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.first[2]); blit(curl[1]); vorticityProgram.bind(); gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight); gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.first[2]); gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]); gl.uniform1f(vorticityProgram.uniforms.curl, curlDegree); gl.uniform1f(vorticityProgram.uniforms.dt, dt); blit(velocity.second[1]); velocity.swap(); divergenceProgram.bind(); gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight); gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.first[2]); blit(divergence[1]); clearProgram.bind(); let pressureTexId = pressure.first[2]; gl.activeTexture(gl.TEXTURE0 + pressureTexId); gl.bindTexture(gl.TEXTURE_2D, pressure.first[0]); gl.uniform1i(clearProgram.uniforms.uTexture, pressureTexId); gl.uniform1f(clearProgram.uniforms.value, 0.8); blit(pressure.second[1]); pressure.swap(); pressureProgram.bind(); gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight); gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]); pressureTexId = pressure.first[2]; gl.uniform1i(pressureProgram.uniforms.uPressure, pressureTexId); gl.activeTexture(gl.TEXTURE0 + pressureTexId); for (let i = 0; i < 25; i++) { gl.bindTexture(gl.TEXTURE_2D, pressure.first[0]); blit(pressure.second[1]); pressure.swap(); } gradienSubtractProgram.bind(); gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight); gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.first[2]); gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.first[2]); blit(velocity.second[1]); velocity.swap(); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); displayProgram.bind(); gl.uniform1i(displayProgram.uniforms.uTexture, density.first[2]); blit(null); yield ++i; } }36:[] 2d:{"id":"a5120703b4351497","slug":"untitled","title":"Museu Nacional - WikiCommons (Esboços)","thumbnail":"233bbbcf49d1a416638877ea4a522f4eabc48ff73a155e311443200cb3291491","access_level":"public","create_time":"$D2018-10-13T15:33:54.884Z","update_time":"$D2018-11-12T04:39:58.202Z","view_time":null,"first_public_time":"$D2018-10-13T15:34:19.509Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"78ed5d16c7b764e3","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":"starter_2024"},"version":740,"publish_version":740,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f921ee8155bda89","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":null}],"members":[{"type":"individual","id":"1f921ee8155bda89","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0fc4a120205a0e15","slug":"dias-sem-memoria-museu-nacional","title":"Dias Sem Memória - Museu Nacional","owner":{"id":"78ed5d16c7b764e3","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira"}},"type":"notebook","body":{"title":"Museu Nacional - WikiCommons (Esboços)","cells":[{"id":94,"value":"md`# Museu Nacional - WikiCommons (Esboços)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`---\n## Contexto\nEste trabalho foi desenvolvido como parte dos critérios de avaliação da disciplina \"Visualização de Dados\", eletiva oferecida pela Universidade Federal do Rio de Janeiro ao curso de Engenharia de Computação de Informação e lecionada pelos professores Claudio Esperança ([@esperanc](https://beta.observablehq.com/@esperanc)) e Doris Kosminsky.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`---\n## Exploração 1\nClique nas imagens exibidas!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"html`\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"canvas = {\n const canvas = DOM.canvas(width * devicePixelRatio, height * devicePixelRatio);\n canvas.style.width = `${1000}px`;\n canvas.style.height = `${height}px`;\n canvas.addEventListener('click', randomSplats);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`---\n## Exploração 2\nSelecione a forma de organização das imagens:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof organize=radio({\n options:[\n {label:'Original',value:'false'},\n {label:'Agrupado por tema',value:'true'}\n ],\n value:'false'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md`---\n## Recursos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`### Conjunto de Imagens`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`### Biblioteca D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3=require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"md`### Entrada do tipo \"radio button\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"md`### Definição da função de arraste com o mouse (extraído de [@esperanc/intro-to-forced-layouts](https://beta.observablehq.com/@esperanc/intro-to-forced-layouts))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alpha(1).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n if (!d3.event.active) simulation.alpha(1).restart();\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n //if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"md`### Simulação para efeito de \"fumaça\" (extraído de ([@jashkenas/webgl-fluid-simulation](https://beta.observablehq.com/@jashkenas/webgl-fluid-simulation))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"height=750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"dt=0.02","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"downsample=1.33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"densityDissipation=0.995","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"velocityDissipation=1.01","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"curlDegree=17","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"gl = ctx.gl","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"ext = ctx.ext","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"function supportRenderTextureFormat (gl, internalFormat, format, type) {\n let texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\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 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.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);\n\n let fbo = gl.createFramebuffer();\n gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);\n gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);\n\n const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);\n return status == gl.FRAMEBUFFER_COMPLETE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"function randomSplats() {\n splatStack.push(parseInt(Math.random() * 20) + 5); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"class GLProgram {\n constructor (vertexShader, fragmentShader) {\n this.uniforms = {};\n this.program = gl.createProgram();\n\n gl.attachShader(this.program, vertexShader);\n gl.attachShader(this.program, fragmentShader);\n gl.linkProgram(this.program);\n\n const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);\n for (let i = 0; i < uniformCount; i++) {\n const uniformName = gl.getActiveUniform(this.program, i).name;\n this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);\n }\n }\n\n bind () {\n gl.useProgram(this.program);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"function compileShader(type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"baseVertexShader = compileShader(gl.VERTEX_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n attribute vec2 aPosition;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform vec2 texelSize;\n void main () {\n vUv = aPosition * 0.5 + 0.5;\n vL = vUv - vec2(texelSize.x, 0.0);\n vR = vUv + vec2(texelSize.x, 0.0);\n vT = vUv + vec2(0.0, texelSize.y);\n vB = vUv - vec2(0.0, texelSize.y);\n gl_Position = vec4(aPosition, 0.0, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"clearShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n uniform sampler2D uTexture;\n uniform float value;\n void main () {\n gl_FragColor = value * texture2D(uTexture, vUv);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"displayShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n uniform sampler2D uTexture;\n void main () {\n gl_FragColor = texture2D(uTexture, vUv);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"splatShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n uniform sampler2D uTarget;\n uniform float aspectRatio;\n uniform vec3 color;\n uniform vec2 point;\n uniform float radius;\n void main () {\n vec2 p = vUv - point.xy;\n p.x *= aspectRatio;\n vec3 splat = exp(-dot(p, p) / radius) * color;\n vec3 base = texture2D(uTarget, vUv).xyz;\n gl_FragColor = vec4(base + splat, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n uniform sampler2D uVelocity;\n uniform sampler2D uSource;\n uniform vec2 texelSize;\n uniform float dt;\n uniform float dissipation;\n vec4 bilerp (in sampler2D sam, in vec2 p) {\n vec4 st;\n st.xy = floor(p - 0.5) + 0.5;\n st.zw = st.xy + 1.0;\n vec4 uv = st * texelSize.xyxy;\n vec4 a = texture2D(sam, uv.xy);\n vec4 b = texture2D(sam, uv.zy);\n vec4 c = texture2D(sam, uv.xw);\n vec4 d = texture2D(sam, uv.zw);\n vec2 f = p - st.xy;\n return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n }\n void main () {\n vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;\n gl_FragColor = dissipation * bilerp(uSource, coord);\n gl_FragColor.a = 1.0;\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"advectionShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n uniform sampler2D uVelocity;\n uniform sampler2D uSource;\n uniform vec2 texelSize;\n uniform float dt;\n uniform float dissipation;\n void main () {\n vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;\n gl_FragColor = dissipation * texture2D(uSource, coord);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"divergenceShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n vec2 sampleVelocity (in vec2 uv) {\n vec2 multiplier = vec2(1.0, 1.0);\n if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }\n if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }\n if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }\n if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }\n return multiplier * texture2D(uVelocity, uv).xy;\n }\n void main () {\n float L = sampleVelocity(vL).x;\n float R = sampleVelocity(vR).x;\n float T = sampleVelocity(vT).y;\n float B = sampleVelocity(vB).y;\n float div = 0.5 * (R - L + T - B);\n gl_FragColor = vec4(div, 0.0, 0.0, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"curlShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n void main () {\n float L = texture2D(uVelocity, vL).y;\n float R = texture2D(uVelocity, vR).y;\n float T = texture2D(uVelocity, vT).x;\n float B = texture2D(uVelocity, vB).x;\n float vorticity = R - L - T + B;\n gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"vorticityShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uVelocity;\n uniform sampler2D uCurl;\n uniform float curl;\n uniform float dt;\n void main () {\n float L = texture2D(uCurl, vL).y;\n float R = texture2D(uCurl, vR).y;\n float T = texture2D(uCurl, vT).x;\n float B = texture2D(uCurl, vB).x;\n float C = texture2D(uCurl, vUv).x;\n vec2 force = vec2(abs(T) - abs(B), abs(R) - abs(L));\n force *= 1.0 / length(force + 0.00001) * curl * C;\n vec2 vel = texture2D(uVelocity, vUv).xy;\n gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"pressureShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uPressure;\n uniform sampler2D uDivergence;\n vec2 boundary (in vec2 uv) {\n uv = min(max(uv, 0.0), 1.0);\n return uv;\n }\n void main () {\n float L = texture2D(uPressure, boundary(vL)).x;\n float R = texture2D(uPressure, boundary(vR)).x;\n float T = texture2D(uPressure, boundary(vT)).x;\n float B = texture2D(uPressure, boundary(vB)).x;\n float C = texture2D(uPressure, vUv).x;\n float divergence = texture2D(uDivergence, vUv).x;\n float pressure = (L + R + B + T - divergence) * 0.25;\n gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `\n precision highp float;\n precision mediump sampler2D;\n varying vec2 vUv;\n varying vec2 vL;\n varying vec2 vR;\n varying vec2 vT;\n varying vec2 vB;\n uniform sampler2D uPressure;\n uniform sampler2D uVelocity;\n vec2 boundary (in vec2 uv) {\n uv = min(max(uv, 0.0), 1.0);\n return uv;\n }\n void main () {\n float L = texture2D(uPressure, boundary(vL)).x;\n float R = texture2D(uPressure, boundary(vR)).x;\n float T = texture2D(uPressure, boundary(vT)).x;\n float B = texture2D(uPressure, boundary(vB)).x;\n vec2 velocity = texture2D(uVelocity, vUv).xy;\n velocity.xy -= vec2(R - L, T - B);\n gl_FragColor = vec4(velocity, 0.0, 1.0);\n }\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"function createFBO(texId, w, h, internalFormat, format, type, param) {\n gl.activeTexture(gl.TEXTURE0 + texId);\n let texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);\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.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);\n\n let fbo = gl.createFramebuffer();\n gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);\n gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);\n gl.viewport(0, 0, w, h);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n return [texture, fbo, texId];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {\n let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);\n let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);\n\n return {\n get first () {\n return fbo1;\n },\n get second () {\n return fbo2;\n },\n swap () {\n let temp = fbo1;\n fbo1 = fbo2;\n fbo2 = temp;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"textureWidth = gl.drawingBufferWidth >> downsample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"textureHeight = gl.drawingBufferHeight >> downsample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"density = createDoubleFBO(0, textureWidth, textureHeight, ext.internalFormat, gl.RGBA, ext.halfFloatTexType, ext.supportLinearFloat ? gl.LINEAR : gl.NEAREST)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"velocity = createDoubleFBO(2, textureWidth, textureHeight, ext.internalFormatRG, ext.formatRG, ext.halfFloatTexType, ext.supportLinearFloat ? gl.LINEAR : gl.NEAREST)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"divergence = createFBO(4, textureWidth, textureHeight, ext.internalFormatRG, ext.formatRG, ext.halfFloatTexType, gl.NEAREST)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"curl = createFBO(5, textureWidth, textureHeight, ext.internalFormatRG, ext.formatRG, ext.halfFloatTexType, gl.NEAREST)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"pressure = createDoubleFBO(6, textureWidth, textureHeight, ext.internalFormatRG, ext.formatRG, ext.halfFloatTexType, gl.NEAREST)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"blit = {\n gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());\n gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);\n gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);\n gl.enableVertexAttribArray(0);\n\n return (destination) => {\n gl.bindFramebuffer(gl.FRAMEBUFFER, destination);\n gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"clearProgram = new GLProgram(baseVertexShader, clearShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"displayProgram = new GLProgram(baseVertexShader, displayShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"splatProgram = new GLProgram(baseVertexShader, splatShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFloat ? advectionShader : advectionManualFilteringShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"divergenceProgram = new GLProgram(baseVertexShader, divergenceShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"curlProgram = new GLProgram(baseVertexShader, curlShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"vorticityProgram = new GLProgram(baseVertexShader, vorticityShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"pressureProgram = new GLProgram(baseVertexShader, pressureShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"function splat(x, y, dx, dy, color) {\n splatProgram.bind();\n gl.uniform1i(splatProgram.uniforms.uTarget, velocity.first[2]);\n gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);\n gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);\n gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);\n gl.uniform1f(splatProgram.uniforms.radius, 0.01);\n blit(velocity.second[1]);\n velocity.swap();\n\n gl.uniform1i(splatProgram.uniforms.uTarget, density.first[2]);\n gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.3, color[1] * 0.3, color[2] * 0.3);\n blit(density.second[1]);\n density.swap();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"function multipleSplats(amount) {\n for (let i = 0; i < amount; i++) {\n const color = [3.333, 3.333, 3.333];\n const x = canvas.width * Math.random();\n const y = canvas.height * Math.random();\n const dx = 1000 * (Math.random() - 0.5);\n const dy = 1000 * (Math.random() - 0.5);\n splat(x, y, dx, dy, color);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"splatStack = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"runOnce = randomSplats()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"