2f:T181f,class ShaderFun { constructor(meta, strings, args) { this.meta = meta; this.strings = strings; this.args = args; } mapDeps(fun, cache) { if (!cache.has(this)) { const newArgs = this.args.map(arg => fun(arg.mapDeps(fun, cache))); const sameArgs = this.args.every((arg, num) => arg === newArgs[num]); const res = sameArgs ? this : new ShaderFun(this.meta, this.strings, newArgs); cache.set(this, res); } return cache.get(this); } remix(newMeta, ...pairs) { const map = new Map(pairs); const res = this.mapDeps(fun => { if (map.has(fun)) { return map.get(fun); } return fun; }, new Map()); res.meta = {...this.meta, ...newMeta}; const html = res.getHtml(); html.value = res; return html; } getBaseName() { const res = this.meta.name; if (!res) { throw new Error(`Shader meta object should have "name" property`); } return res; } getDeps() { const res = []; const resSet = new Set(); resSet.add(this); for (const arg of this.args) { for (const dep of arg.getDeps()) { if (resSet.has(dep)) continue; res.push(dep); resSet.add(dep); } } res.push(this); return res; } setDepsNames() { const depsOrder = this.getDeps(); const namesSet = new Set(); for (const dep of depsOrder) { dep.name = ''; } for (const dep of depsOrder) { if (dep.name) { namesSet.add(dep.name); continue; } const baseName = dep.getBaseName(); let counter = 1; while (true) { let curName = `${baseName}${counter}`; if (counter === 1) { curName = baseName; } else if (/[0-9]/.test(baseName[baseName.length - 1])) { curName = `${baseName}_${counter}`; } if (!namesSet.has(curName)) { dep.name = curName; namesSet.add(dep.name); break; } counter += 1; } } return depsOrder; } getGenericSource(argMapFun, strMapFun=x=>x, name=null) { if (this.strings.length !== this.args.length + 1) { throw new Error(`Invalid number of arguments and strings of the template literal`); } name = name || this.name; let res = strMapFun(this.strings[0]); for (let i=0; i x.getBaseName(), x => x, substr).split(substr)[0].trim(); } getFullSource() { const depsOrder = this.setDepsNames(); let res = ''; for (const dep of depsOrder) { res += dep.getGenericSource(x => x.name); res += '\n\n'; } return res; } getHtml() { let isFullSource = false; const spanStyle = { 'border-radius': '3px', 'background': '#fafafa', 'color': 'black', 'font-family': 'sans-serif', 'font-weight': '400', 'padding': '0 4px', 'border': '1px solid gray', 'position': 'relative', 'top': '0px', }; const source = this.getGenericSource(arg => { return `${arg.meta.title || arg.getBaseName()}`; }, stringToHtml, `${this.meta.title || this.getBaseName()}`); const divStyle = { 'font-family': 'monospace', 'white-space': 'pre', 'font-weight': '600', 'border': '1px solid gray', 'border-radius': '6px', 'font-size': '15px', }; const toggleButtonStyle = { 'position': 'absolute', 'top': '2px', 'right': '0px', 'display': 'inline-block', 'border': '1px solid gray', 'border-radius': '3px', 'background': 'white', 'font-family': 'sans-serif', 'padding': '0 3px', 'margin-top': '2px', 'cursor': 'pointer', 'margin-right': '5px', 'float': 'right', 'font-size': '13px', } const titleStyle = { 'position': 'relative', 'font-family': 'sans-serif', 'border-bottom': '1px solid gray', 'padding': '4px 120px 4px 7px', 'font-size': '14px', 'font-weight': '400', 'background': '#ffd87b', 'border-radius': '5px 5px 0 0', 'white-space': 'initial', }; const res = html`

`; const getInnerRes = () => { const toggleButton = html`

${isFullSource ? 'View short source' : 'View full source'}

`; const title = html`

${this.meta.description || ' '}${toggleButton}

`; toggleButton.onclick = () => { isFullSource = !isFullSource; res.innerHTML = ''; res.appendChild(getInnerRes()); }; return html`

${title}

${isFullSource ? this.getFullSource().trim() : source}

`; } res.appendChild(getInnerRes()); return res; } getMainSource() { const type = this.getReturnType(); let resExpr; if (type === 'vec4') { resExpr = 'res' } else if (type === 'vec3') { resExpr = 'vec4(res, 1)'; } else if (type === 'vec2') { resExpr = 'vec4(res, 0, 1)'; } else if (type === 'float') { resExpr = 'vec4(res, res, res, 1)'; } else if (type === 'bool') { resExpr = 'vec4(vec3(float(res)), 1)'; } else { throw new Error(`Return type "${type}" is not supported`); } return `${type} res = ${this.name}();\ngl_FragColor = ${resExpr};`; } getCanvas(h, w) { const fullSource = this.getFullSource(); const canvas = makeRegl( this.getMainSource(), fullSource, h, w, ); return canvas; } }30:[] 2d:{"title":"Shaders functions utils","cells":[{"id":0,"value":"# Shaders functions utils","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof yellow = shaderFun({\n name: 'yellow',\n title: 'yellow',\n description: 'Always returns yellow color',\n})`vec4 function() {\n return vec4(1, 1, 0, 1);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"viewof red = shaderFun({\n name: 'red',\n title: 'red',\n description: 'Always returns red color',\n})`vec4 function() {\n return vec4(1, 0, 0, 1);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof isInCircle = shaderFun({\n name: 'isInCircle',\n title: 'is in circle',\n description: 'Checks whether current pixel is in circle'\n})`bool isInCircle() {\n vec2 relXY = gl_FragCoord.xy / iResolution.xy * 2. - 1.;\n return length(relXY) < 1.;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof isOutCircle = shaderFun({\n name: 'isOutCircle',\n title: 'is out of circle',\n description: 'Checks whether current pixel is out of circle'\n})`bool isInCircle() {\n return !${isInCircle}();\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof yellowCircle = shaderFun({\n name: 'yellowCircle',\n title: 'yellow circle',\n description: 'Draws yellow circle'\n})`vec4 yellowCircle() {\n if (${isInCircle}()) {\n return ${yellow}();\n } else {\n return vec4(0, 0, 0, 1);\n }\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof redCircle = yellowCircle.remix({\n name: 'redCircle',\n title: 'red circle',\n description: 'Draws black circle on red background',\n}, [isInCircle, isOutCircle], [yellow, red])","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof sumCircle = shaderFun({\n name: 'sumCircle',\n title: 'sum circle',\n description: 'Draws yellow circle on red background',\n})`vec4 sumCircle() {\n return ${redCircle}() + ${yellowCircle}();\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"yellowCircle.getCanvas()","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"sumCircle.getCanvas()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"function styleToStr(style) {\n return Object.entries(style).map(([k, v]) => `${k}: ${v}`).join('; ');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"function stringToHtml(s) {\n return s.replace(/&/g, '&').replace(//g, '>');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"function shaderFun(meta) {\n return (strings, ...args) => {\n const shaderFun = new ShaderFun(meta, strings, args);\n const res = shaderFun.getHtml();\n res.value = shaderFun;\n return res;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"import {makeRegl} from '4fcf5efdc3c119ee'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}