SundarbansTextBG = {
const context = DOM.context2d(width, height);
// Fill the canvas background
context.fillStyle = "#d8e5e7";
context.fillRect(0, 0, width, height);
// Draw the text
chars.forEach(({ char, size, x, y }) => {
context.font = size + "px sans-serif";
context.fillStyle = "#2a4853";
context.fillText(char, x, y);
});
return context.canvas;
}
SundarbansText = {
const context = DOM.context2d(width, height);
context.canvas.style.background = "#d8e5e7";
context.beginPath();
chars.forEach(({ char, size, x, y }) => {
context.font = size + "px sans-serif";
context.fillText(char, x, y);
context.fillStyle = "#2a4853"; // average colour of original image.
});
context.fill();
return context.canvas;
}
chars = grid.map(({ position }, idx) => {
const [u, v] = position;
const x = lerp(margin, width - margin, u);
const y = lerp(margin, height - margin, v);
const char = lyrics[idx % lyrics.length];
// calculate the size of a char based on the darkness from the image
const { r, g, b } = getPixel(x, y);
const darkness = 765 - (r + g + b);
const size = Math.round(darkness / 50);
return { char, size, x, y };
})
getPixel = (x,y) => {
const column = Math.round(x) * 4;
const row = Math.round(y) * 4 * width;
const r = imgData.data[column + row ];
const g = imgData.data[column + row + 1];
const b = imgData.data[column + row + 2];
return { r, g, b };
}
grid = {
const points = [];
// create a grid using the gridsize variables
// this will be used later to map the characters to
for (let col = 0; col < gridSize; col++) {
for (let row = 0; row < gridSize * aspectRatio; row++) {
const u = row / ((gridSize - 1) * aspectRatio);
const v = col / (gridSize - 1);
points.push({
position: [u, v]
});
}
}
return points;
}
original = FileAttachment("sun-opt.jpg").image()
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.
