Also listed in…
webgl
// 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"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
