31: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(); }32:[] 2f:{"title":"Ascii Shader","cells":[{"id":0,"value":"# Ascii Shader","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":67,"value":"range = Inputs.range([5, 100], {value: 5, step: 1, label: \"Range\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"vangle = Inputs.range([1, 100], {value: 50, step: 1, label: \"Dist\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"selectMath1 = Inputs.select(maths, {label: \"Curve\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"selectMath = Inputs.select(maths, {label: \"Curve\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"

\n        
\n        
\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":72,"value":" gridFontSize = 5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"maths = [Math.sin, Math.cos, Math.tan]","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"import {rangeSlider} from '@mootari/range-slider@1327'","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof density","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof mode","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}