2c:null 2d:["$","title",null,{"children":"Hello Focusss | Alok Pepakayala | Observable"}] 32:T462,paint = { now; var context = resize.c; context.clearRect(0, 0, resize.w, resize.h); var t = tail; var h = head; if (currentFocus) { // Add to the tail t.push({ ...head }); if (t.length > TAIL_LENGTH) t.shift(); // Paint the tail if (t.length > 3) { context.beginPath(); context.moveTo(t[0].x, t[0].y); for (var i = 2; i < t.length - 2; i++) { const p1 = t[i]; const p2 = t[i + 1]; context.quadraticCurveTo( p1.x, p1.y, (p1.x + p2.x) / 2, (p1.y + p2.y) / 2 ); } context.quadraticCurveTo(t[i].x, t[i].y, t[i + 1].x, t[i + 1].y); context.lineWidth = RADIUS; context.lineCap = "round"; context.strokeStyle = "#2c8660"; context.stroke(); } // Animate the head towards target x/y h.x += (h.tx - h.x) * 0.2; h.y += (h.ty - h.y) * 0.2; h.vx *= 0.8; h.x += h.vx; context.beginPath(); context.arc(h.x, h.y, RADIUS, 0, Math.PI * 2); context.fillStyle = "#40cb90"; context.fill(); mutable head = h; mutable tail = t; } }33:[] 30:{"id":"21edfc44699cf168","slug":"hello-focusss","title":"Hello Focusss","thumbnail":"9051e74c9c2423f06e9758aa7f9862b2a9cd91a8e724f1ba6492eb3756e0faa9","access_level":"public","create_time":"$D2021-09-15T15:57:07.839Z","update_time":"$D2021-09-27T20:37:52.689Z","view_time":null,"first_public_time":"$D2021-09-27T20:38:15.216Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":130,"publish_version":130,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello Focusss","cells":[{"id":0,"value":"md`# Hello Focusss\nhttps://lab.hakim.se/focusss/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"form = html`

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"event_listener = form.addEventListener(\n \"focus\",\n (event) => focus(event.target),\n true\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"mutable head = ({ x: 0, y: 0, vx: 0, tx: 0, ty: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"mutable tail = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"resize = {\n width; //rerun when width changes..\n var canvas = form.querySelector(\"canvas\");\n var context = canvas.getContext(\"2d\");\n var bb = form.getBoundingClientRect();\n var dpr = window.devicePixelRatio || 1;\n canvas.style.width = bb.width + \"px\";\n canvas.style.height = bb.height + \"px\";\n canvas.width = bb.width * dpr;\n canvas.height = bb.height * dpr;\n context.scale(dpr, dpr);\n return { w: canvas.width, h: canvas.height, c: context };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"RADIUS = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"TAIL_LENGTH = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"mutable currentFocus = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function focus(element) {\n const previousFocus = mutable currentFocus;\n\n if (element) mutable currentFocus = element;\n\n if (!mutable currentFocus) return;\n\n mutable head.tx = mutable currentFocus.offsetLeft - 12 - RADIUS;\n mutable head.ty =\n mutable currentFocus.offsetTop + mutable currentFocus.offsetHeight / 2;\n\n if (typeof mutable head.x !== \"number\") {\n mutable head.x = mutable head.tx;\n mutable head.y = mutable head.ty;\n }\n\n if (mutable currentFocus !== previousFocus) {\n mutable head.vx = -8 - Math.abs(mutable head.tx - mutable head.x) / 5;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"form_styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"