2b:null 2c:["$","title",null,{"children":"Square spiral function | Sander Evers | Observable"}] 31:[] 2f:{"id":"a8fc3841e42e9071","slug":"square-spiral-function","title":"Square spiral function","thumbnail":"b40b4cf41772b99a311a08cfa4c5bcffc9ed9c9a257cf03b4dbe1ee4647ce8e1","access_level":"public","create_time":"$D2022-10-18T12:01:20.444Z","update_time":"$D2024-02-28T15:16:03.330Z","view_time":null,"first_public_time":"$D2022-11-06T10:15:46.312Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":778,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}],"members":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Square spiral function","cells":[{"id":0,"value":"# Square spiral function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":296,"value":"**Goal:** a function that produces the following _square spiral number_ given x and y coordinates.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"largesvg(spiralNrNoMax,(x,y)=>rainbowColor(spiralNrNoMax(x,y)-frame/20))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"viewof frame = new Scrubber(d3.range(800), {loop:false, format:()=>''})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"Let's focus on a single lap of the spiral, for example lap 3. Its cells form a square, with the numbering starting at 25, just above the south east corner, and ending at 48 in the south east corner.\n\nIt's helpful to think of each number as the sum of the _lap start_ (here 25; see first diagram below) and the _position within the lap_ (ranging from 0 to 23; second diagram).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":427,"value":"viewof laps = Inputs.checkbox([1,2,3,4],{value:[3],format:n=>`lap ${n}`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"html`${smallsvg(visibleLapStart,visibleLcolor)}${smallsvg(visibleLapPos,visibleQcolor)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"viewof qcolors = Inputs.checkbox(\n new Map([['EAST: x+y-1',eastColors],['NORTH: -x+3y-1',northColors],['WEST: -5x-y-1',westColors],['SOUTH: x-7y-1',southColors]]),\n {value:[eastColors]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"The _lap start_ for lap ${tex`n`} equals ${tex`(2n-1)^2`}, the number of cells the lap runs around.\n\nFor the _position within the lap_, we can draw up a different formula depending on the side of the square (east, north, west, south):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":341,"value":"function lapPos(x,y) {\n /*EAST*/ if (y Math.max(Math.abs(x),Math.abs(y))","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"showLap = (x,y) => laps.includes(lap(x,y));","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"rainbowColor = (nr) => d3.color(d3.interpolateRainbow((nr%20/20))).formatHex()","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"rainbowLighter = (nr) => d3.color(d3.interpolateRainbow((nr%20/20))).brighter(1).formatHex()","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":625,"value":"### Lap start","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":489,"value":"visibleLapStart = (x,y) => showLap(x,y) ? (2*lap(x,y)-1)**2 : undefined","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"lapStartColors = l => [rainbowColor([13,15,17,19,21][l]),rainbowLighter([13,15,17,19,21][l]),'#eeeeee']","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"visibleLcolor = (x,y) => lapStartColors(lap(x,y))[showLap(x,y) ? 0 : lap(x,y) < Math.max(...laps) ? 1 : 2]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"### Lap position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":315,"value":"visibleLapPos = (x,y) => showLap(x,y) ? lapPos(x,y) : undefined;","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"lapPosColors = q => [rainbowColor([1,4,6,8][q]),rainbowLighter([2,4,6,8][q])]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"eastColors = (x,y) => (y (x<=y && -x (x<=y && y<=-x) ? lapPosColors(2) : undefined;","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"southColors = (x,y) => (y ['#eeeeee','#eeeeee'];","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"visibleQcolor = (x,y) => [...qcolors,noColors].map(f => f(x,y)).filter(c => c)[0][showLap(x,y)?0:1];","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"### SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":150,"value":"function cell(text,fcolor,bcolor,fontsize) {\n const textAttrs = {\n 'font-family':'Abril Fatface',\n 'font-size':`${fontsize}px`,\n fill:fcolor,\n 'text-anchor':'middle',\n 'dominant-baseline':'middle'\n };\n return svgt`\n${text}`\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"function grid(size,fontsize,getNumber,getColor) {\n const start = -Math.floor(size/2);\n const end = start+size;\n const cellxy = (x,y) => translate([x,y,0],cell(''+(getNumber(x,y)??''),'#ffffff',getColor(x,y),fontsize))\n const cells = d3.range(start,end).flatMap(x => d3.range(start,end).map(y => cellxy(x,y)));\n const xAxis = d3.range(start,end).map(x => translate([x,start-1,0],cell(''+x,'#aaaaaa','#ffffff',0.8*fontsize)));\n const yAxis = d3.range(start,end).map(y => translate([start-1,y,0],cell(''+y,'#aaaaaa','#ffffff',0.8*fontsize)));\n return g(...cells,...xAxis,...yAxis);\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"largesvg = (getNumber,getColor) => svgtBox(scale(1/5,grid(9,20,getNumber,getColor)), 350, 350)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"smallsvg = (getNumber,getColor) => svgtBox(scale(1/5,grid(9,16,getNumber,getColor)), 250, 250)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":641,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import {svgt, scale, g, translate, svgtBox} from '@sanderevers/svg-transformations'","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"