40:null 41:["$","title",null,{"children":"Sketch out of game idea | Daniel Wood | Observable"}] 47:T5ca,function generateFilters(data) { let {width,gradRadius,maxOpacity,midDistance,startx} = inputs let gradients = ""; let rects = ""; let feImage = ""; let rSmall = segWidth*0.7; let r = segWidth+startx; console.log(data) for (let i = 0; i < data.length; ++i) { gradients += ` ` rects += `` feImage += `` } return ` ${gradients} ${rects} ${feImage} ` }48:T7b2,function chart() { let {width,starty,startx} = inputs; const padding = {x:startx,y:starty} const height = width; // const segWidth = width/6; const viewbox = {x:width+padding.x*5,y:height+padding.y*5} const svg = d3.create("svg") .attr("viewBox", [0, 0, viewbox.x, viewbox.y]) .attr("width", viewbox.x) .attr("height", viewbox.y) .attr("style", "max-width: 100%; height: auto;"); const config = { radius: segWidth, x: startx+segWidth, y: starty+segWidth }; const hexPoints = hexGenerator(config); const curve = d3.line().curve(d3.curveNatural); const straight = d3.line(); // const items = [ // allWiggles[getRandomInt(4)], // allWiggles[getRandomInt(4)], // allWiggles[getRandomInt(4)], // allWiggles[getRandomInt(4)], // allWiggles[getRandomInt(4)], // allWiggles[getRandomInt(4)] // ]; const items = [ allWiggles[itemPicker[0]], allWiggles[itemPicker[1]], allWiggles[itemPicker[2]], allWiggles[itemPicker[3]], allWiggles[itemPicker[4]], allWiggles[itemPicker[5]] ]; const togetherPoints = generatewiggles(items,hexPoints); let defs = generateFilters(togetherPoints); // console.log(defs); // let defs0 = svg.append("defs" svg.html(defs); const wigglePoly = svg.append("g") .append("path") .attr('d',()=>{ // concatenate all wiggles let data = d3.selectAll(".wiggles") let path = ""; togetherPoints.forEach(function(d,i) { if (d.type === "curve"){ d.d = curve(d.data) } else { d.d = straight(d.data) } if (i>0) { path += "L"+d.d.slice(1) } else { path += d.d } }) return path; }) .attr("filter","url(#blend-it)") .attr("stroke","black") // const paths = svg.selectAll("path") const path = svg.selectAll("path"); return svg.node(); }49:[{"id":"f1238a97423e308fd632bb2905e92d40fa31866bace3fbae2c4b6b8a331201b089faea40d816524b756492e3a7138bd55dccc0f399a925e0f19e54022a5c6a69","href":"https://static.observableusercontent.com/files/f1238a97423e308fd632bb2905e92d40fa31866bace3fbae2c4b6b8a331201b089faea40d816524b756492e3a7138bd55dccc0f399a925e0f19e54022a5c6a69","name":"wiggles@4.svg","type":"image/svg+xml","lastModified":1704941950093.529,"size":1198},{"id":"5e1c6fd6b086640f5e99ec43691ca2b280bcbaf8d023af9e447dbfc52f65b7c9d19aedabbcc754b178d25ae75720c7b1a0b1484ac11d1478c959ad6862fb8d22","href":"https://static.observableusercontent.com/files/5e1c6fd6b086640f5e99ec43691ca2b280bcbaf8d023af9e447dbfc52f65b7c9d19aedabbcc754b178d25ae75720c7b1a0b1484ac11d1478c959ad6862fb8d22","name":"wiggles@3.svg","type":"image/svg+xml","lastModified":1704921243454.397,"size":1582},{"id":"7db42ef45533717fe5ab49a824c41287ecbe1125a97e055502a5749b9bcfc8358391675f6e22ac0f80fb615d959cad364e652f460ff5b7e87a98b1ca6ba10f64","href":"https://static.observableusercontent.com/files/7db42ef45533717fe5ab49a824c41287ecbe1125a97e055502a5749b9bcfc8358391675f6e22ac0f80fb615d959cad364e652f460ff5b7e87a98b1ca6ba10f64","name":"wiggles.svg","type":"image/svg+xml","lastModified":1704911276757.867,"size":1190},{"id":"4740ab9487d01b80ea3427a312206132ef19f1df1ee04d3ccca3247cf148c1d1b669b8e25c16e9df186089ae4f59b912f89471432bcc140f6f3b1452ef164670","href":"https://static.observableusercontent.com/files/4740ab9487d01b80ea3427a312206132ef19f1df1ee04d3ccca3247cf148c1d1b669b8e25c16e9df186089ae4f59b912f89471432bcc140f6f3b1452ef164670","name":"wiggles@5.svg","type":"image/svg+xml","lastModified":1704984381057.703,"size":1233},{"id":"852d6cff1cbc39966c39af16508d062486648f90fb4a0e4d735b074a9e6e1764af70027cc864c764758e0b4b4906da7d1679ddaeb973a552cb37841053fbc55d","href":"https://static.observableusercontent.com/files/852d6cff1cbc39966c39af16508d062486648f90fb4a0e4d735b074a9e6e1764af70027cc864c764758e0b4b4906da7d1679ddaeb973a552cb37841053fbc55d","name":"wiggles@2.svg","type":"image/svg+xml","lastModified":1704921211216.466,"size":1196},{"id":"32ed45f28e8485258627a2b0e5fa9d37d7cad3b9efd01c37583061a7eda071b5bf83604eb7c9a8c64dc55625324ec047909e7e4f2fb907aa181a4bb2b1caf01c","href":"https://static.observableusercontent.com/files/32ed45f28e8485258627a2b0e5fa9d37d7cad3b9efd01c37583061a7eda071b5bf83604eb7c9a8c64dc55625324ec047909e7e4f2fb907aa181a4bb2b1caf01c","name":"wiggles@1.svg","type":"image/svg+xml","lastModified":1704912130294.778,"size":1190}] 45:{"id":"b89a66e98962d644","slug":null,"title":"Sketch out of game idea","thumbnail":"93898835b112a88754e32985ac0c73a3aa95ea5f1a344678dc30578eb9798b5b","access_level":"public","create_time":"$D2024-01-10T14:30:48.100Z","update_time":"$D2024-01-16T21:57:26.756Z","view_time":null,"first_public_time":"$D2024-01-10T14:30:48.100Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3e625d3fdbdc0d0a","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":"starter_2024","bio":"Maps and Chartjunk for @nprapps","following":false},"version":833,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"319e840dacaee022","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":null,"bio":"Maps and Chartjunk for @nprapps","following":false}],"members":[{"type":"individual","id":"319e840dacaee022","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sketch out of game idea","cells":[{"id":0,"value":"# Sketch out of game idea\n\nGonna use d3 to sketch this game idea for a freeform puzzle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"viewof inputs = Inputs.form({\n \"startx\":Inputs.range([0, 100], {value:0,step: 1, label: \"startx\"}),\n \"starty\":Inputs.range([0, 100], {value:0,step: 1, label: \"starty\"}),\n \"width\":Inputs.range([0, 1000], {step: 10, label: \"width\", value:\"320\"}),\n \"midDistance\":Inputs.range([0, 1], {value:1,step: 0.01, label: \"midDistance\"}),\n \"maxOpacity\":Inputs.range([0, 1], {value:1,step: 0.01, label: \"maxOpacity\"}),\n \"gradRadius\":Inputs.range([0, 1], {value:0.42,step: 0.01, label: \"gradRadius\"}),\n \"wiggleMult\":Inputs.range([0, 100], {value:20,step: 0.1, label: \"wiggleMult\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"viewof itemPicker = Inputs.form([\n Inputs.range([0, 3], {step: 1, label: \"side1\", value:\"1\"}),\n Inputs.range([0, 3], {step: 1, label: \"side2\", value:\"0\"}),\n Inputs.range([0, 3], {step: 1, label: \"side3\", value:\"2\"}),\n Inputs.range([0, 3], {step: 1, label: \"side4\", value:\"3\"}),\n Inputs.range([0, 3], {step: 1, label: \"side5\", value:\"2\"}),\n Inputs.range([0, 3], {step: 1, label: \"side6\", value:\"1\"})\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"c = [\"#ff00ff\", \"#00ffff\", \"#ffff00\", \"orange\",]\n .map(d => d3.cubehelix(d))\n .sort((a, b) => d3.ascending(a.h, b.h))\n .map(d => d.hex()).reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"html`

${c.map(color => `

`).join(\"\")}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"segWidth = inputs.width/2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"wiggleUp = segWidth/inputs.wiggleMult;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"constant = 130;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"stopOupper = \"50%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"offsetUpper = \"1%\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"function generatewiggles(items,hexPoints) {\n \n const lines = []\n for (let i = 0; i < items.length; ++i) {\n const newPoints = [];\n console.log(items[i][0]);\n // transform the points to the their new points\n for (let j = 0; j < items[i][0].points.length; ++j) {\n let trigOffset = trig(items[i][0].points[j],i);\n let newX = trigOffset.x+hexPoints[i].x;\n let newY = trigOffset.y+hexPoints[i].y;\n let newXY = [newX,newY];\n newPoints.push(newXY);\n }\n // put it all together\n let wiggle = {\n data: newPoints,\n type: items[i][0].type,\n color: items[i][0].color\n };\n lines.push(wiggle)\n }\n return lines\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"# \"Data\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":309,"value":" wiggle2 = [[0, 0], [segWidth/4, -wiggleUp], [3*(segWidth/4), wiggleUp], [segWidth, 0]];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":" wiggle4 = [\n [0, 0], \n [segWidth/8, -wiggleUp], \n [3*(segWidth/8), wiggleUp], \n [5*(segWidth/8), -wiggleUp], \n [7*(segWidth/8), wiggleUp], \n [segWidth, 0]\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"allWiggles = [\n [{\n \"name\":\"wiggle2straight\",\n \"points\":wiggle2,\n \"type\":\"straight\",\n \"color\":c[0]\n }],\n [{\n \"name\":\"wiggle2curve\",\n \"points\":wiggle2,\n \"type\":\"curve\",\n \"color\":c[1]\n }],\n [{\n \"name\":\"wiggle4straight\",\n \"points\":wiggle4,\n \"type\":\"straight\",\n \"color\":c[2]\n }],\n [{\n \"name\":\"wiggle4curve\",\n \"points\":wiggle4,\n \"type\":\"curve\",\n \"color\":c[3]\n }]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"# Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"function hexGenerator(config) {\n let {radius,x,y} = config;\n var h = (Math.sqrt(3)/2), \n hexagonData = [\n {\"id\":0, \"x\": -radius/2+x, \"y\": -radius*h+y},\n {\"id\":1, \"x\": radius/2+x, \"y\": -radius*h+y},\n {\"id\":2, \"x\": radius+x, \"y\": y}, \n {\"id\":3, \"x\": radius/2+x, \"y\": radius*h+y},\n {\"id\":4, \"x\": -radius/2+x, \"y\": radius*h+y},\n {\"id\":5, \"x\": -radius+x, \"y\": y}\n ];\n return hexagonData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"function getRandomInt(max) {\n return Math.floor(Math.random() * max);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"function trig(coords,i) {\n // offset degrees in radians\n let theta = rad(60*i);\n let x = coords[0];\n let y = coords[1];\n let xOffset = x*Math.cos(theta)-y*Math.sin(theta);\n let yOffset = x*Math.sin(theta)+y*Math.cos(theta);\n return {x:xOffset,y:yOffset}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"function rad(deg) {\n return deg*(Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"to do:\n- convert the polyline to path in ai or other\n- create points of a hexagon\n- place randomly selected paths at these points going in the various directions of a hexagon\n- connect all of these paths together into a single path element\n- create a number of these items in sequence\n- fiddle with fill color (?)\n- export to svg? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"