Public
Edited
Sep 16, 2023
1 fork
1 star
<div id='statsMonitorDiv'>${statsMonitor.dom}</div>
<div id='canvasDiv'>
${canvasStuff.canvas}
</div>
canvasStuff = {
const canvas = DOM.canvas(width, height),
ctx = canvas.getContext("2d"),
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
t = 0,
tStep = 0.01;
return { canvas, ctx, imageData, t, tStep };
}
{
const { canvas, ctx, imageData, tStep } = canvasStuff,
{ width, height } = canvas,
{ data } = imageData;
function drawPlasma() {
const { t } = canvasStuff;
var x, y;
for (let i = 0; i < width; i++) {
for (let j = 0; j < height; j++) {
x = (i / width) * 10;
y = (j / height) * 10;
const r = getPixel(x, y, t) * 0.5 + 0.5;
const g = getPixel(x + 0.2, y, t) * 0.5 + 0.5;
data[(i + j * width) * 4 + 0] = r * 200;
data[(i + j * width) * 4 + 1] = g * 200;
data[(i + j * width) * 4 + 2] = 0;
data[(i + j * width) * 4 + 3] = 255;
}
}
canvasStuff.t += tStep;
ctx.putImageData(imageData, 0, 0);
statsMonitor.update();
}
while (toggle) {
drawPlasma();
yield performance.now();
}
}
getPixel = (x, y, t) => {
return noiseGen.noise3D(x, y, t);
}
noiseGen = {
const noiseGen = new simplexNoise(d3.randomUniform()());
return noiseGen;
}
width = 600
height = 400
statsMonitor = {
const stats = new Stats(),
{ dom } = stats;
dom.style.position = "relative";
return stats;
}
Stats = await require("https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js")
simplexNoise = require("simplex-noise@2.4.0")
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.
