tileSelection = 'chosen'
chosenTiles = [5+31, 18, 21, 65, 70, 148, 149, 185, 249, /*249+67,*/ 359, 414, 438, 459, 540, 569, 713-29-31+5, 748-29-32-30, 808-29-34, 778, 778+28, 871+7, 871+3, 976]
canvas = {
const scale = 0.2
const height = (520+472) * scale
const width = (2622 + 1850) * scale
const context = DOM.context2d(width, height);
const sepiaTile = new Image();
//5,2x16 cm
const tileDims = { x: 160 * scale, y: 52 * scale }
const tiles = {}
await Promise.all(Object.keys(tileImages).map((key) => {
const image = new Image()
tiles[key] = image
return new Promise((resolve) => {
image.onload = function () {
resolve()
}
image.src = tileImages[key]
})
}))
let i = 0
function nextTile() {
i += 1
let colourChances = [.0, .0, .0]
if (tileSelection === 'random') {
colourChances = [.03, .06, .09]
} else if (chosenTiles.includes(i)) {
colourChances = [.33, .66, 1.]
}
const rnd = Math.random()
if (rnd < colourChances[0]) {
return tiles.navy
} else if (rnd < colourChances[1]) {
return tiles.apricot
} else if (rnd < colourChances[2]) {
return tiles.shark
}
return tiles.sepia
}
let x = -tileDims.y / Math.SQRT2
let y = 0
let rot = 135
let row = 0
while (x < width && y < height + tileDims.y) {
const xcentre = x + (tileDims.x / 2)
const ycentre = y + (tileDims.y / 2)
const radiens = rot * Math.PI / 180
context.translate(xcentre, ycentre)
context.rotate(radiens)
context.drawImage(nextTile(), 0, 295, 455, 155, -tileDims.x / 2, -tileDims.y / 2, tileDims.x, tileDims.y);
context.rotate(radiens * ( -1 ) );
context.translate(-xcentre, -ycentre)
y += Math.sqrt(2 * tileDims.y * tileDims.y)
if (y > height + tileDims.y) {
row += 1
x += tileDims.x / Math.SQRT2
y = - (tileDims.y / Math.SQRT2) * row
rot += 90
}
}
context.fillStyle = "#c6846d";
context.fillRect(575 * scale, 0, width - 575 * scale, 520 * scale);
context.fillRect(0, 490 * scale, 575 * scale, 30 * scale)
context.fillRect((575 - 370) * scale, 260 * scale, 370 * scale, 30 * scale)
context.fillStyle = "#000"
context.fillRect(2622 * scale, 0, 10 * scale, height)
return context.canvas;
}
tileImages = {
return {
sepia: "https://www.terratintagroup.com/edamtyhe/2023/05/Tbrick_Sepia_900x1200.jpg",
shark: "https://www.terratintagroup.com/edamtyhe/2023/05/Tbrick_Shark_900x1200.jpg",
apricot: "https://www.terratintagroup.com/edamtyhe/2023/05/Tbrick_Apricot_900x1200.jpg",
navy: "https://www.terratintagroup.com/edamtyhe/2023/05/Tbrick_Navy_900x1200.jpg"
}
}
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.
