diff options
| -rw-r--r-- | fractiform.js | 53 | ||||
| -rw-r--r-- | index.html | 69 |
2 files changed, 62 insertions, 60 deletions
diff --git a/fractiform.js b/fractiform.js index 4817d84..cb31f1d 100644 --- a/fractiform.js +++ b/fractiform.js @@ -28,6 +28,8 @@ let ui_div; let viewport_width, viewport_height; let shift_key = false, ctrl_key = false; let html_id = 0; +let widget_choices; +let widget_search; let width = 1920, height = 1920; @@ -166,6 +168,15 @@ const widget_info = { }, }, }; +let widget_ids_sorted_by_name = []; +for (let id in widget_info) { + widget_ids_sorted_by_name.push(id); +} +widget_ids_sorted_by_name.sort(function (a, b) { + a = widget_info[a].name; + b = widget_info[b].name; + return a.localeCompare(b); +}); window.addEventListener('load', startup); @@ -367,6 +378,12 @@ function add_widget(func) { let title = document.createElement('div'); title.classList.add('widget-title'); title.appendChild(document.createTextNode(info.name)); + if (func !== 'output') { + let name_input = document.createElement('input'); + name_input.placeholder = 'Name'; + name_input.classList.add('widget-name'); + title.appendChild(name_input); + } root.appendChild(title); } @@ -560,7 +577,7 @@ function get_shader_source() { let widgets = {}; let output_widget = null; for (let widget_div of document.getElementsByClassName('widget')) { - let names = widget_div.getElementsByClassName('name'); + let names = widget_div.getElementsByClassName('widget-name'); console.assert(names.length <= 1, 'multiple name inputs for widget'); let name = names.length > 0 ? names[0].value : null; let func = widget_div.dataset.func; @@ -595,16 +612,32 @@ function get_shader_source() { show_error('output color should have type vec3, but it has type ' + output.type); return null; } - state.add_code(`return ${output.code};\n`) + state.add_code(`return ${output.code};\n`); let code = state.get_code(); console.log(code); return code; } +function update_widget_choices() { + let search_term = widget_search.value.toLowerCase(); + let choices = widget_choices.getElementsByClassName('widget-choice'); + widget_ids_sorted_by_name.forEach(function (id, i) { + let name = widget_info[id].name; + let choice = choices[i]; + let shown = name.toLowerCase().indexOf(search_term) !== -1; + if (id === 'output') { + shown = false; + } + choice.style.display = shown ? 'block' : 'none'; + }); +} + function startup() { page = document.getElementById('page'); canvas = document.getElementById('canvas'); ui_div = document.getElementById('ui'); + widget_choices = document.getElementById('widget-choices'); + widget_search = document.getElementById('widget-search'); gl = canvas.getContext('webgl'); if (gl === null) { @@ -694,9 +727,23 @@ void main() { framebuffer_color_texture = gl.createTexture(); sampler_texture = gl.createTexture(); + for (let id of widget_ids_sorted_by_name) { + let widget = widget_info[id]; + let button = document.createElement('button'); + button.classList.add('widget-choice'); + button.appendChild(document.createTextNode(widget.name)); + widget_choices.appendChild(button); + button.addEventListener('click', function (e) { + add_widget(id); + }); + } + set_up_framebuffer(); add_widget('output'); - add_widget('mod'); + update_widget_choices(); + widget_search.addEventListener('input', function (e) { + update_widget_choices(); + }); frame(0.0); window.addEventListener('keydown', on_key_press); @@ -124,9 +124,18 @@ margin: 2px; display: block; } - .name { + .widget-name { width: 10em; } + .widget-choice { + width: 100%; + border-bottom: 0; + margin: 0; + } + #widget-choices { + margin: 0.2em; + border-bottom: 2px solid white; + } </style> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> @@ -142,63 +151,9 @@ </p> </noscript> <div id="ui"> - Add <input type="text" placeholder="Name"> - <!-- - <div class="widget" data-func="output"> - <div class="widget-title">Output color</div> - <div class="in"><input type="text" id="out"> <label for="out">value</label></div> - </div> - <div class="widget" data-func="mix"> - <div class="widget-title">Mix <input placeholder="name" class="name" type="text"></div> - <div class="in"><input type="text" id="src1"> <label for="src1">src1</label></div> - <div class="in"><input type="text" id="src2"> <label for="src2">src2</label></div> - <div class="in"><input type="text" id="mix"> <label for="mix">mix</label></div> - <div class="outs"> - <div class="out">out</div> - </div> - </div> - <div class="widget" data-func="mix"> - <div class="widget-title">Mix <input placeholder="name" class="name" type="text"></div> - <div class="in"><input type="text" id="asrc1"> <label for="asrc1">src1</label></div> - <div class="in"><input type="text" id="asrc2"> <label for="asrc2">src2</label></div> - <div class="in"><input type="text" id="amix"> <label for="amix">mix</label></div> - <div class="outs"> - <div class="out">out</div> - </div> - </div> - <div class="widget" data-func="prev"> - <div class="widget-title">Last frame <input placeholder="name" class="name" type="text"></div> - <div class="in"><input type="text" id="bpos"> <label for="bpos">pos</label></div> - <div class="outs"> - <div class="out">out</div> - </div> - </div> - <div class="widget" data-func="mul"> - <div class="widget-title">Multiply <input placeholder="name" class="name" type="text"></div> - <div class="in"><input type="text" id="a04"> <label for="a04">a</label></div> - <div class="in"><input type="text" id="a05"> <label for="a05">b</label></div> - <div class="outs"> - <div class="out">out</div> - </div> - </div> - <div class="widget" data-func="square"> - <div class="widget-title">Square selector <input placeholder="name" class="name" type="text"></div> - <div class="in"><input type="text" id="a02"> <label for="a02">pos</label></div> - <div class="in"><input type="text" id="a00"> <label for="a00">inside</label></div> - <div class="in"><input type="text" id="a01"> <label for="a01">outside</label></div> - <div class="in"><input type="text" id="a03"> <label for="a03">size</label></div> - <div class="outs"> - <div class="out">out</div> - </div> + Add <input type="text" id="widget-search" placeholder="Search"> + <div id="widget-choices"> </div> - <div class="widget" data-func="mod"> - <div class="widget-title">Modulo <input placeholder="name" class="name" type="text"></div> - <div class="in"><input type="text" id="a06"> <label for="a06">a</label></div> - <div class="in"><input type="text" id="a07"> <label for="a07">b</label></div> - <div class="outs"> - <div class="out">out</div> - </div> - </div>--> </div> <canvas id="canvas"> <p> |