2c:null 2d:["$","title",null,{"children":"Morphing glyphs with Opentype.js and flubber | Kelley van Evert | Observable"}] 32:T627,animate_glyph = { const glyph = selectedGlyph; if (glyph) { const fontSize = 300; const size = 300; const x = (width - 300*(selectedGlyph.advanceWidth/font.unitsPerEm)) / 2; const y = 230; const opath = glyph.getPath(x, y, fontSize); const solids = _.sortBy(split_opentype_path(opath), op => op.holes.length).reverse(); const prev = (this && this._solids) ? this : []; const solid_interpolators = make_interpolators(prev, solids); const hole_interpolators = _.flatten( zip(prev.map(op => op.holes), solids.map(op => op.holes)).map(pair => { return make_interpolators(pair.le || [], pair.ri || []); }) ); const solid_paths = d3.select(svg).select('g.solids') .selectAll('path.solid').data(solid_interpolators); solid_paths.exit().remove(); solid_paths.enter().append('path') .attr('class', 'solid') .attr('fill', '#000') .attr('stroke', '#000') .attr('stroke-width', '1') .merge(solid_paths) .transition() .attrTween('d', interpolator => interpolator); const hole_paths = d3.select(svg).select('g.holes') .selectAll('path.hole').data(hole_interpolators); hole_paths.exit().remove(); hole_paths.enter().append('path') .attr('class', 'hole') .attr('fill', '#fff') .attr('stroke', '#fff') .attr('stroke-width', '1') .merge(hole_paths) .transition() .attrTween('d', interpolator => interpolator); solids._solids = true; return solids; } }33:T52f,md`## Description of the algorithm - Load an uploaded, or else default, font file, display the first 100 glyphs in a grid (*this is just a copy of Opentype.js' homepage*), and allow selection of a glyph. - Display the selected glyph, morphing to each subsequently chosen glyph. To do this: - First, the solid/hole structure of a glyph is analyzed. (Splitting the glyph's commands into separate paths, then using their bboxes to determine which paths are holes of which other paths.) Note that each solid may have zero or multiple holes. - Then, the solids are ''flubbered'' from their previous to their next state (where I simply pair them 1 by 1, ordered from having many to few holes, and then separate/combine the remaining ones 1 to N or N to 1, is necessary), and for each mapped solid, do the same for their holes. Solids and holes that (dis)appear, do so with a 'blip', i.e. morphing to (or from) a dot. This technique allows for the 'reuse' or solids and holes, so that the animation is often more pleasing. However, no serious attempt has been made to make the mapping of solids (and holes) a good one. Usually, it is good enough, but sometimes they are mapped in a counterintuitive way. A possible, relatively simple technique would be to minimize the total distance their center points would have to move.`34:T4f4,function split_opentype_path (opath) { // makes an empty clone of `opath` const mkop = () => { const op = new opentype.Path(); op.fill = opath.fill; op.stroke = opath.stroke; op.strokeWidth = opath.strokeWidth; op.holes = []; return op; }; // decides whether bbox `b` contains bbox `c` const contains = (b, c) => (b.x1 < c.x1 && c.x2 < b.x2) && (b.y1 < c.y1 && c.y2 < b.y2); // split into parts var opaths = opath.commands.reduce((opaths, c) => { if (c.type == 'Z') { return [mkop()].concat(opaths); } opaths[0].commands.push(c); return opaths; }, [mkop()]) .reverse() .filter(l => l.commands.length > 0); // determine hole structure opaths.forEach(op => { op.bbox = op.getBoundingBox(); op.centroid = op_center(op); }); for (var j = 0; j < opaths.length; j++) { const potential_hole = opaths[j]; const solid = _.find(opaths, solid => solid && contains(solid.bbox, potential_hole.bbox)); if (solid) { solid.holes.push(potential_hole); potential_hole.fill = '#eee'; opaths[j] = null; } } opaths = opaths.filter(solid => solid); return opaths; }35:T43f,// `prev` and `next` are both lists of opentype paths function make_interpolators (prev, next) { // first, some edge cases if (prev.length == 0 && 0 == next.length) { return []; } if (next.length == 0) { return prev.map(op => flubber.interpolate(op.toPathData(), [op_center(op)])); } if (prev.length == 0) { return next.map(op => flubber.interpolate([op_center(op)], op.toPathData())); } // normality var prevpaths = prev.map(op => op.toPathData()); var nextpaths = next.map(op => op.toPathData()); const N = Math.min(prevpaths.length - 1, nextpaths.length - 1); var interpolators = []; for (var i = 0; i < N; i++) { interpolators.push(flubber.interpolate(prevpaths[i], nextpaths[i])); } if (prevpaths.length > nextpaths.length) { interpolators = interpolators.concat(flubber.combine( prevpaths.slice(N), nextpaths[nextpaths.length - 1] )); } else { interpolators = interpolators.concat(flubber.separate( prevpaths[prevpaths.length - 1], nextpaths.slice(N) )); } return interpolators; }36:[] 30:{"id":"c4f4c91cb810cdd5","slug":"fonts-with-opentype-js","title":"Morphing glyphs with Opentype.js and flubber","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-02-09T10:02:37.015Z","update_time":"$D2018-03-23T17:31:24.798Z","view_time":null,"first_public_time":"$D2018-02-09T10:26:28.490Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":697,"publish_version":697,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Morphing glyphs with Opentype.js and flubber","cells":[{"id":0,"value":"md`# Morphing glyphs with Opentype.js and flubber\n\nUsing the excellent [Opentype.js](https://opentype.js.org/) and [flubber](https://github.com/veltman/flubber) libraries. See below for a description of the algorithm.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof fontInput = file({\n title: \"Select font file\",\n description: \"Select a .ttf or .otf file.\",\n accept: \".ttf, .otf\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"selectedGlyph ? html`${selectedGlyph.name.toUpperCase()}` : ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"svg = {\n const svg = DOM.svg(width, 300);\n d3.select(svg).append('g').attr('class', 'solids');\n d3.select(svg).append('g').attr('class', 'holes');\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof selectedGlyph = {\n if (!font) return html`First select a font file with the input above.`;\n\n const root = html`

\n\t\t

\n\t\t${css}\n\t

`;\n root.value = false;\n const matrix = root.querySelector('.matrix');\n \n const amount = Math.min(100, font.glyphs.length);\n const x = 20;\n const y = 63;\n const fontSize = 60;\n (Array(amount)).fill(0).forEach((z, i) => {\n const glyph = font.glyphs.get(i);\n const context = DOM.context2d(80, 80);\n glyph.draw(context, x, y, fontSize);\n //glyph.drawPoints(context, x, y, fontSize);\n glyph.drawMetrics(context, x, y, fontSize);\n \n const a = DOM.element('a', { href: '#' });\n a.glyph = glyph;\n a.append(context.canvas);\n matrix.append(a);\n });\n \n $(matrix).on('click', 'a', function () {\n root.value = this.glyph;\n root.dispatchEvent(new CustomEvent('input'));\n $('a', matrix).removeClass('selected');\n $(this).addClass('selected');\n return false;\n });\n \n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`Load a default font file [https://opentype.js.org/fonts/FiraSansMedium.woff]:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"font_default = fetch('https://opentype.js.org/fonts/FiraSansMedium.woff')\n\t\t.then(res => res.arrayBuffer())\n\t\t.then(buff => opentype.parse(buff))\n\t\t.catch(e => false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`Get Opentype.js font file for the selected font file, or else the default font file:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"font = /*fontInput.length ? opentype.parse(await Files.buffer(fontInput[0])) :*/ font_default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"css = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$$ = require('jquery')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"flubber = require('https://unpkg.com/flubber')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"opentype = require('https://opentype.js.org/dist/opentype.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"function zip (l, r) {\n var z = [];\n const N = Math.max(l.length, r.length);\n for (var i = 0; i < N; i++) {\n z.push({ le: l[i] || undefined, ri: r[i] || undefined });\n }\n return z;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"function op_center (op) {\n return [\n d3.mean(op.commands.filter(c => c.type != 'Z').map(c => c.x)),\n d3.mean(op.commands.filter(c => c.type != 'Z').map(c => c.y)),\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"