30:Tb17,function draw (id, width, height, numAcross, itemWidth, itemSpacing, itemColor, backgroundColor, isDiamond, useAlternates, drawIcon) { const svg = d3.select(DOM.svg(width, height)); const minDim = itemWidth * numAcross + itemSpacing * (numAcross - 1); const margin = {top: (height - minDim) / 2, bottom: (height - minDim) / 2, left: (width - minDim) / 2, right: (width - minDim) / 2}; const rows = Array(numAcross).fill(0).map((x,i) => i); let positions = Array(numAcross * numAcross).fill(0).map((x,i) => ({row: Math.floor(i/numAcross), col: i % numAcross, display: true })); // identify the corners of the position data grid if (isDiamond) { const midFloor = Math.floor(numAcross / 2); const midCeil = Math.ceil(numAcross /2 ); positions.forEach(x => { if ((x.col > x.row + midFloor)// topRight || (x.col < midCeil - 1 - x.row) // topLeft || (x.row > x.col + midFloor) // bottomLeft || (x.col > numAcross + midFloor - 1-x.row)) { // bottomRight x.display = false; } }); } // remove corner elements from position grid for (let i = positions.length - 1; i >=0; i--) { if (positions[i].display === false) { positions.splice(i,1); } } // assign a number that will be used to rotate the starting position of alternating icons positions.forEach(x => { if (!useAlternates) { x.display = 0; } else if ((x.col % 2 === 0) ? (x.row % 2 === 0) : (x.row % 2 !== 0)) { x.display = 0 + ((x.row % 2 === 0) ? 0 : 2); } else { x.display = 1 + ((x.row % 2 === 0) ? 2 : 0); } }); // assign unique id if (id !== '') { svg.attr("id", id); } // draw background svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("height", height) .attr("width", width) .attr("fill", backgroundColor) // append a group per item position, rotated by the appropriate starting amount // the spinning animation is performed on the children of these groups const squares = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) .selectAll("g") .data(positions) .enter().append("g") .attr("class", d => "item") .attr("transform", d => `translate(${d.col * (itemWidth + itemSpacing) + itemWidth/2},${d.row * (itemWidth + itemSpacing) + itemWidth/2}) rotate(${90 * d.display})`); // draw one icon per 'square' , using a function listed under 'SVG shapes' const item = drawIcon(squares, itemWidth); item.attr("fill", itemColor); return svg.node(); }31:T841,// generate a unique set of styles for SVG/s located inside a #id element // this allows SVG/s located within different #id elements to have different types of animations function stylesheet (id, animationDuration, pausePercent = 0, animationTimingFunction = "linear") { // id: unique identifier that matches the SVG's #id or its parent's #id // animationDuration (time to make the full 360 degree rotation), ex: '5s' // pausePercent, ex: 50 (for a 50% pause after every 90 degree rotation) // animationTimingFunction, ex: 'ease' pausePercent = pausePercent === 100 ? 99.9 : pausePercent; return (html` ` ); }32:[] 2e:{"title":"Rotating Geometry","cells":[{"id":0,"value":"md`# Rotating Geometry\n\nInspired by the mesmerizing work of [@beesandbombs](https://twitter.com/beesandbombs), in particular [this one](https://twitter.com/beesandbombs/status/1044356632497532929).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"{\n const itemWidth = 50;\n \n // determine dashes (length/spacing)\n const numDashesPerSection = 3;\n const dashRatio = 5;\n const gapLength = 4;\n const lineLength = gapLength * dashRatio;\n let dashArray = Array(numDashesPerSection * 2 + 1).fill(0);\n dashArray = dashArray.map((x,i) => {\n if (i === dashArray.length - 1) {\n return gapLength;\n } else {\n return (i % 2 === 0) ? lineLength : gapLength;\n }\n })\n \n return (html`\n ${stylesheet('sashiko', `20s`, 20, \"ease-in-out\",\"none\")}\n \n\n ${draw('sashiko', width, 500, 8, 100, 0, \"none\", \"#0c4a7c\", true, true, eye)}\n `\n)}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"md`\nIt's possible to make complicated-looking animations using a repeated shape and just a couple of simple colors. A limited color palette also opens the door to playing with negative space.\n\nAll of these images are programatically generated SVGs, and the rotating shapes are animated using CSS animations ([keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"html`\n${stylesheet('trio1', '15s', 40, 'ease')}\n${stylesheet('trio2', '6s', 0, \"linear\")}\n\n\n

\n\n

\n ${draw('',300,250,8,25,0,\"white\",\"grey\",false,true,eye)}\n ${draw('',300,250,6,35,-1,\"lightgreen\",\"green\",false,true,triangle)}\n ${draw('',300,250,8,50,-10,\"#bcf0ff\",\"purple\",false,true,eye)}\n

\n\n

\n ${draw('',240,250,5,35,0,\"lightyellow\",\"none\",true,true,diamond)}\n ${draw('',240,180,5,42,-1,\"lightyellow\",\"none\",false,true,square)}\n ${draw('',240,300,6,34,0,\"lightyellow\",\"none\",true,true,ellipse)}\n

\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"md` ---\n## Try it out for yourself\n\nUse the inputs to modify the shape, size, and animation of the image below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof itemsPerRow = slider({\n min: 1, \n max: 20, \n step: 1, \n value: 4, \n title: \"Maximum shapes per row\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"viewof itemSize = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 90, \n title: \"Width/height of each shape (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"viewof itemOverlap = slider({\n min: -40, \n max: 40, \n step: 1, \n value: -14, \n title: \"Shape overlap (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1571,"value":"viewof selectShape = {\n const selectShape = select({\n options: Object.keys(shapeOptions),\n title: \"Shape\",\n value: \"rectangle\"\n });\n return selectShape;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1575,"value":"viewof imageColor = {\n const imageColor = select({\n options: Object.keys(colorOptions),\n title: \"Background and shape color\",\n value: \"purple/orange\"\n });\n return imageColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"viewof cb = checkbox({\n options: [{ value: \"clip\", label: \"remove grid corners\" },\n { value: \"alt\", label: \"alternate orientation of adjacent shapes\" }],\n value: ['clip','alt']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"viewof animationDuration = slider({\n min: .5, \n max: 20, \n step: 0.5, \n value: 15, \n format: \".0f\",\n title: \"Animation duration (seconds to complete 1 full revolution)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"viewof animationPause = slider({\n min: 0, \n max: 1, \n step: 0.1, \n value: 0.1, \n format: \".0%\",\n title: \"Animation pause (at 90, 180, 270, and 360 degrees through the animation)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"viewof animationType = {\n const types = [{label: 'ease-in-out', value: 'ease-in-out'},\n {label: 'linear', value: 'linear'},\n {label: 'steps (1 / 90 deg)', value: 'steps(1,end)'},\n {label: 'steps (4 / 90 deg)', value: 'steps(4,end)'},\n {label: 'steps (8 / 90 deg)', value: 'steps(8,end)'}];\n const animationType = select({\n options: types,\n title: \"Animation timing function\",\n value: \"ease-in-out\"\n });\n return animationType;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"html`\n${stylesheet('example', `${animationDuration}s`, animationPause*100, animationType)}\n\n${draw('example',width,400,itemsPerRow, itemSize, itemOverlap,\n colorOptions[imageColor].front, colorOptions[imageColor].back,\n cb.includes('clip'), cb.includes('alt'),\n shapeOptions[selectShape])}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"md`---\n## Code...\n\n### Draw and animate the SVG\n\n- draw generates an SVG and applies fill and an initial rotation.\n- defaultStylesheet contains general display logic and a default animation.\n- stylesheet contains all animation logic and returns a customized stylesheet (tied to #id) every time it's called.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"// these styles apply to the entire notebook\n// this is separate from 'stylesheet' so that common styles are only applied once\ndefaultStylesheet = html`\n${stylesheet('', '10s')}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"md`\n### SVG shapes\n\nEach of these functions appends (and returns) an SVG path (or rect/circle/etc) to group that is centered at (0,0) and has maximum height and width of size.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"square = (group, size) => {\n return group.append(\"rect\")\n .attr(\"x\", -size/2)\n .attr(\"y\", -size/2)\n .attr(\"width\", size)\n .attr(\"height\", size);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"diamond = (group, size) => {\n return group.append(\"path\")\n .attr(\"d\", `M 0 ${-size/2} L ${size/2}, 0 0, ${size/2} ${-size/2}, 0 Z`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"rectangle = (group, size) => {\n return group.append(\"rect\")\n .attr(\"x\", -size/4)\n .attr(\"y\", -size/2)\n .attr(\"width\", size/2)\n .attr(\"height\", size);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"eye = (group, size) => {\n return group.append(\"path\")\n .attr(\"d\", d => `M ${-size/2} ${-size/2} \n A ${size} ${size} 90 0 1 ${size/2} ${size/2} \n A ${size} ${size} 90 0 1 ${-size/2} ${-size/2} Z`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"ellipse = (group, size) => {\n return group.append(\"ellipse\")\n .attr(\"rx\", d => size/2)\n .attr(\"ry\", d => size/4)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"triangle = (group, size) => {\n return group.append(\"path\")\n .attr(\"d\", d => `M ${-size/2} ${-size/2}\n L ${size/2}, ${-size/2} ${-size/2}, ${size/2} Z`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"// list of all shapes, used by the example selector\nshapeOptions = ({square: square,\n diamond: diamond,\n rectangle: rectangle,\n eye: eye, \n ellipse: ellipse,\n triangle: triangle})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"// list of colors, used by the example selector\ncolorOptions = ({blue: {front: \"#51dfff\", back: \"#007c99\"},\n 'purple/orange': {front: \"#fa815f\", back: \"#3f0f72\"},\n 'grey/white': {front: \"white\", back: \"grey\"},\n yellow: {front: \"lightyellow\", back: \"#f2a509\"}\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"md`\n### Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"import {select, color, slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}