Public
Edited
Jul 15, 2023
rectangles = new Array(12).fill(0).map((_, i) => {
let x = Math.random() * width;
let y = Math.random() * height;
let roundedX = Math.round(x / 30) * 30;
let roundedY = Math.round(y / 30) * 30;
return {
x: roundedX,
y: roundedY,
targetX: roundedX,
targetY: roundedY,
width: Math.round(Math.random() * 4 + 2) * increment,
height: Math.round(Math.random() * 6 + 2) * increment
};
})
increment = 30
width = 960
height = 540
grid = new Array(height / increment).fill(0).map((_, i) => {
return new Array(width / increment).fill(0).map((_, j) => {
return false;
});
})
function addRectangles(rectangles) {
let grid = createGrid();
for (let i = 0; i < rectangles.length; i++) {
let rectangle = rectangles[i];
for (let j = 0; j < rectangle.width / 30; j++) {
for (let k = 0; k < rectangle.height / 30; k++) {
let x = rectangle.x / 30 + j;
let y = rectangle.y / 30 + k;
if (grid[y] !== undefined && grid[y][x] !== undefined) {
grid[y][x] = true;
}
}
}
}
return grid;
}
addRectangles(rectangles)
function createGrid() {
let grid = new Array(height / 30).fill(0).map((_, i) => {
return new Array(width / 30).fill(0).map((_, j) => {
return false;
});
});
return grid;
}
toText(addRectangles(rectangles))
function toText(grid) {
let text = "";
for (let i = 0; i < grid.length; i++) {
let row = grid[i];
for (let j = 0; j < row.length; j++) {
text += row[j] ? "X" : "_";
}
text += "\n";
}
return text;
}
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.
