31:T49a,{ if (!canvas_render) return md`Use the toggle above.`; const W = Math.ceil(S*dim[0]); const H = Math.ceil(S*dim[1]); const ctx = DOM.context2d(W, H); const line = d3.line().context(ctx); const cloudline = d3.line().context(ctx).curve(d3.curveCatmullRomClosed.alpha(1)); const i = 0; ctx.imageSmoothingEnabled = true; ctx.fillStyle = "white"; ctx.strokeStyle = "black"; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = 2; function drawframe (i) { ctx.save(); ctx.fillRect(0, 0, W, H); ctx.fill(); ctx.scale(S, S); ctx.translate(svgpad + cloudpad, svgpad + cloudpad); perlinstrokes[i].forEach(stroke => { ctx.beginPath(); line(stroke); ctx.stroke(); }); ctx.beginPath(); cloudline(perlincloud[i]); ctx.stroke(); ctx.restore(); } const ag = new Animated_GIF(); ag.setSize(W, H); ag.setDelay(interval/1000); drawframe(0); ag.addFrameImageData(ctx.getImageData(0, 0, W, H)); drawframe(1); ag.addFrameImageData(ctx.getImageData(0, 0, W, H)); const gif = new Image(W, H); ag.getBase64GIF(im => { gif.src = im; }); return gif; }32:T444,font = { const fo = {}; // font object fo[" "] = { status: "independent", independent: { strokes: [], width: 7, }, }; font_chars.forEach(char => { const status = char_status(char); if (status != "empty" && status != "incomplete") { const co = fo[char] = { status }; // character object forms.forEach(form => { const drawn_strokes = drawn_font[char][form]; if (drawn_strokes && drawn_strokes.length > 0) { const strokes = normalize_strokes(drawn_strokes); const last_stroke = strokes[strokes.length - 1]; const go = co[form] = { // glyph object strokes, width: maxx(strokes) - minx(strokes), }; if (form.match(/^(mid|final)/)) { go.a = strokes[0][0]; // first point of first stroke } if (form.match(/^(init|mid)/)) { go.b = last_stroke[last_stroke.length - 1]; // last point of last stroke go.end = go.b[1] > 5 ? "down" : "up"; } } }); } }); return fo; }33:T490,md`Because Kabouter Wesley often speaks in cursive script, every letter essentially has to have an initial form, a medial form, and a final form. Moreover, because some letters end at the top, instead of the bottom, of the x-height indicating line—usually just the "v" and "w", though here it depends just on where the drawn letter ends—the medial and final forms both come in two variants: beginning at the top, or at the bottom, of the line. A glyph also has an "independent" form, and if the glyph is *only* given an independent form, then it will always be drawn without connecting to the previous and/or next gylph. Depending on how many form-glyphs have been drawn for a particular character, it will have one of the following statuses: * complete: all 6 forms drawn * independent: only the "independent" form is given, and that's OK, just not connected cursive writing for this character... * empty / incomplete: entirely empty or somewhere in between The two dashed lines denote the x-height of the font.`34:T434,viewof selected_char = { const S = 34; const root = d3.select(html`

`); const boxes = root.select(".letter_box") .selectAll(".letter").data(font_chars) .enter() .append("div") .attr("class", "letter") .text(d => d) .on("click", update); function update (letter) { boxes.attr("class", d => (letter == d) ? "letter active" : "letter"); root.node().value = letter; root.node().dispatchEvent(new CustomEvent("input")); } update("a"); return root.node(); }35:T41c,viewof selected_form = { const S = 30; const root = d3.select(html`

`); const boxes = root.select(".form_box") .selectAll(".form").data(forms) .enter() .append("div") .attr("class", "form") .text(d => d) .on("click", update); function update (form) { boxes.attr("class", d => (form == d) ? "form active" : "form"); root.node().value = form; root.node().dispatchEvent(new CustomEvent("input")); } update("initial"); return root.node(); }36:Ta1d,letter_input = { const letter_forms = drawn_font [selected_char] = drawn_font [selected_char] || {}; const strokes = letter_forms[selected_form] = letter_forms[selected_form] || []; const root = d3.select(DOM.svg(2*200 + 150, 2*100 + 150)); const helper_lines = root.append("g") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-dasharray", "10 10"); helper_lines.append("path").attr("d", "M 100 110 h 400"); helper_lines.append("path").attr("d", "M 100 240 h 400"); const g = root.append("g") .attr("stroke", "black") .attr("stroke-width", 20) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill", "none"); const line = d3.line(); const connectors = root.append("g") .attr("stroke-width", 5) .attr("fill", "white"); connectors.a = connectors.append("circle").attr("r", 8).attr("stroke", "red"); connectors.b = connectors.append("circle").attr("r", 8).attr("stroke", "blue"); function update () { let draw_a = strokes.length > 0 && selected_form.match(/^(mid|final)/); let draw_b = strokes.length > 0 && selected_form.match(/^(initial|mid)/); if (!draw_a) connectors.a.attr("cx", -10).attr("cy", -10); else { const a = strokes[0][0]; connectors.a.attr("cx", a[0]); connectors.a.attr("cy", a[1]); } if (!draw_b) connectors.b.attr("cx", -10).attr("cy", -10); else { const last_stroke = strokes[strokes.length - 1]; const b = last_stroke[last_stroke.length - 1]; const end = (b[1] - 110) / 13 > 5 ? "down" : "up"; console.log(selected_char + " @ " + selected_form + " = " + end); connectors.b.attr("cx", b[0]); connectors.b.attr("cy", b[1]); } const sq = g.selectAll("path").data(strokes); sq.exit().remove() sq.enter().append("path") .merge(sq) .attr("d", line); } // drawing behavior let curr, last; root.call(d3.drag() .on("start", () => { strokes.push(curr = [ last = [d3.event.x, d3.event.y] ]); }) .on("drag", () => { const next = [d3.event.x, d3.event.y]; if (Math.abs(next[0] - last[0]) + Math.abs(next[1] - last[1]) > 3) { curr.push(last = next); update(); } }) .on("end", () => { curr = last = false; update(); save_font(); }) ); // reset behavior root.on("dblclick", () => { strokes.splice(0, strokes.length); update(); save_font(); }); update(); return root.node(); }37:T28b7,noise = /* * A speed-improved perlin and simplex noise algorithms for 2D. * * Based on example code by Stefan Gustavson (stegu@itn.liu.se). * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu). * Better rank ordering method by Stefan Gustavson in 2012. * Converted to Javascript by Joseph Gentle. * * Version 2012-03-09 * * This code was placed in the public domain by its original author, * Stefan Gustavson. You may use it as you see fit, but * attribution is appreciated. * */ { var module = {}; function Grad(x, y, z) { this.x = x; this.y = y; this.z = z; } Grad.prototype.dot2 = function(x, y) { return this.x*x + this.y*y; }; Grad.prototype.dot3 = function(x, y, z) { return this.x*x + this.y*y + this.z*z; }; var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0), new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1), new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)]; var p = [151,160,137,91,90,15, 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180]; // To remove the need for index wrapping, double the permutation table length var perm = new Array(512); var gradP = new Array(512); // This isn't a very good seeding function, but it works ok. It supports 2^16 // different seed values. Write something better if you need more seeds. module.seed = function(seed) { if(seed > 0 && seed < 1) { // Scale the seed out seed *= 65536; } seed = Math.floor(seed); if(seed < 256) { seed |= seed << 8; } for(var i = 0; i < 256; i++) { var v; if (i & 1) { v = p[i] ^ (seed & 255); } else { v = p[i] ^ ((seed>>8) & 255); } perm[i] = perm[i + 256] = v; gradP[i] = gradP[i + 256] = grad3[v % 12]; } }; module.seed(0); /* for(var i=0; i<256; i++) { perm[i] = perm[i + 256] = p[i]; gradP[i] = gradP[i + 256] = grad3[perm[i] % 12]; }*/ // Skewing and unskewing factors for 2, 3, and 4 dimensions var F2 = 0.5*(Math.sqrt(3)-1); var G2 = (3-Math.sqrt(3))/6; var F3 = 1/3; var G3 = 1/6; // 2D simplex noise module.simplex2 = function(xin, yin) { var n0, n1, n2; // Noise contributions from the three corners // Skew the input space to determine which simplex cell we're in var s = (xin+yin)*F2; // Hairy factor for 2D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var t = (i+j)*G2; var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed. var y0 = yin-j+t; // For the 2D case, the simplex shape is an equilateral triangle. // Determine which simplex we are in. var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords if(x0>y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1) i1=1; j1=0; } else { // upper triangle, YX order: (0,0)->(0,1)->(1,1) i1=0; j1=1; } // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where // c = (3-sqrt(3))/6 var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords var y1 = y0 - j1 + G2; var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords var y2 = y0 - 1 + 2 * G2; // Work out the hashed gradient indices of the three simplex corners i &= 255; j &= 255; var gi0 = gradP[i+perm[j]]; var gi1 = gradP[i+i1+perm[j+j1]]; var gi2 = gradP[i+1+perm[j+1]]; // Calculate the contribution from the three corners var t0 = 0.5 - x0*x0-y0*y0; if(t0<0) { n0 = 0; } else { t0 *= t0; n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient } var t1 = 0.5 - x1*x1-y1*y1; if(t1<0) { n1 = 0; } else { t1 *= t1; n1 = t1 * t1 * gi1.dot2(x1, y1); } var t2 = 0.5 - x2*x2-y2*y2; if(t2<0) { n2 = 0; } else { t2 *= t2; n2 = t2 * t2 * gi2.dot2(x2, y2); } // Add contributions from each corner to get the final noise value. // The result is scaled to return values in the interval [-1,1]. return 70 * (n0 + n1 + n2); }; // 3D simplex noise module.simplex3 = function(xin, yin, zin) { var n0, n1, n2, n3; // Noise contributions from the four corners // Skew the input space to determine which simplex cell we're in var s = (xin+yin+zin)*F3; // Hairy factor for 2D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var k = Math.floor(zin+s); var t = (i+j+k)*G3; var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed. var y0 = yin-j+t; var z0 = zin-k+t; // For the 3D case, the simplex shape is a slightly irregular tetrahedron. // Determine which simplex we are in. var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords if(x0 >= y0) { if(y0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } else if(x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } } else { if(y0 < z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } else if(x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } } // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z), // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where // c = 1/6. var x1 = x0 - i1 + G3; // Offsets for second corner var y1 = y0 - j1 + G3; var z1 = z0 - k1 + G3; var x2 = x0 - i2 + 2 * G3; // Offsets for third corner var y2 = y0 - j2 + 2 * G3; var z2 = z0 - k2 + 2 * G3; var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner var y3 = y0 - 1 + 3 * G3; var z3 = z0 - 1 + 3 * G3; // Work out the hashed gradient indices of the four simplex corners i &= 255; j &= 255; k &= 255; var gi0 = gradP[i+ perm[j+ perm[k ]]]; var gi1 = gradP[i+i1+perm[j+j1+perm[k+k1]]]; var gi2 = gradP[i+i2+perm[j+j2+perm[k+k2]]]; var gi3 = gradP[i+ 1+perm[j+ 1+perm[k+ 1]]]; // Calculate the contribution from the four corners var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0; if(t0<0) { n0 = 0; } else { t0 *= t0; n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient } var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1; if(t1<0) { n1 = 0; } else { t1 *= t1; n1 = t1 * t1 * gi1.dot3(x1, y1, z1); } var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2; if(t2<0) { n2 = 0; } else { t2 *= t2; n2 = t2 * t2 * gi2.dot3(x2, y2, z2); } var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3; if(t3<0) { n3 = 0; } else { t3 *= t3; n3 = t3 * t3 * gi3.dot3(x3, y3, z3); } // Add contributions from each corner to get the final noise value. // The result is scaled to return values in the interval [-1,1]. return 32 * (n0 + n1 + n2 + n3); }; // ##### Perlin noise stuff function fade(t) { return t*t*t*(t*(t*6-15)+10); } function lerp(a, b, t) { return (1-t)*a + t*b; } // 2D Perlin Noise module.perlin2 = function(x, y) { // Find unit grid cell containing point var X = Math.floor(x), Y = Math.floor(y); // Get relative xy coordinates of point within that cell x = x - X; y = y - Y; // Wrap the integer cells at 255 (smaller integer period can be introduced here) X = X & 255; Y = Y & 255; // Calculate noise contributions from each of the four corners var n00 = gradP[X+perm[Y]].dot2(x, y); var n01 = gradP[X+perm[Y+1]].dot2(x, y-1); var n10 = gradP[X+1+perm[Y]].dot2(x-1, y); var n11 = gradP[X+1+perm[Y+1]].dot2(x-1, y-1); // Compute the fade curve value for x var u = fade(x); // Interpolate the four results return lerp( lerp(n00, n10, u), lerp(n01, n11, u), fade(y)); }; // 3D Perlin Noise module.perlin3 = function(x, y, z) { // Find unit grid cell containing point var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z); // Get relative xyz coordinates of point within that cell x = x - X; y = y - Y; z = z - Z; // Wrap the integer cells at 255 (smaller integer period can be introduced here) X = X & 255; Y = Y & 255; Z = Z & 255; // Calculate noise contributions from each of the eight corners var n000 = gradP[X+ perm[Y+ perm[Z ]]].dot3(x, y, z); var n001 = gradP[X+ perm[Y+ perm[Z+1]]].dot3(x, y, z-1); var n010 = gradP[X+ perm[Y+1+perm[Z ]]].dot3(x, y-1, z); var n011 = gradP[X+ perm[Y+1+perm[Z+1]]].dot3(x, y-1, z-1); var n100 = gradP[X+1+perm[Y+ perm[Z ]]].dot3(x-1, y, z); var n101 = gradP[X+1+perm[Y+ perm[Z+1]]].dot3(x-1, y, z-1); var n110 = gradP[X+1+perm[Y+1+perm[Z ]]].dot3(x-1, y-1, z); var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1); // Compute the fade curve value for x, y, z var u = fade(x); var v = fade(y); var w = fade(z); // Interpolate return lerp( lerp( lerp(n000, n100, u), lerp(n001, n101, u), w), lerp( lerp(n010, n110, u), lerp(n011, n111, u), w), v); }; return module; }38:[] 2f:{"title":"Kabouter Wesley speech balloons","cells":[{"id":0,"value":"md`# Kabouter Wesley speech balloons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`The goal of this little experiment is to create Kabouter Wesley-esque speech balloons, such as the ones below.\n\n(Kabouter Wesley is an often-grumpy and well-voiced gnome, due to Jonas Geirnaert. You should definitely go check it out, https://www.youtube.com/watch?v=UhFNC2YwQn0, although you might not get the full experience if you don't understand Dutch.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"html`

\n ${[\n \"https://static.nieuwsblad.be/Assets/Images_Upload/2010/09/03/AfbKabouterWesley1.gif?maxheight=460&maxwidth=638\",\n \"https://i.ytimg.com/vi/IXxgUSk6sVY/hqdefault.jpg\"\n // \"https://i.ytimg.com/vi/-P5YLVPK1ZE/maxresdefault.jpg\"T,\n // \"https://i.ytimg.com/vi/JMWDk0JLpMw/hqdefault.jpg\",\n ].map(\n url =>\n html`

`\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2303,"value":"viewof s2 = slider({ min: 1, max: 500, value: 100, title: mktitle(`Cloud Perlin noise scale`), description: \"(Small values lead to point-scale displacements, large values lead to word-scale displacements.)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2310,"value":"viewof a2 = slider({ min: 0, max: 20, value: 5, title: mktitle(\"Amount of Cloud Perlin noise\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1595,"value":"viewof s = slider({ min: 1, max: 100, value: 35, title: mktitle(`Perlin noise scale`), description: \"(Small values lead to point-scale displacements, large values lead to word-scale displacements.)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"viewof a = slider({ min: 0, max: 4, value: 2, title: mktitle(\"Amount of Perlin noise\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2841,"value":"viewof separate_letters = toggle({ title: \"Write non-cursively?\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2172,"value":"viewof showboxes = toggle({ title: \"Show glyph boxes?\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2871,"value":"viewof concavity = mapinputdata(slider({ min: 0, max: 1, value: .36, title: mktitle(`Concavity of balloon hull`), description: `` }), x => 10/Math.pow(x, 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"viewof lines = mapinputdata(\n textarea({ spellcheck: false, value: `Of nee toch niet ik\nhaat lezen wat een\n rotboek\n ik wou dat\n ik geen\n ogen had!`}),\n text => text.split(\"\\n\").map(line => line.split(\"\").filter(c => font[c] && font[c].status).join(\"\"))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"frames[frame % 2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"viewof mk_gif = toggle({ title: 'Start/stop GIF making' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2418,"value":"{\n if (!mk_gif) { yield md`Switch the toggle above to start making a GIF, and then right-click and save the result when done.`; return; }\n \n const ag = new Animated_GIF();\n ag.setSize(S*dim[0], S*dim[1]);\n ag.setDelay(interval/1000);\n \n function saveframe (svgnode, frametitle, resolve) {\n const context = DOM.context2d(S*dim[0], S*dim[1]);\n const image = new Image;\n image.onerror = () => { throw 'Err' };\n image.onload = () => {\n console.log('add image');\n ag.addFrame(image);\n resolve(html`Added frame ${frametitle}...
${image}`);\n };\n image.src = URL.createObjectURL(serialize(svgnode));\n }\n \n yield 'Processing ...';\n const animatedImage = new Image;\n\n yield new Promise(resolve => {\n saveframe(frames[0], \"0\", resolve);\n });\n \n yield new Promise(resolve => {\n saveframe(frames[1], \"1\", resolve);\n });\n \n yield new Promise(resolve => {\n ag.getBase64GIF(function (image) {\n animatedImage.src = image;\n resolve(animatedImage);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"frames = {\n const line = d3.line();\n const cloudline = d3.line().curve(d3.curveCatmullRomClosed.alpha(.8));\n return [0, 1].map(i => svg``);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2490,"value":"viewof S = slider({ step: 1, min: 1, max: 5, value: 2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2365,"value":"dim = {\n let Ws = boxes.map(lineboxes => {\n let W;\n if (lineboxes.length == 0) { W = 0; }\n else {\n const lastbox = lineboxes[lineboxes.length - 1];\n W = lastbox.shift[0] + lastbox.go.width;\n }\n return W;\n });\n \n let W = d3.max(Ws);\n let H = lines.length * 10;\n \n W += 2*svgpad + 2*cloudpad;\n H += 2*svgpad + 2*cloudpad + (lines.length-1)*linespacing;\n \n return [Math.ceil(W), Math.ceil(H)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"frame = {\n let i = 0;\n yield i;\n while (true) {\n yield Promises.delay(interval, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2428,"value":"interval = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":2322,"value":"perlincloud = [ apply_perlin(cloud, s, -a/2), apply_perlin(cloud, s, a/2) ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2240,"value":"cloud = {\n const cloud = hull(cloudpoints, concavity);\n\n return apply_perlin(cloud, s2, a2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2750,"value":"cloudpoints = {\n return _.flatten(_.flatten(boxes).map(box => {\n if (box.c == \" \") return [];\n const [x,y] = box.shift;\n const w = box.go.width;\n const pad = cloudpad;\n return [\n // top\n [x, y-pad],\n [x+w, y-pad],\n // right\n [x+w+pad, y ],\n [x+w+pad, y+10],\n // bottom\n [x, y+10+pad],\n [x+w, y+10+pad],\n // left\n [x-pad, y ],\n [x-pad, y+10],\n ];\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2445,"value":"cloudpad = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":2449,"value":"svgpad = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":2719,"value":"linespacing = 18","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"function apply_perlin (d, s = 35, a = 1) {\n if (typeof d[0] != \"number\") {\n return d.map(d2 => apply_perlin(d2, s, a));\n } else {\n const shiftx = noise.simplex2(d[0]/s + 1000, d[1]/s + 1000);\n const shifty = noise.simplex2(d[0]/s + 5000, d[1]/s + 5000);\n return [ d[0] + a*shiftx, d[1] + a*shifty];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"perlinstrokes = [ apply_perlin(strokes, s, -a/2), apply_perlin(strokes, s, a/2) ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"strokes = _.flatten(_.flatten(boxes).map(box => translate(box.go.strokes, box.shift)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2661,"value":"md`Then, each glyph is positioned in what I'll call a \"box\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2696,"value":"boxes = lines.map(position_boxes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2652,"value":"position_boxes = (line, lineno) => {\n \n let prevbox = { shift: [0, lineno * (10 + linespacing)] };\n \n return line.split(\"\").map((c,i) => {\n const co = font[c];\n const form = chosen_forms[lineno][i];\n const go = co[form];\n const strokes = go.strokes;\n \n let relative_shift;\n if (i == 0) {\n relative_shift = [0, 0];\n } else {\n const prev_form = chosen_forms[lineno][i - 1];\n const prev_go = font[line[i - 1]][prev_form];\n if (form == \"independent\" || prevbox.form == \"independent\") {\n relative_shift = [3.8 + prevbox.go.width, 0];\n } else {\n relative_shift = [\n prevbox.go.b[0] - go.a[0],\n prevbox.go.b[1] - go.a[1],\n ];\n }\n }\n \n const shift = [\n prevbox.shift[0] + relative_shift[0],\n prevbox.shift[1] + relative_shift[1],\n ];\n \n return prevbox = { c, form, go, shift };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2579,"value":"md`First, the character forms (glyphs) are chosen, by the following decision structure (read from top to bottom). The first three columns represent characters, and the final column denotes the chosen form for the current character. The label \"X or indep\" denotes either \"independent\" character status (the character only comes in independent form), or that the character does not exist because it's out of bounds.\n\n| prev | curr | next | → chosen form |\n|----------|----------|----------|----------------------|\n| | indep | | \\`independent\\` |\n| X or indep | | X or indep | \\`independent\\` |\n| X or indep | | | \\`initial\\` |\n| | | X or indep | \\`final_{prev.end}\\` |\n| | | | \\`mid_{prev.end}\\` |`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2693,"value":"chosen_forms = lines.map(choose_forms)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2649,"value":"choose_forms = line => {\n const N = line.length;\n \n function separate (i) {\n if (separate_letters) return true;\n \n if (i == -1) return true;\n if (i == N) return true;\n if (font[line[i]].status == \"independent\") return true;\n return false;\n };\n \n let prev_form;\n \n return d3.range(N).map(i => {\n const prev = separate(i-1);\n const curr = separate(i);\n const next = separate(i+1);\n if (curr) return prev_form = \"independent\";\n if (prev && next) return prev_form = \"independent\";\n if (prev) return prev_form = \"initial\";\n if (next) return prev_form = \"final_\" + font[line[i-1]][prev_form].end;\n /* else */ return prev_form = \"mid_\" + font[line[i-1]][prev_form].end;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2777,"value":"viewof canvas_render = toggle({ title: 'Create GIF directly via canvas' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"md`## (2) Pre-processing the drawn font`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"md`\nPart of the reason for this code is just because I didn't normalize the coordinates of the drawn font in the first place...—but also in order to further compute some useful metrics and information. Crucially, only characters with status \"complete\" or \"independent\" are included. Also, a space character (with status \"independent\" and fixed width) is manually added here.\n\nThe font object has the following structure:\n\n\\`\\`\\`javascript\n font = { // FONT object\n : { // └ CHARACTER object\n status, // | \"complete\" or \"independent\"\n

: { // └ GLYPH object\n strokes, // list of strokes\n width, // number\n a, // only if form is mid_* or final_*\n b, // only if form is initial or mid_*\n end, // only if form is initial or mid_*\n }\n }\n }\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"// The font's x-height range is 0 <= y <= 10,\n// and each glyph is aligned right of x = 0\nfunction normalize_strokes (strokes) {\n return scale(translate(strokes, [-minx(strokes), -110]), 1/12);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"function scale (d, by) {\n if (typeof d[0] != \"number\") {\n return d.map(d2 => scale(d2, by));\n } else {\n return d.map(x => x*by);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"function translate (d, ...translations) {\n if (typeof d[0] != \"number\") {\n return d.map(d2 => translate(d2, ...translations));\n } else {\n return d.map((x, i) => x + translations.map(ar => ar[i]).reduce((a, b) => a+b));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1896,"value":"function maxx (d) {\n if (typeof d[0] == \"number\") return d[0]; // just return x coordinate\n else return d3.max(d.map(maxx));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"function minx (d) {\n if (typeof d[0] == \"number\") return d[0]; // just return x coordinate\n else return d3.min(d.map(minx));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`## (1) A minimal handwritten font editor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"md`The font is stored locally, so you don't have to worry about closing your browser. (You should be worried about the \"Reset font\" button though!) For a more permanent persistence, consider saving the contents of\n\\`\\`\\`javascript\n localStorage.getItem(\"kabouter_wesley_font\")\n\\`\\`\\`\nsomewhere.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1727,"value":"{\n const status = char_status(selected_char);\n const msg = {\n empty: `This character is empty. Please draw all six forms, or just the independent form, to include the letter in the font.`,\n complete: `This character is completely defined — all six forms have been entered.`,\n independent: `This character only defines the \"independent\" form, which is OK, but it will always be rendered separately, not connected to previous or subsequent letters.`,\n incomplete: `This character is not fully defined, and hence will be excluded from the font!`,\n }[status];\n \n return html`

\n \n

${msg}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"{\n const button = html``;\n button.onclick = () => {\n if (true || window.prompt(\"Are you sure you want to reset the font? Any local changes will be lost.\")) {\n mutable drawn_font = {};\n save_font();\n }\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"{\n const button = html``;\n button.onclick = load_default;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"mutable drawn_font = {\n const d = localStorage.kabouter_wesley_font;\n if (!d) return d3.json(github_raw_url);\n else return JSON.parse(d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1733,"value":"function char_status (char) {\n const co = drawn_font[char];\n if (!co) return \"empty\";\n \n const forms_defined = Object.keys(co).filter(form => forms.indexOf(form) >= 0 && co[form].length > 0);\n if (forms_defined.length == 0) {\n return \"empty\";\n } else if (forms_defined.length == 1 && forms_defined[0] == \"independent\") {\n return \"independent\";\n } else if (forms_defined.length == 6) {\n return \"complete\";\n } else {\n return \"incomplete\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1715,"value":"font_chars = d3.range(26).map(i => String.fromCharCode(97+i))\n .concat([\"#\", \"!\", \"?\", \"@\", \"(\", \")\", \".\", \",\", \":\", \";\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"+\", \"-\", \"=\", \"*\"])\n .concat(d3.range(26).map(i => String.fromCharCode(65+i)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1724,"value":"forms = [\"initial\", \"mid_up\", \"mid_down\", \"final_up\", \"final_down\", \"independent\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"function load_default () {\n d3.json(github_raw_url)\n .then(font => {\n mutable drawn_font = font;\n save_font();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"github_raw_url = \"https://gist.githubusercontent.com/kelleyvanevert/6554977467ee2d06ad781a10a2cd7f9c/raw/95f757b3a28bcad1ef6890864077b46dcb3f06b7/wesley_font.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"function save_font () {\n mutable drawn_font = mutable drawn_font;\n localStorage.setItem(\"kabouter_wesley_font\", JSON.stringify(mutable drawn_font));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"localStorage = ({}) // window.localStorage","pinned":false,"hidden":false,"mode":"ojs"},{"id":2400,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2231,"value":"mktitle = title => `

${title}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"import { slider, textarea, select, radio, text } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"import { toggle, mapinputdata } from \"@kelleyvanevert/little-things\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2913,"value":"hull = require('hull.js@1.0.0/dist/hull.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2424,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"function rasterize(svg, scale = 1) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width * scale, rect.height * scale);\n context.drawImage(image, 0, 0, rect.width * scale, rect.height * scale);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2421,"value":"Animated_GIF = require('https://unpkg.com/animated_gif@1.0.2/dist/Animated_GIF.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}