CRT Meditation

\n ${svgContent}\n

\n \n const svg = document.getElementById('crt-monitor');\n const screen = document.getElementById('screen');\n const container = document.getElementById('container');\n\n const colorA = ${JSON.stringify(colorA)};\n const colorB = ${JSON.stringify(colorB)};\n const duration = ${duration};\n const total = duration * 4;\n const startScale = ${startScale};\n const endScale = ${endScale};\n\n let start = performance.now();\n\n function draw(t) {\n const cycle = (t - start) % total;\n let scale, r, g, b;\n\n if (cycle < duration) {\n const p = cycle / duration;\n scale = startScale + (endScale - startScale) * p;\n r = colorA.r; g = colorA.g; b = colorA.b;\n } else if (cycle < duration * 2) {\n const p = (cycle - duration) / duration;\n scale = endScale;\n r = colorA.r + (colorB.r - colorA.r) * p;\n g = colorA.g + (colorB.g - colorA.g) * p;\n b = colorA.b + (colorB.b - colorA.b) * p;\n } else if (cycle < duration * 3) {\n const p = (cycle - duration * 2) / duration;\n scale = endScale - (endScale - startScale) * p;\n r = colorB.r; g = colorB.g; b = colorB.b;\n } else {\n const p = (cycle - duration * 3) / duration;\n scale = startScale;\n r = colorB.r + (colorA.r - colorB.r) * p;\n g = colorB.g + (colorA.g - colorB.g) * p;\n b = colorB.b + (colorA.b - colorB.b) * p;\n }\n\n svg.style.transform = \\`scale(\\${scale})\\`;\n screen.style.fill = \\`rgb(\\${Math.round(r)}, \\${Math.round(g)}, \\${Math.round(b)})\\`;\n requestAnimationFrame(draw);\n }\n\n requestAnimationFrame(draw);\n \n \n \n `;\n\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}","deleted","label",[99],"permalink","https://www.val.town/x/vvampa/localconsciousnessproject/code/main.tsx","extension","actionData","errors"]