redbar = html`<input type=range min=1 max=100 value=12>`
redVal = Generators.input(redbar)
// settings for p5.js sketch
settings = ({width: 600, height: 600, id: "p5-container"});
// constant values
constVals =({N: 255, L: 255, SCALE: 4.0, DOTSIZE: 2});
// p5.js sketch
s = s => {
s.setup = () => {
s.createCanvas(settings.width, settings.height);
s.noStroke();
s.noLoop();
}
s.draw = () => {
s.translate(s.width / 2, s.height / 2);
s.background(120);
for (let a = -s.width / 2; a <= s.width / 2; a+=constVals.DOTSIZE) {
for (let b = -s.height / 2; b <= s.height / 2; b+=constVals.DOTSIZE) {
let x = constVals.SCALE * a / s.width;
let y = constVals.SCALE * b / s.height;
let r = calc(x, y);
s.fill(r * redVal % 256, r * greenVal % 256, r * blueVal % 256);
s.rect(a, b, constVals.DOTSIZE, constVals.DOTSIZE);
}
}
}
}
calc = (x, y) => {
let tx, ty;
let zx = 0.0;
let zy = 0.0;
for (let i = 1; i <= constVals.N; i++) {
tx = zx;
ty = zy;
zx = tx * tx - ty * ty + x;
zy = 2 * tx * ty + y;
if (zx * zx + zy * zy > constVals.L) {
return i;
}
}
return 0;
}
// import p5.js library
p5 = require('p5@1')
/**
* It's important to note that since we're not using canvas, svg,
* or other drawing elements, the DOM will be manipulated over and
* over again. In this case, appending the innerHTML again and again.
* To stop this behavior, we need to reset the innerHTML of the p5
* div container. -- Jeremy Wong, https://beta.observablehq.com/@jermspeaks/p5-test
*/
bindP5 = {
// Resets div container
node.innerHTML = "";
// Reinstantiate the p5 with the sketch
return new p5(s, node);
}
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.
