2e:null 2f:["$","title",null,{"children":"JIS Colors In Munsell Space | Zihou Ng | Observable"}] 34:T4e6,colorList = { const cols = 9; const cellW = width / cols, cellH = 16; const main = d3.select(DOM.svg(width, Math.ceil(data.length / cols) * cellH)); main.selectAll('.color').data(data).join(enter => enter.append('g').call(g => { g.append('rect').classed('col-bg', true) .attr('width', cellW).attr('height', cellH) .attr('fill', 'none'); g.append('g').attr('transform', `translate(${5},${3})`).call(g => { g.append('circle') .attr('r', 5).attr('cx', 5).attr('cy', 5) .attr('fill', d => d.rgb) .attr('stroke', d => d.hsl.l > 0.5 ? 'black' : 'white') .attr('stroke-width', 0.2); g.append('text') .classed('col-name', true) .attr('x', 14) .attr('alignment-baseline', 'hanging') .attr('font-size', 10) .attr('fill', 'black') .attr('font-family', 'Open Sans') .text(d => d.name); }); g.append('rect').classed('col-fg', true) .attr('width', cellW).attr('height', cellH) .attr('fill', 'transparent') .style('cursor', 'pointer'); })) .attr('id', d => `col-${d.id}`) .classed('color', true) .attr('transform', (d,i) => `translate(${(i%cols)*cellW},${(i/cols|0)*cellH})`); return main.node(); }35:T41f,current = Generators.observe(next => { const canvas = d3.select(gl.canvas); let cur = undefined; next(cur); const colList = d3.select(colorList); function emit(val) { if (val != cur) { cur = val; colList.selectAll('.col-bg').attr('fill', 'none'); colList.selectAll('.col-name').attr('fill', 'black'); if (cur) { const ids = byMunsell.get(id2munsell[cur]).map(d => `#col-${d.id}`).join(','); const g = colList.selectAll(ids); g.select('.col-bg').attr('fill', d => d.rgb); g.select('.col-name').attr('fill', d => d.hsl.l > 0.7 ? 'black' : 'white'); } next(cur); } } canvas.on('mousemove', () => emit(pick(d3.event.offsetX, gl.canvas.height - d3.event.offsetY))); const cols = colList.selectAll('.color'); cols.on('mouseover', () => emit(d3.select(d3.event.currentTarget).datum().id)); cols.on('mouseout', () => emit(undefined)); return () => { canvas.on('mousemove', null); cols.on('mouseover', null).on('mouseout', null); }; })36:T5f5,camera = Generators.observe(next => { const from = [0.06443712511598325, 0.04716159114565092, 0.13574118845441735]; const to = [4.091594162865023, 2.994641531502906, 8.619221502212762]; const cam = new Camera([gl.drawingBufferWidth, gl.drawingBufferHeight], from); let cancel = tween(t => (v.mixN(cam.pos, from, to, t),next(cam)), 0.001, 0.9); const canvas = d3.select(gl.canvas); canvas.call(d3.drag().on('start', () => { cam.start(d3.event.x, d3.event.y); cancel(); d3.event.on('drag', () => next(cam.drag(d3.event.x, d3.event.y))); })); canvas.on('wheel', () => { d3.event.preventDefault(); cancel(); next(cam.zoom(d3.event.deltaY * 1e-3)); }); canvas.on('click', () => { const id = pick(d3.event.offsetX, gl.canvas.height - d3.event.offsetY); if (id) { const start = v.copy(cam.pos); const target = embedding[munsell2emb[id2munsell[id]]].viewPos; cancel(); cancel = tween(t => (v.mixN(cam.pos, start, target, t), next(cam))); } }); const cols = d3.select(colorList).selectAll('.color'); cols.on('click', () => { const id = d3.select(d3.event.currentTarget).datum().id; const emb = embedding[munsell2emb[id2munsell[id]]]; if (emb) { const start = v.copy(cam.pos); cancel(); cancel = tween(t => (v.mixN(cam.pos, start, emb.viewPos, t), next(cam))); } }); return () => { canvas.on('drag', null).on('wheel', null).on('click', null); cols.on('click', null); cancel(); } })37:T670,labels = defModel(gl, { attribs: { position: { data: new Float32Array(embedding.map(d => d.pos).flat(1)) }, info: { data: new Float32Array(glyphs.info.flat(1)) }, }, num: glyphs.info.length, uniforms: {}, mode: webgl.DrawMode.POINTS, shader: webgl.defShader(gl, { vs: ` void main() { vec4 pos = view * model * vec4(position, 1.0); v_info = info; gl_Position = proj * pos; gl_PointSize = max(-size / pos.z, 5.0); }`, fs: ` void main() { vec2 pc = gl_PointCoord; float s = (gl_PointCoord.x - (0.5 - v_info.z * 0.5)) / v_info.z; float x = v_info.x + (v_info.z * cell.x) * clamp(s, 0.0, 1.0); float aspect = cell.y / cell.x; float t = (gl_PointCoord.y - (0.5 - aspect * 0.5)) / aspect; float y = v_info.y + cell.y * clamp(t, 0.0, 1.0); float dist = texture2D(glyphs, vec2(x,y)).r; float alpha = smoothstep(buffer - gamma, buffer + gamma, dist); gl_FragColor = vec4(color, alpha); }`, declPrefixes: { v: "v_" }, attribs: { position: 'vec3', info: 'vec4', }, varying: { info: 'vec4', }, uniforms: { model: ["mat4", m.identity44([])], proj: ["mat4", proj], view: "mat4", size: ['float', 160], cell: ['vec2', glyphs.cell], color: 'vec3', buffer: 'float', gamma: 'float', glyphs: ["sampler2D", 0], }, state: { depth: true, cull: false, blend: true, blendFn: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA] } }), textures: [webgl.defTexture(gl, { premultiply: true, filter: [gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR], mipmap: true, image: glyphs.canvas, })], })38:T598,points = defModel(gl, { attribs: { position: { data: new Float32Array(embedding.map(d => d.pos).flat(1)) }, color: { data: new Float32Array(embedding.map(d => d.color).flat(1)) }, index: { data: new Float32Array(embedding.map(d => d.index).flat(1)) }, }, num: embedding.length, uniforms: {}, mode: webgl.DrawMode.POINTS, shader: webgl.defShader(gl, { vs: ` void main() { vec4 pos = view * model * vec4(position, 1.0); v_color = color; v_index = index; gl_Position = proj * pos; float factor = 1.0; if (distance(current, index) < 1e-3) factor = 1.2; gl_PointSize = max(-size * factor / pos.z, 5.0); }`, fs: ` void main() { vec2 pc = gl_PointCoord * 2.0 - 1.0; float delta = 1e-2; float t = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, dot(pc, pc)); if (t < delta) discard; vec4 color = vec4(v_color, 1.0) * t; gl_FragColor = mix(color, vec4(v_index, 1.0), picking); }`, declPrefixes: { v: "v_" }, attribs: { position: 'vec3', color: 'vec3', index: 'vec3', }, varying: { color: 'vec3', index: 'vec3', }, uniforms: { model: ["mat4", m.identity44([])], proj: ["mat4", proj], view: "mat4", picking: 'float', current: 'vec3', size: ['float', 120] }, state: { depth: true, cull: false, blend: true, blendFn: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA] } }) })39:T7a9,class Camera { constructor(size, pos, target = v.ZERO3, up = v.Y3) { this.pos = pos; this.target = v.copy(target); this.up = v.copy(up); Object.defineProperties(this, { _radius: { value: Math.min(...size), writable: true }, _center: { value: v.mulN([], size, 0.5), writable: true }, _camUp: { value: [], writable: true }, _viewDir: { value: [], writable: true }, _down: { value: [], writable: true }, _delta: { value: [], writable: true }, _side: { value: [], writable: true }, _axis: { value: [], writable: true }, _vd: { value: [], writable: true }, _rot: { value: [], writable: true }, }); } _spherePos(out, x, y) { v.divN(null, v.setC3(out, x - this._center[0], -(y - this._center[1]), 0), this._radius); const mag = v.magSq(out); return mag > 1.0 ? v.normalize(null, out) : (out[2] = Math.sqrt(1.0 - mag), out); } start(x, y) { this._spherePos(this._down, x, y); v.set(this._camUp, this.up); v.sub(this._viewDir, this.pos, this.target); return this; } drag(x, y) { v.sub(null, this._spherePos(this._delta, x, y), this._down); v.cross3(this._side, this._camUp, this._viewDir) v.mulN(null, v.normalize(null, this._side), this._delta[0]); v.mulN(this._axis, this._camUp, this._delta[1]); v.add(null, this._axis, this._side); v.cross3(null, this._axis, this._viewDir) v.normalize(null, this._axis); m.rotationAroundAxis33(this._rot, this._axis, v.magSq(this._delta) * 5); m.mulV(this.up, this._rot, this._camUp); v.add(this.pos, this.target, m.mulV(this._vd, this._rot, this._viewDir)); return this; } zoom(delta, min = 0.1, max = 10.0) { v.sub(this._vd, this.target, this.pos); const mag = math.clamp(Math.pow(Math.E, delta) * v.mag(this._vd), min, max); v.mulN(null, v.sub(this.pos, this.target, v.normalize(null, this._vd)), mag); return this; } }3a:T516,viewof glyphs = { const fontSize = 14, padding = 5; const width = 1024, height = 1024; const cols = 8, cellW = width / 8, cellH = fontSize + padding * 2; const radius = 9, cutoff = 0.25; const font = `${fontSize}px "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Open Sans",sans-serif`; const ctx = DOM.context2d(width, height); ctx.font = font; ctx.textBaseline = 'top'; ctx.fillStyle = 'black'; const info = []; const w = cellW / width, h = cellH / height; embedding.forEach((e, i) => { const x = i % cols, y = i/cols|0; info.push([ x * w, y * h, (ctx.measureText(e.name).width + padding * 2) / cellW ]); ctx.save(); ctx.translate(x * cellW, y * cellH); ctx.fillText(e.name, padding, padding); ctx.restore(); }); const img = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); const sdf = getSDF(img, radius, cutoff); sdf.forEach((v, i) => { img.data[4 * i + 0] = v; img.data[4 * i + 1] = v; img.data[4 * i + 2] = v; img.data[4 * i + 3] = 255; }); ctx.putImageData(img, 0, 0); const elm = html`

${ctx.canvas}

`; elm.value = { canvas: ctx.canvas, info, cell: [w, h] }; return elm; }3b:T6ea,getSDF = { // https://github.com/mapbox/tiny-sdf const INF = 1e20; function edt1d(grid, offset, stride, length, f, v, z) { let q, k, s, r; v[0] = 0; z[0] = -INF; z[1] = INF; for (q = 0; q < length; q++) f[q] = grid[offset + q * stride]; for (q = 1, k = 0, s = 0; q < length; q++) { do { r = v[k]; s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2; } while (s <= z[k] && --k > -1); k++; v[k] = q; z[k] = s; z[k + 1] = INF; } for (q = 0, k = 0; q < length; q++) { while (z[k + 1] < q) k++; r = v[k]; grid[offset + q * stride] = f[r] + (q - r) * (q - r); } } function edt(grid, width, height, f, v, z) { for (let x = 0; x < width; x++) edt1d(grid, x, width, height, f, v, z); for (let y = 0; y < height; y++) edt1d(grid, y * width, 1, width, f, v, z); } return (img, radius, cutoff) => { const length = img.width * img.height; const size = Math.max(img.width, img.height); const outer = new Float32Array(length), inner = new Float32Array(length); for (let i = 0; i < length; i++) { const a = img.data[i * 4 + 3] / 255; outer[i] = a === 0 ? INF : Math.max(0, 0.5 - a) ** 2; inner[i] = a === 1 ? INF : Math.max(0, a - 0.5) ** 2; } const f = new Float64Array(size); const z = new Float64Array(size + 1); const v = new Uint16Array(size); edt(outer, img.width, img.height, f, v, z); edt(inner, img.width, img.height, f, v, z); const alpha = new Uint8ClampedArray(length); for (let i = 0; i < length; i++) { const d = Math.sqrt(outer[i]) - Math.sqrt(inner[i]); alpha[i] = Math.round(255 - 255 * (d / radius + cutoff)); } return alpha; }; }3c:[{"id":"35de8d81caf6d3e807595b5ab50eace111e755889fc3bd64719572a190edf0edef07a0cd279b8690d43c41b80d7eb4cd2bb50bf689ddd4a27e47ec2fc4eb2479","href":"https://static.observableusercontent.com/files/35de8d81caf6d3e807595b5ab50eace111e755889fc3bd64719572a190edf0edef07a0cd279b8690d43c41b80d7eb4cd2bb50bf689ddd4a27e47ec2fc4eb2479","name":"jis269@1.csv","type":"text/csv","lastModified":1586950620192.418,"size":8502}] 32:{"id":"6243540cfef6e274","slug":"jis-colors-in-munsell-space","title":"JIS Colors In Munsell Space","thumbnail":"9c7c1a6dd86ca43d8e71cd6b638f3e594771bc15aee5728e63def19c7100e1e3","access_level":"public","create_time":"$D2020-04-09T11:57:46.554Z","update_time":"$D2022-07-05T09:26:48.429Z","view_time":null,"first_public_time":"$D2020-04-16T18:46:02.996Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":4384,"publish_version":4384,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"b61c4cbf8581f558","slug":"visualizations","title":"Visualizations","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"title":"JIS Colors In Munsell Space","cells":[{"id":0,"value":"md`# JIS Colors In Munsell Space`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4281,"value":"md`\nIn [JIS Z 8102:2001](https://webdesk.jsa.or.jp/books/W11M0090/index/?bunsyo_id=JIS+Z+8102%3A2001), the [Japanese Industrial Standards](https://en.wikipedia.org/wiki/Japanese_Industrial_Standards) defines 269 *Names of non-luminous object colours* and the corresponding [Munsell notation](http://mezala.la.coocan.jp/pc/jiscolor/jiscolor.html). \n\nInspired by Jacob Rus's [Munsell spin](https://observablehq.com/@jrus/munsell-spin) and [Nippon Colors](https://nipponcolors.com/) back in 2010, I embed these JIS colors into the munsell color space. You can explore them by navigating the 3d space or by choosing from the list.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"viewof gl = {\n const canvas = DOM.canvas(width, width / 1.618);\n const gl = canvas.value = canvas.getContext('webgl');\n gl.getExtension(\"WEBGL_draw_buffers\");\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3659,"value":"{\n if (!current) return md`Choose a color:`;\n \n const label = d => {\n const color = d.hsl.l > 0.7 ? 'black' : 'white';\n return `${d.name}`;\n }\n \n const munsell = d => d.h != '−' ? `\\`${d.h} ${d.v}/${d.c}\\`` : 'no munsell value';\n \n const ds = byMunsell.get(id2munsell[current]);\n return md`${ds.map(label).join(' ')} ${munsell(ds[0])}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3162,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4211,"value":"md`---\n## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4220,"value":"md`### Runtime Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"render = {\n gl.enable(gl.SAMPLE_COVERAGE);\n gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);\n gl.depthFunc(gl.LEQUAL);\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n \n axes.uniforms.view = view;\n points.uniforms.view = view;\n points.uniforms.current = ID.encode(current);\n labels.uniforms.view = view;\n \n fbo.bind();\n gl.clearColor(1.0, 1.0, 1.0, 1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n \n points.uniforms.picking = 1;\n webgl.draw(points);\n fbo.unbind();\n \n gl.clearColor(.4, .4, .4, 1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n \n webgl.draw(axes);\n \n points.uniforms.picking = 0;\n webgl.draw(points);\n\n labels.uniforms.color = [1,1,1];\n labels.uniforms.buffer = 0.50;\n labels.uniforms.gamma = 0.078;\n webgl.draw(labels);\n \n labels.uniforms.color = [0,0,0];\n labels.uniforms.buffer = 0.73;\n labels.uniforms.gamma = 0.13;\n webgl.draw(labels);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"view = m.lookAt(this || [], camera.pos, camera.target, camera.up)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"proj = m.perspective([], 45, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.01, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2888,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`### WebGL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3943,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"axes = defModel(gl, {\n attribs: {\n position: {\n data: new Float32Array([\n 0, 0, 0, 1, 0, 0, // x\n 0, 0, 0, 0, 1, 0, // y\n 0, 0, 0, 0, 0, 1 // z\n ])\n },\n color: {\n data: new Float32Array([\n 1, 0, 0, 1, 0, 0, // r\n 0, 1, 0, 0, 1, 0, // g\n 0, 0, 1, 0, 0, 1, // b\n ]),\n size: 3\n }\n },\n mode: webgl.DrawMode.LINES, num: 6, uniforms: {},\n shader: webgl.defShader(gl, {\n vs: `\nvoid main() {\n v_color = color;\n gl_Position = proj * view * model * vec4(position, 1.0);\n}`,\n fs: `\nvoid main() {\n gl_FragColor = vec4(v_color, 1.0);\n}`,\n declPrefixes: { v: \"v_\" },\n attribs: {\n position: 'vec3',\n color: 'vec3'\n },\n varying: {\n color: \"vec3\",\n },\n uniforms: {\n model: [\"mat4\", m.scale44([], 10)],\n proj: [\"mat4\", proj],\n view: \"mat4\",\n },\n state: { depth: true }\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"fbo = webgl.defFBO(gl, { \n tex: [webgl.defTexture(gl, { width, height: gl.canvas.height, premultiply: true, image: null })],\n depth: webgl.defRBO(gl, { width, height: gl.canvas.height })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1642,"value":"pick = {\n const out = new Uint8Array(4);\n return (x, y) => {\n fbo.bind();\n gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, out);\n fbo.unbind();\n const id = ID.decode(out);\n return id != 0xffffff ? id : undefined;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2878,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3868,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`### Data & Indices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = {\n const data = d3.csvParse(await FileAttachment(\"jis269@1.csv\").text(), d3.autoType);\n for (const d of data) {\n const [_, step, sector] = d.h.match(/(\\d?\\.?\\d?)([A-Z]*)/);\n const col = d3.rgb(d.rgb)\n const color = [col.r/255, col.g/255, col.b/255];\n const c = d.c === null ? 0 : d.c;\n const munsell = `${d.h},${d.v},${d.c}`;\n const hsl = d3.hsl(d.rgb);\n Object.assign(d, { step, sector, color, c, munsell, hsl });\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"embedding = {\n const hues = Object.fromEntries(['R','RP','P','PB','B','BG','G','GY','Y','YR'].map((h,i,a) => [h,i/a.length]));\n const munsell = new Set();\n const res = [];\n \n const r = d3.scaleLinear(d3.extent(data, d => d.c),[0,4]);\n const y = d3.scaleLinear(d3.extent(data, d => d.v),[-2.5,2.5]);\n \n for (const d of data) {\n if (d.id == 146 || d.id == 147) continue;\n \n if (!munsell.has(d.munsell)) {\n munsell.add(d.munsell);\n \n let f = 0;\n if (d.sector != 'N') f = hues[d.sector] + parseFloat(d.step) / 100;\n const theta = f * math.TAU;\n const pos = [Math.cos(theta) * r(d.c), y(d.v), Math.sin(theta) * r(d.c)];\n\n const index = ID.encode(d.id);\n const viewPos = v.mulN(null, v.normalize([], pos), v.mag(pos) + 0.3);\n res.push({ \n pos, index, viewPos, \n color: d.color, name: d.name, munsell: d.munsell\n });\n }\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3730,"value":"munsell2emb = Object.fromEntries(embedding.map((d, i) => [d.munsell, i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3621,"value":"id2munsell = Object.fromEntries(data.map(d => [d.id, d.munsell]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3631,"value":"byMunsell = d3.group(data, d => d.munsell)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1583,"value":"ID = ({\n encode: hex => {\n const r = ( hex >> 16 & 0xff ) / 255;\n const g = ( hex >> 8 & 0xff ) / 255;\n const b = ( hex & 0xff ) / 255;\n return [r, g, b];\n },\n decode: ([r, g, b]) => (r << 16) | (g << 8) | b\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`### Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"defModel = (gl, spec) => Generators.disposable(webgl.compileModel(gl, spec), model => {\n // model.shader && model.shader.release();\n Object.values(model.attribs).forEach(({ buffer }) => buffer.release());\n if (model.instances) {\n Object.values(model.instances.attribs).forEach(({ buffer }) => buffer.release());\n } \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2293,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3834,"value":"tween = (f, speed = 0.08, eps = 1e-3) => {\n let t = 0;\n let handle = requestAnimationFrame(function frame() {\n f(t);\n t += (1 - t) * speed;\n if (Math.abs(1 - t) > eps)\n handle = requestAnimationFrame(frame);\n });\n\n return () => cancelAnimationFrame(handle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"math = {\n // some math utils stolen from @thi.ng/math\n \n const DEG2RAD = Math.PI / 180;\n const norm = (x, a, b) => b !== a ? (x - a) / (b - a) : 0;\n const clamp = (x, min, max) => x < min ? min : x > max ? max : x;\n const clamp01 = x => clamp(x, 0, 1);\n const mix = (a, b, t) => a + (b - a) * t;\n const fit = (x, a, b, c, d) => mix(c, d, norm(x, a, b));\n const fit01 = (x, a, b) => mix(a, b, clamp01(x));\n \n return {\n DEG2RAD,\n EPS: 1e-6,\n TAU: Math.PI * 2,\n HALF_PI: Math.PI * 0.5,\n SQRT3: Math.sqrt(3),\n COS30: Math.cos(30 * DEG2RAD),\n \n norm, clamp, clamp01, mix, fit, fit01,\n step: (edge, x) => x < edge ? 0 : 1,\n frac: v => v % 1,\n fitClamped: (x, a, b, c, d) => fit01(norm(x, a, b), c, d),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5','d3-array@2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"webgl = require('https://bundle.run/@thi.ng/webgl@3.0.4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"m = require('https://bundle.run/@thi.ng/matrices@0.6.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`---\n## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`\n* [JIS慣用色名 - Wikipedia](https://ja.wikipedia.org/wiki/JIS%E6%85%A3%E7%94%A8%E8%89%B2%E5%90%8D)\n * [JIS Z 8102:2001 物体色の色名](https://kikakurui.com/z8/Z8102-2001-01.html)\n * [JIS規格・物体色の色名とRGB数値についての覚書](http://mezala.la.coocan.jp/pc/jiscolor/jiscolor.html)\n* [Munsell Hue Circle Poster](https://munsell.com/color-blog/munsell-hue-circle-poster/)\n* [Munsell spin / Jacob Rus / Observable](https://observablehq.com/@jrus/munsell-spin)\n* [Embedding projector - visualization of high-dimensional data](https://projector.tensorflow.org/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"