2c:null 2d:["$","title",null,{"children":"Text walks | Grant Custer | Observable"}] 32:T716,random_angle_letters = { regen5; let font_family = "sans-serif"; let font_size = 16; let line_height = 1.4; let unit = font_size * line_height; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); ctx.font = `${font_size}px ${font_family}`; let space = ctx.measureText(" ").width; let last = null; let word_divs = []; let words = text.split(""); let left_offset = unit / 2; let top_offset = 0; let last_angle = Math.random() * 90; let angle_divergence = 10; for (let i = 0; i < words.length; i++) { let word = words[i]; let word_width = ctx.measureText(word).width; let angle; if (last_angle - angle_divergence / 2 < 0) { angle = Math.random() * angle_divergence; } else if (last_angle + angle_divergence / 2 > 90) { angle = 90 - angle_divergence + Math.random() * angle_divergence; } else { angle = last_angle - angle_divergence / 2 + Math.random() * angle_divergence; } let rotate = angle; let radians = angle * (Math.PI / 180); let left = Math.cos(radians) * word_width; let right = Math.sin(radians) * word_width; word_divs.push( `

${word}

` ); left_offset += left; top_offset += right; last_angle = angle; } return html`

${word_divs.join( "" )}

`; }33:T59c,random_angles = { regen2; let font_family = "sans-serif"; let font_size = 16; let line_height = 1.4; let unit = font_size * line_height; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); ctx.font = `${font_size}px ${font_family}`; let space = ctx.measureText(" ").width; let last = null; let word_divs = []; let words = text.split(" "); let left_offset = unit / 2; let top_offset = 0; for (let i = 0; i < words.length; i++) { let word = words[i] + " "; let word_width = ctx.measureText(word).width; // angle between 0 and 90 let angle = Math.random() * 90; let rotate = angle; let radians = angle * (Math.PI / 180); let left = Math.cos(radians) * word_width; let right = Math.sin(radians) * word_width; word_divs.push( `

${word}

` ); left_offset += left; top_offset += right; } return html`

${word_divs.join( "" )}

`; }34:T633,random_walk = { regen; let font_family = "sans-serif"; let font_size = 16; let line_height = 1.4; let unit = font_size * line_height; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); ctx.font = `${font_size}px ${font_family}`; let space = ctx.measureText(" ").width; let last = null; let word_divs = []; let words = text.split(" "); let left_offset = unit / 2; let top_offset = 0; for (let i = 0; i < words.length; i++) { let word = words[i] + " "; let word_width = ctx.measureText(word).width; let dir = "right"; if (Math.random() > 0.5) dir = "down"; let rotate = 0; if (dir === "down") { rotate = 90; if (last !== dir) { left_offset += unit; } top_offset += unit / 2; } word_divs.push( `

${word}

` ); if (dir === "down") { // left_offset = left_offset + word_width + space; top_offset += word_width - unit / 2; } else { left_offset = left_offset + word_width; } last = dir; } return html`

${word_divs.join( "" )}

`; }35:T4c3,random_returns = { regen3; let font_family = "sans-serif"; let font_size = 16; let line_height = 1.4; let unit = font_size * line_height; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); ctx.font = `${font_size}px ${font_family}`; let space = ctx.measureText(" ").width; let word_divs = []; let words = text.split(" "); let left_offset = unit / 2; let top_offset = 0; for (let i = 0; i < words.length; i++) { let word = words[i] + " "; let word_width = ctx.measureText(word).width; word_divs.push( `

${word}

` ); if (Math.random() > 0.5) { top_offset = top_offset + unit; } else { left_offset = left_offset + word_width; } } return html`

${word_divs.join( "" )}

`; }36:T4e8,canvas_wordwrap = { let font_family = "sans-serif"; let font_size = 16; let line_height = 1.4; let unit = font_size * line_height; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); ctx.font = `${font_size}px ${font_family}`; let space = ctx.measureText(" ").width; let word_divs = []; let words = text.split(" "); let left_offset = 0; let top_offset = 0; for (let i = 0; i < words.length; i++) { let word = words[i] + " "; let word_width = ctx.measureText(word).width; let new_line = false; if (left_offset + word_width > width) { new_line = true; left_offset = 0; top_offset = top_offset + unit; } word_divs.push( `

${word}

` ); left_offset = left_offset + word_width; } return html`

${word_divs.join( "" )}

`; }37:T6d4,text = `Jewel and I come up from the field, following the path in single file. Although I am fifteen feet ahead of him, anyone watching us from the cotton-house can see Jewel’s frayed and broken straw hat a full head above my own. The path runs straight as a plumb-line, worn smooth by feet and baked brick-hard by July, between the green rows of laid-by cotton, to the cotton-house in the centre of the field, where it turns and circles the cotton-house at four soft right angles and goes on across the field again, worn so by feet in fading precision. The cotton-house is of rough logs, from between which the chinking has long fallen. Square, with a broken roof set at a single pitch, it leans in empty and shimmering dilapidation in the sunlight, a single broad window in two opposite walls giving on to the approaches of the path. When we reach it I turn and follow the path which circles the house. Jewel, fifteen feet behind me, looking straight ahead, steps in a single stride through the window. Still staring straight ahead, his pale eyes like wood set into his wooden face, he crosses the floor in four strides with the rigid gravity of a cigar-store Indian dressed in patched overalls and endued with life from the hips down, and steps in a single stride through the opposite window and into the path again just as I come around the corner. In single file and five feet apart and Jewel now in front, we go on up the path toward the foot of the bluff. Tull’s wagon stands beside the spring, hitched to the rail, the reins wrapped about the seat stanchion. In the wagon-bed are two chairs. Jewel stops at the spring and takes the gourd from the willow branch and drinks. I pass him and mount the path, beginning to hear Cash’s saw.`38:[] 30:{"id":"2b42a5dbc90d9198","slug":"text-walk","title":"Text walks","thumbnail":"5f5a3937222e7fe554f88d4518649bbba23d95de30642d9e0e7e24c54fc363e3","access_level":"public","create_time":"$D2018-12-07T01:09:45.978Z","update_time":"$D2018-12-08T23:00:43.406Z","view_time":null,"first_public_time":"$D2018-12-07T03:45:00.600Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":275,"publish_version":275,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"050d50cae731b0ac","slug":"scollers","title":"Scrollers","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"titling":"auto","title":"Text walks","cells":[{"id":0,"value":"md`# Text walks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`Text is from the start of _As I lay Dying_. Measured in canvas but rendered in HTML so you can still highlight it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`## Angled letters (limited by previous letter angle so it doesn't get too chaotic)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof regen5 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## Angled words down and to the right`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"viewof regen2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`## Random walk down and to the right`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof regen = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`## Random return`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof regen3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`## Canvas text-wrap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`## HTML text-wrap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"standard = html`${text}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"