scaledData2 = {
let data = [];
d3.range(100).map(function(d, i){
data.push({'x': i,
'y': spotScale(i)
})
})
return data
}
spotScale = function(d,i){
return d < 50 ? 1 : upperThreshold + blur
}
viewof spotLayerDepth = Inputs.range([1, 15],{value: 3, step:1,label:"spotLayerDepth"})
viewof resolution = Inputs.range([0, 1],{value: 0.4, step:0.01,label:"res"})
viewof noiseScale = Inputs.range([0, 0.2],{value: 0.05, step:0.01,label:"scale"})
viewof c = Inputs.range([0, 50],{value: 0, step:1,label:"c"})
canvas = html`<canvas id='myCanvas' width=${width} height=${h} style="max-width:100%">`
viewof button = html`<input type="button" value="Play/Pause">`
playing = {
button;
return !this;
}
viewof checkboxes = Inputs.checkbox(["A", "B"], {label: "Select some", value: ["A"]})
canvas2 = html`<canvas id='test' width=${width} height=${h} style="max-width:100%">`;
viewof ex1_threshold = Inputs.range([0, 255], {value: 120, step: 1, label: 'Threshold'})
run(presets[preset])
scaleY2 = d3.scaleLinear()
.domain([0, 1])
// .range([0, 1])
.range([lowerThreshold, upperThreshold])
scaleY = d3.scaleLinear()
.domain([0, 1])
// .range([0, 1])
.range([lowerThreshold + blur, upperThreshold + blur])
import {cv} from "@mootari/opencv-js"
src = new cv.Mat(w, h, cv.CV_8UC4)
dst = new cv.Mat(w, h, cv.CV_8UC1)
// cap = new cv.imread(canvasImage)
canvas.toDataURL("image/png")
function sideBySide(a, b) {
const css = 'max-width:100%';
a.style.cssText += css;
b.style.cssText += css;
return html`<div style="display:flex;">
<div style="padding-right:10px">${a}</div>
<div>${b}</div>
`;
}
// render = {
// time; // whenever the time changes…
// cap.read(src);
// cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, cv.CV_8UC1)
// cv.Canny(dst, dst, tmin, tmax, 3);
// cv.imshow(canvas, dst);
// }
h = 300
width =800
document.getElementById('myCanvas');
canvas
function* run(options = {}) {
const {
width: w = 800, // Output width
height: h = h, // Output height
resolution: res = 1/4, // Layer resolution
noiseScale: s = .6, // Noise scale, resolution dependant
layers: count = 4, // Number of canvas layers
lower = 1, // Lower cutoff (inverted)
upper = 0, // Upper cutoff (inverted)
tx = 0, // Horizontal movement
ty = 0, // Vertical movement
tz = 0, // Depth movement
sxy = 0, // Perspective scaling
sz = 0, // Depth range
colorLow = '#000', // Back layer color
colorHigh = '#fff', // Front layer color
colorBg = '#000', // Background color
gco = 'source-over', // globalCompositeOperation
seed = '0' // random seed, '' for none
} = options;
const simplex = new noise('0');
const ws = w*res|0, hs = h*res|0;
const color = d3.interpolateHsl(colorLow, colorHigh);
const layers = Array(count).fill()
.map((v,i,a)=>i/(a.length-1))
.map(t => layer(ws, hs, color2rgba(color(t))));
// .map(t => layer(ws, hs, color2rgba(t == 1 ? '#0000FF' : color(t))));
const spotLayer = layer(ws, hs, color2rgba('#0000FF'))
// console.log(layers.push(spotLayer))
// const canvas = html`<canvas id='myCanvas' width=${width} height=${h} style="max-width:100%">`
const cOut = canvas.getContext('2d');
cOut.globalCompositeOperation = gco;
const bgFill = new ImageData(w, h);
{
const bg = color2rgba(colorBg);
for(let i=0; i<bgFill.data.length; i+=4) bgFill.data.set(bg, i);
}
while (playing) { // Reactively checks if checkbox is true
let t = 0;
cOut.putImageData(bgFill, 0, 0);
layers.map((l,i) => {
const lt = i/layers.length;
const u = (x, y) => smoothstep(
scaleY2(sigmoid(normScaleX(y))), scaleY(sigmoid(normScaleX(y))),
// simplex.noise3D(x*s, y*s, lt*s) ** 2
simplex.noise3D(x*s + t*tx, y*s + t*ty, lt*s*sz + t*tz) ** 2
);
const p = (lt ** 2) * c;
// const p = 0
cOut.drawImage(l.update(u), 0, 0, ws, hs, -p, -p, w+p*2, h+p*2);
});
// const u = (x, y) => smoothstep(
// spotScale(y), spotScale(y),
// simplex.noise3D(x*s, y*s, spotLayerDepth*s) ** 2
// // simplex.noise3D(x*s + t*tx, y*s + t*ty, lt*s*sz + t*tz) ** 2
// );
// const p = 100
// cOut.drawImage(spotLayer.update(u), 0, 0, ws, hs, -p, -p, w+p*2, h+p*2);
// Draw dashed horizontal line at y = 150
cOut.beginPath();
cOut.setLineDash([3, 1]); // Define dashes: 10px dash, 5px gap
cOut.moveTo(0, 150); // Start of the line at the left edge of the canvas
cOut.lineTo(cOut.canvas.width, 150); // End of the line at the right edge of the canvas
cOut.strokeStyle = "grey"; // Optional: Set the line color
cOut.lineWidth = 2; // Optional: Set the line width
cOut.stroke();
cOut.setLineDash([]); // Reset to solid lines after the dashed line is drawn
yield cOut.canvas;
updateCanvas2()
t += 1/30;
}
}
function layer(w, h, rgba = [255,255,255,255]) {
const c = DOM.context2d(w, h, 1);
const d = new ImageData(w, h), dd = d.data;
const l = w * h * 4, a = rgba[3];
for(let i = 0; i < l; i += 4) dd.set(rgba, i);
const o = Array(w * h).fill().map((v,i) => ({
i: i * 4 + 3,
x: i % w,
y: i / w | 0,
}));
c.canvas.update = function(fn) {
for(let {x,y,i} of o) dd[i] = fn(x,y) * a;
c.putImageData(d, 0, 0);
return c.canvas;
}
return c.canvas;
}
// d3 = require('d3-color@1.2.8', 'd3-interpolate@1.3.2')
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.
