2b:null 2c:["$","title",null,{"children":"Tiled Lines | Colin Casey | Observable"}] 31:T58a,{ const ctx = DOM.context2d(width, height) const canvas = ctx.canvas ctx.lineCap = 'square' ctx.fillStyle = 'rgb(50,50,50)' ctx.fillRect(0, 0, width, height) colorize(trigrid) markEnclosed(trigrid) _.each(trigrid, (column, row) => { _.each(column, (cell, col) => { _.each(cell, (triangle, orientation) => { const color = triangle.enclosed ? lineColor : triangle.color ctx.beginPath() //ctx.strokeStyle = 'white' //ctx.lineWidth = 1 ctx.fillStyle = color ctx.moveTo(...triangle.points[0]) ctx.lineTo(...triangle.points[1]) ctx.lineTo(...triangle.points[2]) ctx.closePath() ctx.fill() //ctx.stroke() }) }) }) ctx.strokeStyle = lineColor ctx.lineWidth = 14 _.each(trigrid, (column, row) => { _.each(column, (cell, col) => { _.each(cell, ({ points }, orientation) => { const x0 = _.min(_.map(points, '[0]')) const x1 = _.max(_.map(points, '[0]')) const y0 = _.min(_.map(points, '[1]')) const y1 = _.max(_.map(points, '[1]')) if (['ne', 'sw'].includes(orientation)) { ctx.moveTo(x0, y0) ctx.lineTo(x1, y1) } else { ctx.moveTo(x1, y0) ctx.lineTo(x0, y1) } }) }) }) ctx.stroke() // console.log('--------------------------') return canvas }32:T9c8,colorize = (trigrid) => { const keyToCoord = (key) => key.split(':') const coordToKey = (row, col, orientation) => `${row}:${col}:${orientation}` const availableKeys = _.reduce(trigrid, (acc, column, row) => { _.each(column, (cell, col) => { _.each(orientationNames, orientation => { if (cell[orientation]) { acc.push(coordToKey(row, col, orientation)) } }) }) return acc }, []) const directionOffsets = { n: [-1, 0], s: [1, 0], e: [0, 1], w: [0, -1] } function walkPath (triangle, path, color) { const { row, col, orientation } = triangle.coordinate const key = coordToKey(row, col, orientation) //console.group('> entering ' + key) triangle.color = color path.push(key) _.pull(availableKeys, key) _.each(directionOffsets, ([rowOffset, colOffset], direction) => { const cellPath = `[${row + rowOffset}][${col + colOffset}]` if (['n', 's'].includes(direction) && orientation.includes(direction) || ['e', 'w'].includes(direction) && orientation.includes(direction)) { const nextCell = _.get(trigrid, `[${row + rowOffset}][${col + colOffset}]`) const nextTriangle = _.find(nextCell, (t, nextOrientation) => { return direction === 'e' && nextOrientation.includes('w') || direction === 'w' && nextOrientation.includes('e') || direction === 'n' && nextOrientation.includes('s') || direction === 's' && nextOrientation.includes('n') }) if (nextTriangle) { const nextKey = coordToKey(nextTriangle.coordinate.row, nextTriangle.coordinate.col, nextTriangle.coordinate.orientation) if (availableKeys.includes(nextKey)) { walkPath(nextTriangle, path, color) } else { //console.log(`already visited ${nextKey}`) } } else { //console.log(`no triangle to move to at ${cellPath}`) } } else { //console.log(`ignoring move ${direction} (within same square)`) } }) //console.groupEnd() } const path = [] let colorIndex = 0 while(!_.isEmpty(availableKeys)) { const availableKey = _.first(_.shuffle(availableKeys)) const [row, col, orientation] = keyToCoord(availableKey) const color = colors[colorIndex % colors.length] //console.warn(color) walkPath(trigrid[row][col][orientation], path, color) colorIndex += 1 } }33:[] 2f:{"id":"80d4c0061b69a20e","slug":"tiled-lines","title":"Tiled Lines","thumbnail":"af6a564400ed5de256cac09c565bb0260b660e478b9cb98bf0ad85d436fdcde5","access_level":"public","create_time":"$D2019-11-03T00:51:30.864Z","update_time":"$D2021-03-22T02:07:47.876Z","view_time":null,"first_public_time":"$D2019-11-10T03:28:59.838Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":"starter_2024"},"version":835,"publish_version":835,"role":null,"authored":false,"authors":[{"type":"individual","id":"e498c9db30bfdcca","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":null}],"members":[{"type":"individual","id":"e498c9db30bfdcca","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"0ad1f502895e58e7","slug":"generative-art","title":"Generative Art","owner":{"id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey"}},"type":"notebook","body":{"title":"Tiled Lines","cells":[{"id":0,"value":"md`# Tiled Lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`# /references`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`Code based on [Tiled Lines Tutorial](https://generativeartistry.com/tutorials/tiled-lines/) from [Generative Artistry](https://generativeartistry.com/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`# /config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof squares = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 30, \n title: \"Change the number of the squares to render along the horizontal plane\", \n description: \"Squares\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`# /support`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"colors = [\n // hsl(187.36263736263737, 0.610738255033557 / 1, 0.29215686274509806 * 1),\n // hsl(167.4418604651163, 0.1726907630522088 / 1, 0.48823529411764705 * 1.2),\n // hsl(27.157894736842096, 0.8119658119658123 / 2, 0.7705882352941177 * 1.2),\n // hsl(220.0625, 0.8495575221238938 / 2, 0.5568627450980392 * 0.9)\n \n // 'rgb(222,112,114)',\n // 'rgb(82,150,204)'\n '#FDD023',\n lineColor,\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"lineColor = 'rgba(7, 30, 34, 1)'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"orientationNames = ['ne', 'se', 'sw', 'nw']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"trigrid = {\n const g = {}\n const step = Math.floor(width / squares)\n const cols = Math.ceil(width / step)\n const rows = Math.ceil(height / step)\n _.times(rows, row => {\n g[row] = {}\n _.times(cols, col => {\n g[row][col] = {}\n const orientations = Math.random() >= 0.5 ? ['nw', 'se'] : ['ne', 'sw']\n orientations.forEach(orientation => {\n const top = row * step\n const left = col * step\n const bottom = top + step\n const right = left + step\n g[row][col][orientation] = {\n coordinate: { row, col, orientation },\n points: _.find([\n orientation === 'nw' && [[left, top], [right, top], [left, bottom]],\n orientation === 'sw' && [[left, top], [left, bottom], [right, bottom]],\n orientation === 'ne' && [[left, top], [right, top], [right, bottom]],\n orientation === 'se' && [[left, bottom], [right, bottom], [right, top]]\n ], _.identity)\n }\n })\n })\n })\n \n return g\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"function markEnclosed(trigrid) {\n _.each(trigrid, (cols, row) => {\n _.each(cols, (cell, col) => {\n _.each(cell, (triangle, orientation) => {\n const r = parseInt(row, 10)\n const c = parseInt(col, 10)\n if (!trigrid[r + 1] || !trigrid[r][c+1]) return\n const se = trigrid[r][c]['se']\n const ne = trigrid[r+1][c]['ne']\n const sw = trigrid[r][c+1]['sw']\n const nw = trigrid[r+1][c+1]['nw']\n if (se && sw && ne && nw) {\n _.each([se, sw, ne, nw], triangle => {\n //debugger\n triangle.color = lineColor\n })\n }\n })\n })\n }) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"hsl = (h, s, l) => d3.hsl(h, s, l)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`# /imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"d3 = require(\"d3-array@1\", \"d3-color@1\", \"d3-scale-chromatic@^1.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"