2d:null 2e:["$","title",null,{"children":"WebGL Interstellar Overdrive | John Chmura | Observable"}] 33:T422,fragmentShader = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(shader, ` #extension GL_EXT_shader_texture_lod : enable #extension GL_OES_standard_derivatives : enable // set the precision of floating point numbers precision mediump float; // these values are populated by the vertex shader varying vec3 fragColor; varying float fragAlpha; void main() { // make our points look like circles float r = 0.0, delta = 0.0, alpha = 1.0; vec2 cxy = 2.0 * gl_PointCoord - 1.0; r = dot(cxy, cxy); // soften the edges a bit #ifdef GL_OES_standard_derivatives delta = fwidth(r); alpha = 0.9 - smoothstep(1.0 - delta, 1.0 + delta, r); #endif if (r > 1.0) { discard; } gl_FragColor = vec4(fragColor, fragAlpha * alpha); } `); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; throw new Error(gl.getShaderInfoLog(shader)); }34:Tcaf,vertexShader = { const shader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(shader, ` // per vertex attributes attribute vec2 a_position; // seed position values of the vertex attribute float a_idx; // index of the vertex // variables to send to the fragment shader varying vec3 fragColor; varying float fragAlpha; // values that are the same for all vertices uniform float u_stageWidth; uniform float u_stageHeight; uniform float u_t; //time uniform vec3 u_noiseBase; uniform float u_sizeBase; uniform float u_n; //number of points uniform vec3 u_color; // color // helper function to transform from pixel space to normalized device coordinates (NDC) // in NDC (0,0) is the middle, (-1, 1) is the top left and (1, -1) is the bottom right. vec2 normalizeCoords(vec2 position, float rotation) { // compute rotation matrix float pixelRatio = u_stageHeight / u_stageWidth; float c = cos(rotation); float s = sin(rotation); mat2 r = mat2(c, -s * pixelRatio, s, c * pixelRatio); float x = position[0]; float y = position[1]; // norm to device coords vec2 v = vec2( 2.0 * ((x / u_stageWidth) - 0.5), // invert y since we think [0,0] is bottom left in pixel space -(2.0 * ((y / u_stageHeight) - 0.5))); // center v = v + vec2(1., -1.); // apply rotation return v * r; } // noise helper function vec3 customNoise(vec3 value) { vec3 s = sin(value); return (s*s*s) * cos(value*value); } // map a value, similar to d3 scaleLinear float map(float value, float istart, float istop, float ostart,float ostop) { return ostart + (ostop - ostart) * ((value - istart) / (istop - istart)); } // map function for vec2 vec2 map(vec2 value, float istart, float istop, float ostart,float ostop) { return ostart + (ostop - ostart) * ((value - istart) / (istop - istart)); } void main() { // compute noise-vector @ time t = x, y, s vec3 custNoise = customNoise(u_noiseBase + vec3( (a_idx) * u_t*0.000000001, //wave (1.+a_idx)*0.01 + u_t*0.0000015, //roll (1.+a_idx)*0.005 + u_t*0.0000025 //blink )); // calculate x/y coords based on the noise function float radius = (15.0 + (a_idx * 0.02)) * map(custNoise[0] + custNoise[1], -2.0, 2.0, 1.0, 1.6); vec2 ePt = map(a_position, -1., 1., -radius, radius); // send color and alpha to the fragment shader fragColor = u_color * map(a_idx, 0.0, u_n / 4., 0.75, 1.0); fragAlpha = (1. - abs(custNoise[2]) + 0.1) * map(a_idx, 0.0, u_n / 2., 0.05, 1.0); // set position and point size gl_Position = vec4(normalizeCoords(ePt, radians(u_t/256.)), 0, 1.0); gl_PointSize = (4.0 + +abs(custNoise[2]) * u_sizeBase) * map(a_idx, 0.0, u_n, 0.35, 1.4); } `); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; throw new Error(gl.getShaderInfoLog(shader)); }35:[] 31:{"id":"12d9a3d4f0344cf0","slug":"webgl-interstellar-overdrive","title":"WebGL Interstellar Overdrive","thumbnail":"82fbcffdb8ae0b5d95669a4da4201736d041a5e686f41fe9ebf29389aac5a6fb","access_level":"public","create_time":"$D2018-03-31T15:46:48.419Z","update_time":"$D2018-04-02T13:29:08.826Z","view_time":null,"first_public_time":"$D2018-04-01T01:15:27.866Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"9c70b1d67c206c8a","login":"jlchmura","name":"John Chmura","avatar_url":"https://avatars-next.observableusercontent.com/7269638a3f9dc39b666e7fd9c2ecab121a65684049d9d9fa52d87d6e632ddba1","tier":"starter_2024"},"version":465,"publish_version":465,"role":null,"authored":false,"authors":[{"type":"individual","id":"a5caa5e6ae2a5fa1","login":"jlchmura","name":"John Chmura","avatar_url":"https://avatars-next.observableusercontent.com/af5aed711e6eb95755c257497904b9b472c0bec011477a73579d69eeb3ce44c1","tier":null}],"members":[{"type":"individual","id":"a5caa5e6ae2a5fa1","login":"jlchmura","name":"John Chmura","avatar_url":"https://avatars-next.observableusercontent.com/af5aed711e6eb95755c257497904b9b472c0bec011477a73579d69eeb3ce44c1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"WebGL Interstellar Overdrive","cells":[{"id":0,"value":"md`# WebGL Interstellar Overdrive\n\nWebGL version by [@jlchmura](http://twitter.com/jlchmura), based on work by [deconbatch](http://deconbatch.blogspot.com/).\n\nThe fragment shader is used to make the points look like circles. A blending function (defined in \\`setup\\`) must be used to make the point transparency display properly.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"canvas = {\n const canvas = DOM.canvas(width * devicePixelRatio, height * devicePixelRatio);\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"viewof rgb = {\n const form = html``;\n form.value = [form.r, form.g, form.b].map(i => i.valueAsNumber);\n form.r.oninput = () => form.value[0] = form.r.valueAsNumber;\n form.g.oninput = () => form.value[1] = form.g.valueAsNumber;\n form.b.oninput = () => form.value[2] = form.b.valueAsNumber;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"height = Math.ceil(width/1.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// number of points\nn = Math.pow(2, 16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"tBase = new Date().getTime()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"t=(now-tBase)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"rnd = d3.randomUniform(1.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"noiseBase=[scaleDivBase(rnd()), scale360(rnd()), scale360(rnd())]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"sizeBase=Math.max(width,height) / (28.0 / devicePixelRatio)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"scaleDivBase =d3.scaleLinear().domain([0.0, 1.0]).range([0.00005, 0.00025])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"scale360= d3.scaleLinear().domain([0.0, 1.0]).range([0, 360.0])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"scaleRadius= d3.scaleLinear().range([1.0, 1.6]).domain([-2.0, 2.0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"setup = {\n gl.viewport(0, 0, canvas.width, canvas.height);\n\n // setup blending so that all the points aren't opaque\n gl.enable(gl.BLEND);\n gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n \n // clear to white, otherwise the canvas will be black because alpha is turned off\n gl.clearColor(1,1,1,1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n \n gl.useProgram(program);\n \n gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);\n gl.vertexAttribPointer(a_idx, 1, gl.FLOAT, false, 0, 8);\n gl.enableVertexAttribArray(a_position);\n gl.enableVertexAttribArray(a_idx);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"draw = {\n setup;\n \n gl.uniform1f(u_stageWidth, width);\n gl.uniform1f(u_stageHeight, height);\n gl.uniform1f(u_sizeBase, sizeBase);\n gl.uniform1f(u_n, n);\n gl.uniform1f(u_t, t);\n gl.uniform3fv(u_noiseBase, noiseBase);\n gl.uniform3fv(u_color, [rgb[0]/256, rgb[1]/256, rgb[2]/256]);\n \n // clear canvas\n gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n \n gl.drawArrays(gl.POINTS, 0, n);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"vertexBuffer = {\n const array = new Float32Array(n*3);\n for (var i=0; i < n*3; i+=3) {\n var rads = radians(i/3*0.1);\n array[i] = Math.cos(rads);\n array[i+1] = Math.sin(rads);\n array[i+2] = i/3; // so that the index can be accessed inside the shader\n }\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"a_position = gl.getAttribLocation(program, \"a_position\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":" a_idx = gl.getAttribLocation(program, \"a_idx\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"u_t = gl.getUniformLocation(program, \"u_t\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"u_stageWidth = gl.getUniformLocation(program, \"u_stageWidth\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"u_stageHeight = gl.getUniformLocation(program, \"u_stageHeight\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"u_sizeBase = gl.getUniformLocation(program, \"u_sizeBase\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"u_n = gl.getUniformLocation(program, \"u_n\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"u_noiseBase = gl.getUniformLocation(program, \"u_noiseBase\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"u_color = gl.getUniformLocation(program, \"u_color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"program = {\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;\n throw new Error(gl.getProgramInfoLog(program));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function radians(degrees) {\n return degrees * Math.PI / 180.0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"gl = canvas.getContext(\"webgl\", {\n alpha: false,\n depth: false,\n antialias: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"