28:null 29:["$","title",null,{"children":"Ascii Shader | Giacomo Nanni | Observable"}] 2e:Ta57,renderer = { const gridElem = document.querySelector("#grid"); const gridElemBg = document.querySelector("#grid-bg"); const gridElemContent = document.querySelector("#grid-content"); let colCount = 0; let rowCount = 0; let pixelCount = 0; let pixels = []; const charRangeStart = characters[0]; const charRangeEnd = characters[1]; const charRangeMax = charRangeEnd - charRangeStart; function updateSize() { gridElemContent.innerHTML = ""; gridElemBg.style.backgroundSize = ""; gridElemBg.style.backgroundImage = ""; colCount = Math.floor(gridElem.clientWidth / gridFontSize); rowCount = Math.floor(gridElem.clientHeight / gridFontSize); pixelCount = colCount * rowCount; pixels = Array(pixelCount).fill(String.fromCharCode(charRangeStart)); let bgSize = []; for (let row = 0; row < rowCount; row++) { bgSize.push(`${colCount * gridFontSize}px ${row * gridFontSize}px`); } gridElemBg.style.backgroundSize = bgSize.join(","); render(); } function generate(ticks) { let cx = Math.floor(colCount / 2); let cy = Math.floor(rowCount / 2); for (let i = 0; i < pixelCount; i++) { let x = i % colCount; let y = Math.floor(i / colCount); let t = 100 + ticks * 0.001; let v = (selectMath.value((x - cx) / vangle.value) + selectMath1.value((y - cy) / vangle.value) + t) * range.value; let charVal = v % charRangeMax; pixels[i] = String.fromCharCode(charRangeStart + (charVal % charRangeMax)); } } function generateColors() { let bgImage = []; let bgImageParts = []; let percent = 0; const percentInterval = 100 / colCount; for (let i = 0; i < pixelCount; i++) { let pixel = pixels[i]; let hslAngle =((pixel.charCodeAt(0) - charRangeStart) / charRangeMax) * 360; let pixelColor = `hsl(${hslAngle}, 10%, 100%)`; let bgImagePart = `${pixelColor} ${percent}%`; percent += percentInterval; bgImagePart += `, ${pixelColor} ${percent}%`; bgImageParts.push(bgImagePart); if ((i + 1) % colCount === 0) { bgImage.push(`linear-gradient(to bottom, ${bgImageParts.join(", ")})`); percent = 0; bgImageParts = []; } } gridElemBg.style.backgroundImage = bgImage.join(","); } function render(ticks = 0) { generate(ticks); generateColors(); let content = ''; content = pixels.reduce((prev, curr, idx) => { return prev + curr + ((idx + 1) % colCount === 0 ? "\n" : ""); }); gridElemContent.innerHTML = content; requestAnimationFrame(render); } updateSize(); }2f:[] 2c:{"id":"31f6e2c56d952186","slug":"ascii-shader","title":"Ascii Shader","thumbnail":"61d9eeabb48734378a2ae8ccf4ee8064c807c70e1ee6e5ac7f15dd625707a7b8","access_level":"public","create_time":"$D2022-05-11T19:46:44.910Z","update_time":"$D2022-06-19T09:29:15.316Z","view_time":null,"first_public_time":"$D2022-05-12T08:00:02.152Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"5129c2957f22f1f2","login":"sinanatra","name":"Giacomo Nanni","avatar_url":"https://avatars-next.observableusercontent.com/780b6bc6dd2a5bbb19911ff3ee47ff844b4e25436b3bd6a0cde359479c6b4dd9","tier":"starter_2024"},"version":336,"publish_version":336,"role":null,"authored":false,"authors":[{"type":"individual","id":"c9e695131ad6aff8","login":"sinanatra","name":"Giacomo Nanni","avatar_url":"https://avatars-next.observableusercontent.com/780b6bc6dd2a5bbb19911ff3ee47ff844b4e25436b3bd6a0cde359479c6b4dd9","tier":null}],"members":[{"type":"individual","id":"c9e695131ad6aff8","login":"sinanatra","name":"Giacomo Nanni","avatar_url":"https://avatars-next.observableusercontent.com/780b6bc6dd2a5bbb19911ff3ee47ff844b4e25436b3bd6a0cde359479c6b4dd9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0ad21b061afca8d7","slug":"random","title":"Graphics","owner":{"id":"5129c2957f22f1f2","login":"sinanatra","name":"Giacomo Nanni"}},"type":"notebook","body":{"title":"Ascii Shader","cells":[{"id":0,"value":"# Ascii Shader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"viewof characters = rangeSlider({\n min: 25,\n max: 60,\n step: 1,\n value: this ? this.value : [33, 50],\n title: 'Characters',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"range = Inputs.range([5, 100], {value: 5, step: 1, label: \"Range\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"vangle = Inputs.range([1, 100], {value: 50, step: 1, label: \"Dist\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"selectMath1 = Inputs.select(maths, {label: \"Curve\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"selectMath = Inputs.select(maths, {label: \"Curve\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"

\n        
\n        
\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":" gridFontSize = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"maths = [Math.sin, Math.cos, Math.tan]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"import {rangeSlider} from '@mootari/range-slider@1327'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"viewof density","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof mode","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"import {\n viewof density,\n viewof size,\n viewof scale,\n viewof mode\n} from \"@stwind/glsl-contour-lines\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"