Published
Edited
Oct 3, 2021
1 star
class MandelPlotter{
constructor(width, height, canvasIn, glIn){
//Define width and height
this.width = width;
this.height = height;
// Initialize GPU
this.gpu = new GPU.GPU({
mode:'gpu',
canvas: canvasIn,
context: glIn
});
this.plotMandelbrotSet = this.gpu.createKernel(function(xMin, yMin, xMax, yMax, maxIteration){
//Initialize
const thx = this.thread.x;
const thy = this.thread.y;
const xOri = xMin + (xMax - xMin) * thx / this.constants.width;
const yOri = yMax + (yMin - yMax) * thy / this.constants.height;
const xVal = xOri;
const yVal = yOri;
//Calculate
for(let counter = 0; counter < maxIteration; counter++){
const newx = xVal * xVal - yVal * yVal + xOri;
const newy = xVal * yVal * 2 + yOri;
xVal = newx;
yVal = newy;
if(newx * newx + newy * newy > 4){
//If it diverges, plot based on Counter
const pixelValue = 0.75 * (1 - Math.pow(0.99, counter));
this.color(pixelValue, pixelValue, pixelValue);
return 0;
}
}
//If it doesn't diverge, plot white (1, 1, 1)
this.color(1, 1, 1);
})
.setLoopMaxIterations(10000)
.setOutput([this.width, this.height])
.setConstants({width:this.width, height:this.height})
.setGraphical(true);
}
}
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.
