27:null 28:["$","title",null,{"children":"Interactive Mandala | Josh | Observable"}] 2d:Tecb,Mandala = async function* ({ design = Designs.Anko, size = Math.min(width, mutable outerHeight * 0.8) } = {}) { const mandala = svg``; yield mandala; const { board_fill, num_sectors, piece_types } = design; const outer_radius = size / 2; const center = [outer_radius, outer_radius]; const sector_angle_size = (2 * Math.PI) / num_sectors; const board_points = _.times(num_sectors, (i) => fromPolar(i * sector_angle_size, outer_radius, center) ); const inner_radius = (11 / 12) * V.dist(center, V.div(V.add(...board_points.slice(0, 2)), 2)); const style = `\ `; let true_coords = mandala.createSVGPoint(); // debugger; mandala.append(html`${style}`, svg`${Board()}`); for await (const piece of Pieces()) { await Promises.delay(20); mandala.append(piece); } return mandala; // function Board() { return ``; } function Piece(type_info, i) { const { origin, path } = type_info; const points = _.map(path, (coords) => { const scaled_coords = V.mult(coords, 0.97); const [x, y] = V.add(origin, scaled_coords); return fromPolar((i + x) * sector_angle_size, y * inner_radius, center); }); const fill = `hsl(${(i / num_sectors) * 360}deg,65%,50%)`; return ``; } // generates all piece types for each sector async function* Pieces() { for (const type_info of piece_types) { for (const i of _.times(num_sectors)) { const polygon = Piece(type_info, i % num_sectors); // create shape const piece = svg`${polygon}`; // create element piece.classList += "mandala-piece"; // add style piece.onmousedown = onMouseDownFn(piece); // listen for events piece.onmouseup = onMouseUpFn(piece); yield piece; } } } function onMouseDownFn(piece) { const GrabPiece = GrabPieceFn(piece); return (e) => { const { buttons } = e; if (buttons & 1) return GrabPiece(e); // primary-button }; } function onMouseUpFn(piece) { const ReleasePiece = ReleasePieceFn(piece); return (e) => { const { buttons } = e; if (buttons & 1) return ReleasePiece(e); // primary-button }; } function GrabPieceFn(piece) { return (e) => { // piece.setAttributeNS(null, "pointer-events", "none"); const true_coords = GetTrueCoords(e); const trans_matrix = e.target.getCTM(); // const grab_point = { // x: true_coords.x - Number(trans_matrix.e), // y: true_coords.y - Number(trans_matrix.f) // }; const grab_point = true_coords; // debugger; const DragPiece = DragPieceFn(grab_point); piece.addEventListener("mousemove", DragPiece); piece.addEventListener( "mouseup", () => { piece.removeEventListener("mousemove", DragPiece); }, { once: true } ); }; } function ReleasePieceFn(piece) { return (e) => {}; } function DragPieceFn(grab_point) { return (e) => { const piece = e.currentTarget; true_coords = GetTrueCoords(e); const new_point = { x: true_coords.x, y: true_coords.y }; piece.setAttributeNS( null, "transform", `translate(${new_point.x}, ${new_point.y})` ); }; } // compensates for zoom and pan function GetTrueCoords(evt) { const { currentScale, translation } = mandala; return { x: (evt.clientX - translation.x) / currentScale, y: (evt.clientY - translation.y) / currentScale }; } }2e:T47c,Designs = ({ Anko: { num_sectors: 10, board_fill: "rgb(235,215,205)", board: '', piece_types: [ { origin: [1 / 2, 2 / 6], path: DiamondPoints(-8, 4) }, { origin: [2 / 2, 3 / 6], path: DiamondPoints(-4, 8) }, { origin: [3 / 2, 5 / 6], path: DiamondPoints(-8, 4) }, { origin: [4 / 2, 6 / 6], path: DiamondPoints(-4, 1) } ] }, Grimms: { x: 1, num_sectors: 12, board: '', board_fill: "rgb(230,175,130)", piece_types: [ { origin: [1 / 2, 7 / 24], path: DiamondPoints(-7, 5) }, { origin: [2 / 2, 12 / 24], path: DiamondPoints(-5, 5) }, { origin: [3 / 2, 17 / 24], path: DiamondPoints(-5, 3) }, { origin: [4 / 2, 20 / 24], path: DiamondPoints(-3, 3) }, { origin: [5 / 2, 23 / 24], path: DiamondPoints(-3, 1) }, { origin: [6 / 2, 24 / 24], path: DiamondPoints(-1, 0) } ] } })2f:[] 2b:{"id":"f641b2551cd6587b","slug":null,"title":"Interactive Mandala","thumbnail":"e8ca52b8769e36fc5ccc78a30cff39fedeba2ab6b26dd0e3b673496fe0e55107","access_level":"public","create_time":"$D2022-12-27T01:12:24.033Z","update_time":"$D2022-12-29T16:50:06.150Z","view_time":null,"first_public_time":"$D2022-12-27T01:12:24.033Z","has_unpublished_edits":null,"fork":{"id":"e57692300453779b","slug":"interactive-svg","title":"Interactive SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":"starter_2024"},"version":2929,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null}],"members":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive Mandala","cells":[{"id":0,"value":"# Interactive Mandala","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2170,"value":"Mandala({ design })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2323,"value":"viewof design = Inputs.select(_.values(Designs), {\n label: \"Design\",\n format: (e, i) => _.keys(Designs)[i]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2337,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2099,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1139,"value":"DiamondPoints = (low, high) => [\n [+0.0, low / 24],\n [-0.5, +0 / 24],\n [+0.0, high / 24],\n [+0.5, +0 / 24]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"fromPolar = (angle = 0, distance = 0, offset = [0, 0]) => [\n Math.cos(angle) * distance + offset[0],\n Math.sin(angle) * distance + offset[1]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2830,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2693,"value":"SVGPath = require(\"svg-path-commander\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"import { vecmath as V } from \"@harrystevens/vector-math@254\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2369,"value":"import { mutable outerHeight } from \"@jgrunik/reactive-window-dimensions\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2331,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2097,"value":"size = Math.min(width, 0.8 * outerHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2388,"value":"viewof mandala = {\n const mandala = svg`