30:T62e,{ var margin = {top:50, bottom: 50, left: 50, right: 50}; var w = width; var h = (w-margin.left-margin.right)/2 + (margin.top+margin.right); var ww = w-margin.left-margin.right; var hh = h-margin.top-margin.bottom; const context = DOM.context2d(w, h); context.fillStyle = "#fafafa" context.fillRect(0,0, w, h) var idxs = []; for(var ii=0; ii<2048; ii++) idxs.push(ii); idxs = d3.shuffle(idxs); var myline = d3.line() .curve(d3.curveCardinal.tension(0.1)) .x(d => d[0]) .y(d => d[1]) .context(context); var NCol = 64; var NRow = 32; var counter = 0; for(var rr=0; rrx.stroke_num); context.translate(margin.left+cc*ww/NCol, margin.top+rr*hh/NRow); context.scale(1/6, 1/6); for (var gs of glyph_strokes){ var stroke = gs[1] var strokePts = [stroke[0].p0] strokePts = strokePts.concat(stroke.map(x=>x.p1)) var strokeCoords = strokePts.map(x => samples[x]); context.beginPath(); myline(strokeCoords); context.strokeStyle = "#111111" context.lineWidth = 2.0; context.lineJoin = "round"; context.lineCap = "round"; context.stroke(); } context.scale(6, 6); context.translate(-margin.left-cc*ww/NCol, -margin.top-rr*hh/NRow); counter=counter+1; } } yield context.canvas; }31:T67f,{ var margin = {top:50, bottom: 10, left: 50, right: 50}; var w = width; var h = (w-margin.left-margin.right)/2 + (margin.top+margin.right); var ww = w-margin.left-margin.right; var hh = h-margin.top-margin.bottom; const context = DOM.context2d(w, h); context.fillStyle = "#fafafa" context.fillRect(0,0, w, h) var idxs = []; for(var ii=0; ii<2048/16; ii++) idxs.push(ii); idxs = d3.shuffle(idxs); var myline = d3.line() .curve(d3.curveCardinal.tension(0.1)) .x(d => d[0]) .y(d => d[1]) .context(context); var NCol = 64/4; var NRow = 32/4; var counter = 0; for(var rr=0; rrx.stroke_num); context.translate(margin.left+cc*ww/NCol, margin.top+rr*hh/NRow); context.scale(4/6, 4/6); for (var gs of glyph_strokes){ var stroke = gs[1] var strokePts = [stroke[0].p0] strokePts = strokePts.concat(stroke.map(x=>x.p1)) var strokeCoords = strokePts.map(x => samples[x]); context.beginPath(); myline(strokeCoords); //context.strokeStyle = "#111111" context.lineWidth = 5.0; context.lineJoin = "round"; context.lineCap = "round"; context.stroke(); } context.scale(6/4, 6/4); context.translate(-margin.left-cc*ww/NCol, -margin.top-rr*hh/NRow); counter=counter+1; } } yield context.canvas; }32:T43f,md`...So in theory there are 32,768 (2^15) possible glyphs. Why are there only 2^11? After examining some of the left behind alien technology, our reseach team determined that the civilization had great success in having automated technology (the equivalent of our computers and cameras) recognize these glyphs from writing. No one character was ever confused for another in the same way our \`l\` can be mistaken for a \`1\` etc... Once this was observed, it became clear that the language-set was based off the principle of a [Hamming Code](https://en.wikipedia.org/wiki/Hamming_code). In other words, while the symbols do occupy a 15 dimensional space, only having 2^11 of them allows for a creation such that the difference between any two glyphs is significant. In the case of our alien civilization's language system: **Every pairwise set of glyphs is GUARANTEED to differ in at least 3 ways** (3 segments). This helps insure that any one symbol is not mistaken for another. ### Choose any two symbols below to compare similarity: #### _(there will always be 3+ differences)_ `33:Tbfb,function createStrokes(codeword){ var p = []; function getTheOtherOne(d, v){ if(d[0]==v){ return(d[1]) }else{ return(d[0]) } } // create the initial graph for(var pp=0; pp<7; pp++){ var segs = []; var adj = []; for(var ss=0; ss<15; ss++){ if(segments_15[ss].includes(pp) & codeword[ss]){ segs.push(ss) adj.push(getTheOtherOne(segments_15[ss], pp)); }else{ adj.push(null) } } p.push({segments: segs, segments_unbooked: segs, adj_pts: adj}) } // need a place to track if segments are booked var isSegmentBooked = codeword.map(x=> (x==1)?false:true) /* some helper functions */ function getIndexOfLeastConnected(p, subset){ var C = 999; var I = -1; for (var ii of subset){ var myC = p[ii].segments_unbooked.length; if ((myC0)){ C = myC; I = ii; } } return(I) } function getSegmentIdxByPts(p1,p2){ for (var ss=0; ss<15; ss++){ if(segments_15[ss].includes(p1) & segments_15[ss].includes(p2)) return(ss) } } function removeValueFromArray(arr, v){ for( var i = 0; i < arr.length; i++){ if ( arr[i] == v) { arr.splice(i, 1); i--; } } return(arr); } // the goal is to come out of here with something like // [{segment_idx: 5, p0:1, p1:2, stroke_num:0, order: 0}, // {segment_idx: 2, p0:2, p1:5, stroke_num:0, order: 1}, // {segment_idx: 1, p0:6, p1:0, stroke_num:1, order: 2}] var strokes = []; var orderCounter = 0; var strokeCounter = 0; var numunbooked = isSegmentBooked.filter(x => !x).length; var allUnbooked = p.map((d,i) => i); var idx_0 = getIndexOfLeastConnected(p, allUnbooked) // found my initial point // next point is the least connected of neighbors of idx_0 while((numunbooked>0)){ var neighborsOnUnbookedSegments = p[idx_0].adj_pts.filter(x => x != null) if(neighborsOnUnbookedSegments.length>0){ var idx_1 = getIndexOfLeastConnected(p, neighborsOnUnbookedSegments) // found my next point var thisSeg = getSegmentIdxByPts(idx_0,idx_1); isSegmentBooked[thisSeg] = true; p[idx_0].segments_unbooked = removeValueFromArray(p[idx_0].segments_unbooked, thisSeg); p[idx_1].segments_unbooked = removeValueFromArray(p[idx_1].segments_unbooked, thisSeg); p[idx_0].adj_pts[thisSeg] = null; p[idx_1].adj_pts[thisSeg] = null; //console.log(strokes) //console.log(p) orderCounter = orderCounter+1; strokes.push({segment_idx: thisSeg, p0:idx_0, p1:idx_1, stroke_num:strokeCounter, order: orderCounter}); idx_0 = JSON.parse(JSON.stringify(idx_1)); numunbooked = isSegmentBooked.filter(x => !x).length; }else{ // need to start a new line strokeCounter = strokeCounter+1; orderCounter = orderCounter+1; idx_0 = getIndexOfLeastConnected(p, allUnbooked) // found my initial point } } return(strokes) }34:T582,samples_and_semgents = { if(planet>0){ // lol this is a hack to get these to regerate on button click var colinear = true; }else{ var colinear = true; } while(colinear){ var samples = [...poissonDiscSampler(80, 80, 20)] var first7 = samples.slice(0,7) var com = [d3.mean(first7.map(x=> x[0])), d3.mean(first7.map(x=> x[1]))] var dists = first7.map(x => dist(com, x)) var mi = d3.minIndex(dists) for (var i=0; i<7; i++){ first7[i].dot = (i == mi) ? true : false; } // check colinearity of these proposed points var minDist = 999; for (var i=0; i<7; i++){ for (var j=0; j<7; j++){ for (var k=0; k<7; k++){ if((k!=i)&(k!=j)&(i!=j)){ var d = distToSegment(first7[k], first7[i], first7[j]) minDist = (d3){ colinear = false; } } com = [d3.mean(first7.map(x=> x[0])), d3.mean(first7.map(x=> x[1]))] for(var ii=0; ii<7; ii++){ first7[ii][0] = first7[ii][0]-com[0] first7[ii][1] = first7[ii][1]-com[1] } var samples = d3.shuffle(first7); var s = []; for (var ii=0; ii<7; ii++){ for (var jj=0; jj (myCodeword_L[i]))\n var myCodeword_R = binary_15[codeword_idx_R-1];\n var mySegments_R = segments_15.filter((d,i) => (myCodeword_R[i]))\n \n function renderSegments(segments, color){\n for(var seg of segments){\n var p1 = samples[seg[0]]\n var p2 = samples[seg[1]]\n context.beginPath();\n context.strokeStyle = color;\n context.lineWidth = 4\n context.lineCap = 'round'\n context.moveTo(p1[0],p1[1])\n context.lineTo(p2[0],p2[1])\n context.stroke();\n }\n \n }\n \n context.translate(50, 50);\n renderSegments(mySegments_L, \"#e17055\"); \n context.translate(100, 50);\n renderSegments(mySegments_L, \"#e17055\");\n renderSegments(mySegments_R, \"#0984e3\");\n context.translate(100, -50);\n renderSegments(mySegments_R, \"#0984e3\");\n\n\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"{\n var myCodeword_L = binary_15[codeword_idx_L-1];\n var myCodeword_R = binary_15[codeword_idx_R-1];\n var diff = 0;\n for (var ii=0; ii<15; ii++){\n if (myCodeword_L[ii] != myCodeword_R[ii]) diff++\n }\n return(\"These symbols have \"+diff+\" differences.\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"md`# End of Story 🎉 - supporting code below `","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`## Render a Single Glyph as Handwriting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof codeword_idx = slider({\n min: 1, \n max: 2048, \n step: 1, \n value: 42, \n title: \"Pick any of the 2048 codewords\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"{\n var s = 100;\n const context = DOM.context2d(s, s);\n \n var myCodeword = binary_15[codeword_idx-1];\n var mySegments = segments_15.filter((d,i) => (myCodeword[i]))\n \n context.translate(50, 50);\n \n for(var seg of mySegments){\n var p1 = samples[seg[0]]\n var p2 = samples[seg[1]]\n context.beginPath();\n context.strokeStyle = \"#2d3436\"\n context.lineWidth = 2\n context.moveTo(p1[0],p1[1])\n context.lineTo(p2[0],p2[1])\n context.stroke();\n }\n\n for (var ss=0; ss<7; ss++) {\n var s = samples[ss];\n if(samples[ss].dot){\n context.beginPath();\n context.fillStyle = (samples[ss].dot) ? \"#2d3436\" : \"#b2bec3\"\n context.arc(s[0],s[1],2, 0, 2 * Math.PI);\n context.fill();\n }\n }\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`but let's add a little bit of personality, even aliens don't draw with striaght lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"{\n var s = 100;\n const context = DOM.context2d(s, s);\n \n var myCodeword = binary_15[codeword_idx-1];\n var mySegments = segments_15.filter((d,i) => (myCodeword[i]))\n \n context.translate(50, 50);\n \n var myline = d3.line()\n .curve(d3.curveCardinal.tension(0.1))\n .x(d => d[0])\n .y(d => d[1])\n .context(context);\n \n \n for (var gs of glyph_strokes){\n var stroke = gs[1]\n var strokePts = [stroke[0].p0]\n strokePts = strokePts.concat(stroke.map(x=>x.p1))\n var strokeCoords = strokePts.map(x => samples[x]);\n context.beginPath();\n myline(strokeCoords);\n context.strokeStyle = \"#111111\"\n context.lineWidth = 2.0;\n context.lineJoin = \"round\";\n context.lineCap = \"round\";\n context.stroke();\n }\n \n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"md`doing this 👆 was a real puzzle. I had to basically implement a graph traversal algorithm to go from indepedent line segments to an array of pen-strokes. And I did so with some fairly gross code - but hey, it works and I am really pleased with the visual effect.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"glyph_strokes = {\n return d3.groups(point_graph_strokes, x=>x.stroke_num)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"point_graph_strokes = createStrokes(binary_15[codeword_idx-1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`## Hamming Stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"Hamming_G = [[1,0,0,0,0, 0,0,0,0,0, 0],\n [0,1,0,0,0, 0,0,0,0,0, 0],\n [0,0,1,0,0, 0,0,0,0,0, 0],\n [0,0,0,1,0, 0,0,0,0,0, 0],\n [0,0,0,0,1, 0,0,0,0,0, 0],\n [0,0,0,0,0, 1,0,0,0,0, 0],\n [0,0,0,0,0, 0,1,0,0,0, 0],\n [0,0,0,0,0, 0,0,1,0,0, 0],\n [0,0,0,0,0, 0,0,0,1,0, 0],\n [0,0,0,0,0, 0,0,0,0,1, 0],\n [0,0,0,0,0, 0,0,0,0,0, 1],\n [1,1,0,1,1, 0,1,0,1,0, 1],\n [1,0,1,1,0, 1,1,0,0,1, 1],\n [0,1,1,1,0, 0,0,1,1,1, 1],\n [0,0,0,0,1, 1,1,1,1,1, 1]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"binary_15 = {\n var v = [];\n for (var ii=0; ii