Permalink
Browse files

Add ability to save and load shaders

  • Loading branch information...
jacobwinters committed Jun 30, 2018
1 parent bee212e commit 9c0b7c818a4229430ae4ff70870b0701b9aadf28
Showing with 41 additions and 1 deletion.
  1. +10 −1 display.js
  2. +28 −0 fileio.js
  3. +3 −0 index.html
View
@@ -8,11 +8,20 @@ function grid(nodes) {
return [Math.floor(y * 5), Math.floor(x * 5)];
}
function clickListener(event) {
const [y, x] = eventCoordsToGrid(event);
if (settings.operation === 'variations') {
const [y, x] = eventCoordsToGrid(event);
display.setDisplay(grid(makeGrid(nodes[y][x])));
} else if (settings.operation === 'save') {
saveFile(nodes[y][x], 'shader', 'shader');
} else if (settings.operation === 'open') {
openFile('shader', (shader) => setShader(y, x, shader));
}
}
function setShader(y, x, shader) {
nodes[y][x] = shader;
shaders[y][x].dispose();
shaders[y][x] = compiler(shader);
}
gl.canvas.addEventListener('click', clickListener);
const shaders = nodes.map((row) => row.map(compiler));
return {
View
@@ -0,0 +1,28 @@
'use strict';
function saveFile(object, name, type) {
const blob = new Blob([JSON.stringify(object)]);
const url = URL.createObjectURL(blob);
const element = document.createElement('a');
element.href = url;
element.download = `${name}.${type}`;
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
URL.revokeObjectURL(url);
}
function openFile(type, callback) {
const element = document.createElement('input');
element.type = 'file';
element.accept = `.${type}`;
element.addEventListener('change', (event) => {
if (element.files.length === 1) {
const reader = new FileReader();
reader.onload = (_) => callback(JSON.parse(reader.result));
reader.readAsText(element.files[0]);
}
});
element.click();
openFile.referenceToElementThatWeKeepAroundBecauseIfWeDontThisFunctionDoesntWorkInSafari = element;
}
View
@@ -13,6 +13,8 @@
<h1>Operation:</h1>
<label><input type='radio' value='variations' v-model='operation'> Variations</label>
<label><input type='radio' value='pan' v-model='operation'> Pan</label>
<label><input type='radio' value='save' v-model='operation'> Save</label>
<label><input type='radio' value='open' v-model='operation'> Open</label>
</section>
<section>
<h1>Appearance:</h1>
@@ -36,6 +38,7 @@ <h1>Performance:</h1>
<script src='compile.js'></script>
<script src='gl.js'></script>
<script src='display.js'></script>
<script src='fileio.js'></script>
<script src='main.js'></script>
</body>
</html>

0 comments on commit 9c0b7c8

Please sign in to comment.