31:T57e, function interleavedSegments(regl) { return regl({ vert: ` precision highp float; uniform float width; attribute vec2 position, pointA, pointB; uniform mat4 projection; void main() { vec2 xBasis = pointB - pointA; vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x)); vec2 point = pointA + xBasis * position.x + yBasis * width * position.y; gl_Position = projection * vec4(point, 0, 1); }`, frag: ` precision highp float; uniform vec4 color; void main() { gl_FragColor = color; }`, attributes: { position: { buffer: regl.buffer(segmentInstanceGeometry), divisor: 0 }, pointA: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 0, stride: Float32Array.BYTES_PER_ELEMENT * 4 }, pointB: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 2, stride: Float32Array.BYTES_PER_ELEMENT * 4 } }, uniforms: { width: regl.prop("width"), color: regl.prop("color"), projection: regl.prop("projection") }, cull: { enable: true, face: "back" }, count: segmentInstanceGeometry.length, instances: regl.prop("segments"), viewport: regl.prop("viewport") }); }32:T550,function interleavedStrip(regl) { return regl({ vert: ` precision highp float; attribute vec2 position; attribute vec2 pointA, pointB; uniform float width; uniform mat4 projection; void main() { vec2 xBasis = pointB - pointA; vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x)); vec2 point = pointA + xBasis * position.x + yBasis * width * position.y; gl_Position = projection * vec4(point, 0, 1); }`, frag: ` precision highp float; uniform vec4 color; void main() { gl_FragColor = color; }`, attributes: { position: { buffer: regl.buffer(segmentInstanceGeometry), divisor: 0 }, pointA: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 0 }, pointB: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 2 } }, uniforms: { width: regl.prop("width"), color: regl.prop("color"), projection: regl.prop("projection") }, cull: { enable: true, face: "back" }, depth: { enable: false }, count: segmentInstanceGeometry.length, instances: regl.prop("segments"), viewport: regl.prop("viewport") }); }33:T805,function interleavedStripRoundCapJoin3D(regl, resolution) { let roundCapJoin = roundCapJoinGeometry(regl, resolution); return regl({ vert: ` precision highp float; attribute vec3 position; attribute vec3 pointA, pointB; uniform float width; uniform vec2 resolution; uniform mat4 model, view, projection; void main() { vec4 clip0 = projection * view * model * vec4(pointA, 1.0); vec4 clip1 = projection * view * model * vec4(pointB, 1.0); vec2 screen0 = resolution * (0.5 * clip0.xy/clip0.w + 0.5); vec2 screen1 = resolution * (0.5 * clip1.xy/clip1.w + 0.5); vec2 xBasis = normalize(screen1 - screen0); vec2 yBasis = vec2(-xBasis.y, xBasis.x); vec2 pt0 = screen0 + width * (position.x * xBasis + position.y * yBasis); vec2 pt1 = screen1 + width * (position.x * xBasis + position.y * yBasis); vec2 pt = mix(pt0, pt1, position.z); vec4 clip = mix(clip0, clip1, position.z); gl_Position = vec4(clip.w * (2.0 * pt/resolution - 1.0), clip.z, clip.w); }`, frag: ` precision highp float; uniform vec4 color; void main() { gl_FragColor = color; }`, attributes: { position: { buffer: roundCapJoin.buffer, divisor: 0 }, pointA: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 0 }, pointB: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 3 } }, uniforms: { width: regl.prop("width"), color: regl.prop("color"), model: regl.prop("model"), view: regl.prop("view"), projection: regl.prop("projection"), resolution: regl.prop("resolution") }, depth: { enable: false }, cull: { enable: true, face: "back" }, count: roundCapJoin.count, instances: regl.prop("segments"), // viewport: regl.prop("viewport") }); }34:T61a,function interleavedStripRoundCapJoin(regl, resolution) { let roundCapJoin = roundCapJoinGeometry(regl, resolution); return regl({ vert: ` precision highp float; attribute vec3 position; attribute vec2 pointA, pointB; uniform float width; uniform mat4 projection; void main() { vec2 xBasis = normalize(pointB - pointA); vec2 yBasis = vec2(-xBasis.y, xBasis.x); vec2 offsetA = pointA + width * (position.x * xBasis + position.y * yBasis); vec2 offsetB = pointB + width * (position.x * xBasis + position.y * yBasis); vec2 point = mix(offsetA, offsetB, position.z); gl_Position = projection * vec4(point, 0, 1); }`, frag: ` precision highp float; uniform vec4 color; void main() { gl_FragColor = color; }`, attributes: { position: { buffer: roundCapJoin.buffer, divisor: 0 }, pointA: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 0 }, pointB: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 2 } }, uniforms: { width: regl.prop("width"), color: regl.prop("color"), projection: regl.prop("projection") }, depth: { enable: false }, cull: { enable: true, face: "back" }, count: roundCapJoin.count, instances: regl.prop("segments"), viewport: regl.prop("viewport") }); } 35:T4d9, function roundCapJoinGeometry(regl, resolution) { const instanceRoundRound = [ [0, -0.5, 0], [0, -0.5, 1], [0, 0.5, 1], [0, -0.5, 0], [0, 0.5, 1], [0, 0.5, 0] ]; // Add the left cap. for (let step = 0; step < resolution; step++) { const theta0 = Math.PI / 2 + ((step + 0) * Math.PI) / resolution; const theta1 = Math.PI / 2 + ((step + 1) * Math.PI) / resolution; instanceRoundRound.push([0, 0, 0]); instanceRoundRound.push([ 0.5 * Math.cos(theta0), 0.5 * Math.sin(theta0), 0 ]); instanceRoundRound.push([ 0.5 * Math.cos(theta1), 0.5 * Math.sin(theta1), 0 ]); } // Add the right cap. for (let step = 0; step < resolution; step++) { const theta0 = (3 * Math.PI) / 2 + ((step + 0) * Math.PI) / resolution; const theta1 = (3 * Math.PI) / 2 + ((step + 1) * Math.PI) / resolution; instanceRoundRound.push([0, 0, 1]); instanceRoundRound.push([ 0.5 * Math.cos(theta0), 0.5 * Math.sin(theta0), 1 ]); instanceRoundRound.push([ 0.5 * Math.cos(theta1), 0.5 * Math.sin(theta1), 1 ]); } return { buffer: regl.buffer(instanceRoundRound), count: instanceRoundRound.length }; }36:T45f, function roundJoin(regl, resolution) { const roundBuffer = circleGeometry(regl, resolution); return regl({ vert: ` precision highp float; attribute vec2 position; attribute vec2 point; uniform float width; uniform mat4 projection; void main() { gl_Position = projection * vec4(width * position + point, 0, 1); }`, frag: ` precision highp float; uniform vec4 color; void main() { gl_FragColor = color; }`, depth: { enable: false }, attributes: { position: { buffer: roundBuffer.buffer, divisor: 0 }, point: { buffer: regl.prop("points"), divisor: 1, offset: Float32Array.BYTES_PER_ELEMENT * 2 } }, uniforms: { width: regl.prop("width"), color: regl.prop("color"), projection: regl.prop("projection") }, cull: { enable: true, face: "back" }, primitive: "triangle fan", count: roundBuffer.count, instances: regl.prop("instances"), viewport: regl.prop("viewport") }); }37:T758,function center(strokes, width, height, scale) { var minY = Infinity var maxY = -Infinity var minX = Infinity var maxX = -Infinity var centroidX = 0 var centroidY = 0 var count = 0 var newstrokes = [] strokes.forEach(function(stroke) { stroke.forEach(function(p) { centroidX += p.x centroidY += p.y count++ }) }) centroidX /= count; centroidY /= count; strokes.forEach(function(stroke) { var newstroke = [] stroke.forEach(function(op) { var p = { x: op.x, y: op.y } p.x *= scale p.y *= scale p.x += width/2 - centroidX * scale p.y += height/2 - centroidY * scale if(p.y < minY) minY = p.y if(p.y > maxY) maxY = p.y if(p.x < minX) minX = p.x if(p.x > maxX) maxX = p.x newstroke.push(p) }) newstrokes.push(newstroke) }) var diffX = minX - (width - maxX) var diffY = minY - (height - maxY) // minY = Infinity // maxY = -Infinity // minX = Infinity // maxX = -Infinity // centroidX = 0 // centroidY = 0 newstrokes.forEach(function(stroke) { stroke.forEach(function(p) { p.x -= diffX/2 p.y -= diffY/2 // we get these again to flip the drawing that has been scaled and centered // centroidX += p.x // centroidY += p.y // if(p.y < minY) minY = p.y // if(p.y > maxY) maxY = p.y // if(p.x < minX) minX = p.x // if(p.x > maxX) maxX = p.x }) }) // centroidX /= count; // centroidY /= count; // newstrokes.forEach(function(stroke) { // stroke.forEach(function(p) { // if(p.y > centroidY) { // p.y = centroidY - (p.y - centroidY) // } else { // p.y = centroidY + (centroidY - p.y) // } // }) // }) return newstrokes } 38:T689,svg = { /* var w = 900 var h = 900 var el = DOM.svg(w,h) var svg = d3.select(el) var bw = lilwidth var bscale = bw/300 //big one // 17, 64, 53, 74, 76, 77 var big = strokifyDrawing(chosen[chosenindex]) //var big = strokifyDrawing(chosen[bigindex]) big.strokes = center(big.strokes, w,h,h/300) var drawingLine = d3.line() .x(function(d) { return d.x }) .y(function(d) { return d.y }) .curve(d3.curveBasis) console.log("datas", colored) var bgs = svg.selectAll("g.bg") .data(colored) .enter().append("g").classed("bg", true) bgs.attr("transform", function(d,i) { return "translate(" + [d.x, d.y] + ")" }) .style("stroke", function(d) { return d.rgba.a > 0 ? "#000" : "#777" //return "#777" }) .style("stroke-width", function(d) { return d.rgba.a > 0 ? 1 : 0.5 }) // .on("click", function(d) {console.log(d)}) bgs.selectAll("path.stroke").data(function(d) { return center(strokifyDrawing(d.data).strokes,bw,bw,bscale * 1.5) }) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") //.style("stroke", "#666") //.style("stroke-width", 0.5) .style("stroke-linecap", "round") var bigg = svg.append("g").classed("bigone", true) .selectAll("path.stroke").data(big.strokes) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") .style("stroke", "#111") .style("stroke-width", bigthick) .style("stroke-linecap", "round") .style("stroke-opacity", 0.0) return el */ return "commented out the svg version, its slow to update" }39:[] 2f:{"title":"Quickdraw Regl Rendering","cells":[{"id":0,"value":"md`# Quickdraw Regl Rendering\nThis notebook is an exploration of using [instanced lines](https://wwwtyro.net/2019/11/18/instanced-lines.html) to play with 3D rendering of quickdraw drawings\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"\nviewof regl = reglCanvas(\n width,\n height,\n // Math.max(400, width * 0.6), // height\n 1,//Math.min(devicePixelRatio, 1), // pixel ratio\n {\n extensions: ['ANGLE_instanced_arrays'],\n attributes: { \n antialias: true, \n depth: true\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"camera = {\n var camera = createReglCamera(regl, {\n phi: 90,\n // theta: 1,\n distance:10,\n center: [0.5, 0.5, 0],\n rotationCenter: [0.5, 0.5, 0],\n });\n createInteractions(camera);\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"model = mat4create();","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"interactions = createInteractions(camera)","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"tick = {\n let i = 0;\n while (true) {\n yield Promises.delay(60, i = (i + 1) % 360);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"drawings = chosen.map((d) => {\n return process(d, {x: Math.random(), y: Math.random(), z: Math.random()})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1048,"value":"function process(drawing, offset) {\n let w = width/2\n let h = height/2\n let ofx = (0.5 - offset.x) * 16\n let ofy = (0.5 - offset.y) * 6\n let ofz = (0.5 - offset.z) * 16\n let stroked = strokifyDrawing(drawing)\n stroked.strokes = center(stroked.strokes, w,h,h/300)\n stroked.points = stroked.strokes.map(function(stroke) {\n return stroke.map(function(d) { return [d.x/300 + ofx, 0 + ofy, d.y/300 + ofz] })\n })\n stroked.color = [offset.x, offset.y, offset.z, 0.7]\n return stroked\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"function draw3d(drawing, state) {\n const viewport = { x: 0, y: 0, width: width, height: height };\n for(var i = 0; i < drawing.points.length; i++) {\n let stroke = regl.buffer(drawing.points[i])\n rounded3d({\n points: stroke,\n width: 2,\n resolution: [width, height],\n color: drawing.color,\n model: model,\n projection: state.projection,\n view: state.view,\n viewport: viewport,\n segments: drawing.points[i].length - 1,\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"{\n tick;\n camera((state) => {\n // regl.poll();\n if(!state.dirty) return;\n regl.clear({color: [0.05, .05, 0.05, 1]});\n\n drawings.slice(0,50).forEach((d) => {\n draw3d(d, state)\n })\n })\n yield;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"rounded3d = interleavedStripRoundCapJoin3D(regl, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"projection = mat4ortho(\n mat4create(),\n // 0, 0, width, height,\n -width / 2,\n width / 2,\n -height / 2,\n height / 2,\n 0,\n -1\n );","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"function drawStroke(stroke) {\n const buffer = regl.buffer(stroke);\n interleavedSegments(regl,{\n points: buffer,\n width: width / 18,\n color: [1, 0, 0, 1],\n projection: projection,\n viewport: { x: 0, y: 0, width: width, height: height },\n segments: stroke.length / 2\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"import {reglCanvas, createReglCamera, createInteractions} from \"@rreusser/regl-tools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"import {\n mat4perspective,\n mat4create,\n mat4lookAt,\n mat4multiply,\n mat4fromTranslation,\n mat4ortho\n} from '@rreusser/gl-mat4'","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`### Instanced lines reference\n* [instanced-lines](https://wwwtyro.net/2019/11/18/instanced-lines.html)\n* [instanced-webgl-circles](https://observablehq.com/@rreusser/instanced-webgl-circles)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"function glLineStrip(regl) {\n return regl({\n vert: `\n precision highp float;\n attribute vec2 position;\n uniform mat4 projection;\n \n void main() {\n gl_Position = projection * vec4(position, 0, 1);\n }`,\n\n frag: `\n precision highp float;\n uniform vec4 color;\n void main() {\n gl_FragColor = color;\n }`,\n\n attributes: {\n position: regl.prop(\"position\")\n },\n\n uniforms: {\n color: regl.prop(\"color\"),\n projection: regl.prop(\"projection\")\n },\n\n primitive: \"line strip\",\n lineWidth: regl.prop(\"width\"),\n count: regl.prop(\"count\"),\n viewport: regl.prop(\"viewport\")\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"segmentInstanceGeometry = [\n [0, -0.5],\n [1, -0.5],\n [1, 0.5],\n [0, -0.5],\n [1, 0.5],\n [0, 0.5]\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"function circleGeometry(regl, resolution) {\n const position = [[0, 0]];\n for (var wedge = 0; wedge <= resolution; wedge++) {\n const theta = (2 * Math.PI * wedge) / resolution;\n position.push([0.5 * Math.cos(theta), 0.5 * Math.sin(theta)]);\n }\n return {\n buffer: regl.buffer(position),\n count: position.length\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"function roundCap(regl, resolution) {\n const roundBuffer = circleGeometry(regl, resolution);\n return regl({\n vert: `\n precision highp float;\n attribute vec2 position;\n uniform vec2 point;\n uniform float width;\n uniform mat4 projection;\n void main() {\n gl_Position = projection * vec4(point + width * position, 0, 1);\n }`,\n\n frag: `\n precision highp float;\n uniform vec4 color;\n void main() {\n gl_FragColor = color;\n }`,\n\n depth: {\n enable: false\n },\n\n attributes: {\n position: {\n buffer: roundBuffer.buffer\n }\n },\n\n uniforms: {\n point: regl.prop(\"point\"),\n width: regl.prop(\"width\"),\n color: regl.prop(\"color\"),\n projection: regl.prop(\"projection\")\n },\n\n cull: {\n enable: true,\n face: \"back\"\n },\n\n primitive: \"triangle fan\",\n count: roundBuffer.count,\n viewport: regl.prop(\"viewport\")\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`### Data\nWe download the data from Google Cloud Storage based on this list of filenames`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"sets = [\n \"pig_8.48_-26_1.25.json\",\n \"pig_-1.52_-23.5_1.25.json\",\n \"pig_-11.52_-33.5_1.25.json\",\n \"pig_-9.02_-33.5_1.25.json\",\n \"pig_-1.52_-31_1.25.json\",\n \"pig_-11.52_-28.5_1.25.json\",\n \"pig_25.98_14_1.25.json\",\n\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"datas = {\n var results = [];\n for (var i = 0; i < sets.length; i++) {\n var set = await d3.json(`https://storage.googleapis.com/fun-data/quickdraw/grids/${sets[i]}`);\n set.forEach(function(d) { results.push(d) })\n }\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`We also download a sample of drawings I've hand selected as being interesting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chosen = (await fetch(`https://storage.googleapis.com/fun-data/quickdraw/chosen/ids-pig-113.json`)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`### Quickdraw helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`A couple of convenience functions for converting the data to a friendlier format and centering the drawings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"function strokifyDrawing(d) {\n var drawing = JSON.parse(JSON.stringify(d)) //well that's one way to copy\n var strokes = d.drawing.map(function(s) {\n var points = []\n s[0].forEach(function(x,i) {\n points.push({x: x, y: s[1][i] })\n })\n return points;\n })\n drawing.strokes = strokes;\n return drawing\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"// viewof bigindex = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"// md`Rendering drawing #${bigindex}. Some of my favorites are 17, 53, 64, 74, 76, 77`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"//md`Thickness of the line used to draw the large pig: ${thickness}px`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"// viewof thickness = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"/*\nviewof colored = {\n var w = width\n var h = height\n var el = DOM.canvas(w,h)\n var ctx = el.getContext(\"2d\")\n \n var line = d3.line()\n .x(function(d) { return d.x * 2 })\n .y(function(d) { return d.y * 2 })\n .curve(d3.curveBasis)\n .context(ctx) // <-- so convenient!\n\n // render the large pig\n ctx.lineCap = \"round\"\n big.strokes.forEach(function(s) {\n // ctx.strokeStyle = \"#ccc\"\n ctx.strokeStyle = \"rgba(200,200,200,0.75)\"\n ctx.lineWidth = thickness\n ctx.beginPath()\n line(s) \n ctx.stroke()\n })\n\n return el\n}\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"// big = {\n// let w = width/2\n// let h = height/2\n// let stroked = strokifyDrawing(chosen[bigindex])\n// stroked.strokes = center(stroked.strokes, w,h,h/300)\n// stroked.points = stroked.strokes.map(function(stroke) {\n// return stroke.map(function(d) { return [d.x/300, 0, d.y/300] })\n// })\n// return stroked\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"// rounded = interleavedStripRoundCapJoin(regl, 10)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}