28:null 29:["$","title",null,{"children":"15 puzzle | Michele Vallisneri | Observable"}] 2e:T770,puzzle = { let cells = []; for(let i=0;i<5;i++) { for(let j=0;j<5;j++) { cells.push({left: i,top: j,index: j*5+i, img: 'https://raw.githubusercontent.com/vallis/jsres/master/fifteen/img/img-' + (j*5 + i) + '.png'}); } } let pos = [[0,1,2,3,4],[5,6,7,8,9],[10,11,12,13,14],[15,16,17,18,19],[20,21,22,23,24]]; const svg = plot(cells,{}); yield svg; let swap = function(svg,{m,n,dm,dn}) { let i = pos[m][n], j = pos[m+dm][n+dn]; // since d3 data() has grabbed array elements, we have to reassign the attributes [cells[i].left, cells[j].left] = [cells[j].left, cells[i].left]; [cells[i].top, cells[j].top] = [cells[j].top, cells[i].top]; pos[m][n] = j; pos[m+dm][n+dn] = i; move(svg, {}); }; let c = defaults.cellwidth; var nmoves, moves, k; var animate = true; // we do behavior here so we have access to the svg, pos, and cells d3.select(svg) .on("mouseover",function() { animate = false; d3.selectAll("svg g text").style("visibility","visible"); }) .on("mouseout", function() { animate = true; d3.selectAll("svg g text").style("visibility","hidden"); }); d3.selectAll("g") .on("click",function(d) { let [x,y] = d3.mouse(this); let [dx,dy] = [[[-1,0],[0,1]], [[0,-1],[1,0]]][1*(x > y)][1*(c - x < y)]; let themove = {m: d.left - (dx < 0), n: d.top - (dy < 0), dm: Math.abs(dx), dn: Math.abs(dy)}; swap(svg, themove); moves.splice(k,0,themove); }); while(true) { moves = getmoves(20); nmoves = moves.length; k = 0; while(k < nmoves) { while(animate == false) { yield svg; } swap(svg,moves[k]); yield Promises.delay(1250, svg); k++; } } }2f:T43f,plot = function(data, opts) { let options = Object.assign({}, defaults, opts); let c = options.cellwidth; const svg = d3.select(DOM.svg(options.plotwidth, options.plotheight)); let gs = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", d => "translate(" + d.left*c + "," + d.top*c + ")"); gs.append("image") .attr("href",d => d.img).attr("xlink:href",d => d.img) .attr("x",0).attr("y",0).attr("width",c-1).attr("height",c-1); gs.append("line").attr("x1",0).attr("y1",0).attr("x2",0).attr("y2",c-1).attr("stroke","white"); gs.append("line").attr("x1",0).attr("y1",0).attr("x2",c-1).attr("y2",0).attr("stroke","white"); gs.append("line").attr("x1",c-1).attr("y1",0).attr("x2",c-1).attr("y2",c-1).attr("stroke","white"); gs.append("line").attr("x1",0).attr("y1",c-1).attr("x2",c-1).attr("y2",c-1).attr("stroke","white"); gs.append("text").attr("x",4).attr("y",14).text(d => d.index).attr("visibility","hidden"); return svg.node(); }30:[] 2c:{"id":"7ed2080822fef055","slug":"15-puzzle","title":"15 puzzle","thumbnail":"bf643b3eb2e6bf95f7fc4a87ccf87436cd1c5c94b1e2d1eb1d6c97c8e6b8a248","access_level":"public","create_time":"$D2018-07-09T22:17:31.676Z","update_time":"$D2025-11-10T13:21:12.386Z","view_time":null,"first_public_time":"$D2018-07-09T22:38:05.168Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c8b1da6cd6acdc9b","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":"starter_2024"},"version":397,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"12aa872846783c92","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":null}],"members":[{"type":"individual","id":"12aa872846783c92","login":"vallis","name":"Michele Vallisneri","avatar_url":"https://avatars-next.observableusercontent.com/660211322212c19297c70227a29cf0c3a0e96996682719b1fc151fe33431ff5c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"15 puzzle","cells":[{"id":0,"value":"md`# 15 puzzle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"getmoves = function(nmoves) {\n let moves = []; \n for(let k=0;k 0.5) {\n moves.push({m: randint(4), n: randint(5), dm: 1, dn: 0});\n } else {\n moves.push({m: randint(5), n: randint(4), dm: 0, dn: 1});\n }\n }\n \n return moves.concat(moves.slice().reverse());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"randint = function(m) { return Math.floor(m * Math.random()); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"defaults = ({ plotwidth: 300, plotheight: 300, cellwidth: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"move = function(svg, opts) {\n let c = defaults.cellwidth;\n \n d3.select(svg).selectAll(\"g\")\n .transition()\n .duration(500)\n .attr(\"transform\", d => \"translate(\" + d.left*c + \",\" + d.top*c + \")\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"html`

CSS

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"