// input
targetNetwork = new DenseNeuronNetwork({
//layers: [2, 1],
//func: ['tanh'],
//params: [[1.0, -0.3, -0.3]]
layers: [2, 4, 1],
func: ["relu", "tanh"],
params: [
[
-0.09561039274081555,
-0.6922737397898457,
-0.17429553008705181,
-0.020192905951494516,
0.07114574484903793,
1.3489648321576977,
-0.35472424196517405,
0.2673464182111297,
0.05381829206722349,
-0.11395255658420557,
0.07739672325376003,
-0.35472424196517405
],
[
1.1892955567778234,
-0.6064234197589545,
-0.34125283935491907,
-1.1892955567778234,
-1.557604624874561
]
]
})
// input
u_scale = 5.0
// input
canvasSelector = null
createRegl = require("regl@2.0") // have bugs when using regl@2.1
genForwardPassCode() // testing
canvas = {
const c = html`<canvas width="200px" height="200px"/>`;
c.value = 0;
c.onclick = ev => {
// x [0, 200] -> [-6, 6]
let x = (ev.offsetX / 200 - 0.5) * 2 * u_scale,
y = ((200 - ev.offsetY) / 200 - 0.5) * 2 * u_scale;
c.value = `${_.round(x, 3)},${_.round(y, 3)},${_.round(
targetNetwork.calc([x, y]),
3
)}`;
console.log(c.value);
c.dispatchEvent(new CustomEvent("input"));
};
return c;
}
drawTriangle = {
return regl({
// Shaders in regl are just strings. You can use glslify or whatever you want
// to define them. No need to manually create shader objects.
frag: fragShaderStr,
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
// Here we define the vertex attributes for the above shader
attributes: {
// regl.buffer creates a new array buffer object
position: regl.buffer([
[-1, -1], // no need to flatten nested arrays, regl automatically
[1, -1], // unrolls them into a typedarray (default Float32)
[1, 1],
[1, 1],
[-1, 1],
[-1, -1]
])
// regl automatically infers sane defaults for the vertex attribute pointers
},
uniforms: {
// This defines the color of the triangle to be a dynamic variable
u_resolution: regl.prop('u_resolution'),
u_params: regl.prop('u_params'),
u_scale: regl.prop('u_scale'),
..._.range(targetNetwork.getParams(1).length).reduce(
(accum, value, index) => {
accum['u_params[' + index + ']'] = regl.prop(
'u_params[' + index + ']'
);
return accum;
},
{}
)
},
// This tells regl the number of vertices to draw in this command
count: 6
});
}
canvas0 = {
bRefresh;
let beginAt = Date.now();
let params = targetNetwork.getParams(1);
let canvas0 = canvasSelector
? document.querySelector(canvasSelector)
: canvas;
debugger;
//while (true) {
let time = Date.now() - beginAt;
// clear contents of the drawing buffer
regl.clear({
color: [0, 0, 0, 0],
depth: 1
});
// draw a triangle using the command defined above
drawTriangle({
u_resolution: [canvas0.width, canvas0.height],
u_scale: u_scale,
u_params: params
});
yield canvas0;
//}
}
// regl.frame() wraps requestAnimationFrame and also handles viewport changes
//regl.frame(({time}) => {
//})
import {button} from "@jashkenas/inputs"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.