pixel flipper, data sifter. trying to see what I can while I'm here
camera = {
var camera = createReglCamera(regl, {
phi: 90,
// theta: 1,
distance:10,
center: [0.5, 0.5, 0],
rotationCenter: [0.5, 0.5, 0],
});
createInteractions(camera);
return camera;
}
model = mat4create();
drawings = chosen.map((d) => {
return process(d, {x: Math.random(), y: Math.random(), z: Math.random()})
})
{
tick;
camera((state) => {
// regl.poll();
if(!state.dirty) return;
regl.clear({color: [0.05, .05, 0.05, 1]});
drawings.slice(0,50).forEach((d) => {
draw3d(d, state)
})
})
yield;
}
// viewof bigindex = html`<input type=range min=0 max=${chosen.length-1} step=1 value=17>`
// md`Rendering drawing #${bigindex}. Some of my favorites are 17, 53, 64, 74, 76, 77`
//md`Thickness of the line used to draw the large pig: ${thickness}px`
// viewof thickness = html`<input type=range min=1 max=50 step=1>`
/*
viewof colored = {
var w = width
var h = height
var el = DOM.canvas(w,h)
var ctx = el.getContext("2d")
var line = d3.line()
.x(function(d) { return d.x * 2 })
.y(function(d) { return d.y * 2 })
.curve(d3.curveBasis)
.context(ctx) // <-- so convenient!
// render the large pig
ctx.lineCap = "round"
big.strokes.forEach(function(s) {
// ctx.strokeStyle = "#ccc"
ctx.strokeStyle = "rgba(200,200,200,0.75)"
ctx.lineWidth = thickness
ctx.beginPath()
line(s)
ctx.stroke()
})
return el
}
*/
// big = {
// let w = width/2
// let h = height/2
// let stroked = strokifyDrawing(chosen[bigindex])
// stroked.strokes = center(stroked.strokes, w,h,h/300)
// stroked.points = stroked.strokes.map(function(stroke) {
// return stroke.map(function(d) { return [d.x/300, 0, d.y/300] })
// })
// return stroked
// }
// rounded = interleavedStripRoundCapJoin(regl, 10)
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.
