2c:null 2d:["$","title",null,{"children":"Text walk scroller - pin horizontal | Grant Custer | Observable"}] 32:T120c,{ regen; let container_width = width; let container_height = 400; let font_family = "sans-serif"; let font_size = 16; let line_height = 1.4; let unit = font_size * line_height; let word_divs = []; let word_scrolls = []; let words = text.split(""); let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); ctx.font = `${font_size}px ${font_family}`; let left_offset = unit / 2; let top_offset = 0; let length = 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 + 1; 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_scrolls.push([ [left_offset, top_offset + unit / 2, length], [left_offset + left, top_offset + right + unit / 2, length + word_width] ]); word_divs.push( `

${word}

` ); left_offset += left; top_offset += right; length += word_width; last_angle = angle; } let scroll_ends = word_scrolls.map(s => s[1][2]); let window = html`

`; let scroller = html`

`; let scrolly = html`

`; let content = html`

${word_divs.join( "" )}

`; window.appendChild(content); scroller.appendChild(scrolly); window.appendChild(scroller); let active_segment = word_scrolls[0]; let line_points = active_segment; let radians = Math.atan( (line_points[1][0] - line_points[0][0]) / (line_points[1][1] - line_points[0][1]) ); let degrees = Math.round(radians * (180 / Math.PI)); let sight = null; if (show_sight) { sight = html`

`; window.appendChild(sight); } content.style.transformOrigin = `${unit / 2}px ${0}px`; content.style.transform = `translate(${container_width / 2 - unit / 2}px, ${container_height / 2 - unit / 2}px) rotate(${degrees - 90}deg)`; scroller.addEventListener("scroll", e => { let scroll = e.target.scrollTop; let segment_index = null; for (let i = 0; i < word_scrolls.length; i++) { if (scroll_ends[i] > scroll) { segment_index = i; break; } } if (segment_index === null) segment_index = scroll_ends.length - 1; let active_segment = word_scrolls[segment_index]; let hyp = scroll - active_segment[0][2]; let line_points = active_segment; let radians = Math.atan( (line_points[1][0] - line_points[0][0]) / (line_points[1][1] - line_points[0][1]) ); let degrees = Math.round(radians * (180 / Math.PI)); if (show_sight) { // sight.style.transform = `rotate(${90 - degrees}deg)`; } let adjacent = Math.cos(radians) * hyp; let opposite = Math.sin(radians) * hyp; let x = opposite + active_segment[0][0]; let y = adjacent + active_segment[0][1]; content.style.transformOrigin = `${x}px ${y}px`; content.style.transform = `translate(${container_width / 2 - x}px, ${container_height / 2 - y}px) rotate(${degrees - 90}deg)`; }); return window; }33: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.`34:[] 30:{"id":"bd33d37612d0398b","slug":"text-walk-scroller-pin-horizontal","title":"Text walk scroller - pin horizontal","thumbnail":"bb1a3fd11c32ef37e5a8f617b0d4826ff66cf918f956ec07d6c3d3db75fe86d8","access_level":"public","create_time":"$D2018-12-17T23:30:37.352Z","update_time":"$D2018-12-17T23:49:33.142Z","view_time":null,"first_public_time":"$D2018-12-17T23:43:59.165Z","has_unpublished_edits":null,"fork":{"id":"a949f2e0bced4e9d","slug":"text-walk-scroller","title":"Text walk scroller","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"stars":2,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":191,"publish_version":191,"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":1,"collection":{"id":"050d50cae731b0ac","slug":"scollers","title":"Scrollers","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"titling":"auto","title":"Text walk scroller - pin horizontal","cells":[{"id":0,"value":"md`# Text walk scroller - pin horizontal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof regen = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"viewof show_sight = checkbox({\n options: [{ value: \"toggle\", label: \"Show center\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`## Fork\n\nThis is a forked version where the centered letter is always horizontal. I figured out I could dynamically set the transform-origin. That saved me from more intense math, I think. But the end result is too rickety. I think that could be smoothed out by averaging the angles of the surrounding letters, but I'd have to think more about it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`## About\n\nEach letter is layed out at a random angle, limited by the last angle to keep it from getting too crazy. The scroller keeps the active letter in the center of the window. The scroll length is scaled to the combined width of all the letters and spacing.\n\n## Related experiments\n- https://beta.observablehq.com/@grantcuster/scrollers\n- https://beta.observablehq.com/@grantcuster/text-walk\n\n## Regrets\n\nI rendered the text in HTML rather than canvas because I wanted the user to be able to highlight it. That ended up not being possible because I needed the empty scrolling div to be in front to capture the scroll events. There's probably a work-around to capture both the scrolling and enable highlighting but I haven't figured it out yet.\n\nI'd be interested to see a version of this where the text is rotated, so that the letter in focus is horizontal as well as centered.\n\n## Text\n\nText from _As I Lay Dying_ by William Faulkner.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import {checkbox} from \"@jashkenas/inputs\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"