2a:null 2b:["$","title",null,{"children":"Square spiral function | Sander Evers | Observable"}] 30:[] 2e:{"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","has_unpublished_edits":null,"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,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Square spiral function","cells":[{"id":0,"value":"# Square spiral function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"largesvg(spiralNrNoMax,(x,y)=>rainbowColor(spiralNrNoMax(x,y)-frame/20))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"viewof frame = new Scrubber(d3.range(800), {loop:false, format:()=>''})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"html`${smallsvg(visibleLapStart,visibleLcolor)}${smallsvg(visibleLapPos,visibleQcolor)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"showLap = (x,y) => laps.includes(lap(x,y));","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"rainbowColor = (nr) => d3.color(d3.interpolateRainbow((nr%20/20))).formatHex()","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"### Lap start","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"### Lap position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"visibleLapPos = (x,y) => showLap(x,y) ? lapPos(x,y) : undefined;","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"southColors = (x,y) => (y ['#eeeeee','#eeeeee'];","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"### SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"import {svgt, scale, g, translate, svgtBox} from '@sanderevers/svg-transformations'","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"