Public
Edited
Sep 11, 2023
11 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof frames = initialize()
Insert cell
function initialize() {
var step = 0;
var crystalData = [];

var result = [];
for (step = 0; step < symmetries; step++) {
crystalData = quasicrystal(scale, symmetries, power, range, step);
result.push(draw(crystalData));
}

return result;
}
Insert cell
framesGenerator = {
var counterMax = symmetries - 1;
var frameCounter = 0;
while (true) {
await Promises.delay(delay);
yield viewof frames[frameCounter];
frameCounter++;
if (frameCounter > counterMax) {
frameCounter = 0;
}
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function draw(drawData) {
let maxDimension = range * 2;
const ctx = DOM.context2d(maxDimension, maxDimension);
ctx.canvas.width = maxDimension;
ctx.canvas.height = maxDimension;
const pixels = ctx.getImageData(0, 0, maxDimension, maxDimension);
const pixelData = pixels.data;

for (var pixel of drawData) {
setPixelGreyscale(maxDimension, pixelData, pixel[0], pixel[1], pixel[2]);
}

ctx.putImageData(pixels, 0, 0);
ctx.canvas.id = "canvas";
return ctx;
}
Insert cell
function setPixelGreyscale(width, pixelData, x, y, intensity) {
let index = Math.round(x) * (width * 4) + Math.round(y) * 4;
pixelData[index] = intensity; // 255 // intensity
pixelData[index + 1] = intensity; // 255 // intensity
pixelData[index + 2] = intensity; // 255 // intensity
pixelData[index + 3] = 255; // intensity // 255
}
Insert cell
Insert cell
Insert cell

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.
Learn more