Generative artist, sharing my journey in visual experiments.
Published
Edited
Dec 2, 2020
5 forks
23 stars
img = world.image()
imgWidth = img.naturalWidth
imgHeight = img.naturalHeight
canvas = {
const ny = imgHeight / tileSize
const w = nx * tileSize
const h = ny * tileSize
const context = DOM.context2d(w, h)
// we draw the image to the canvas
context.drawImage(await img, -dx * tileSize, 0)
// and get the pixels colors
const imageData = context.getImageData(0, 0, w * devicePixelRatio, h * devicePixelRatio)
// from imageData, we search unique tiles and create a map of the tiles
const tiles = []
const mapData = context.createImageData(nx, ny)
let mapIndex = 0
for(let y = 0; y < ny; y ++) {
for(let x = 0; x < nx; x ++) {
const tileData = context.createImageData(tileSize * devicePixelRatio, tileSize * devicePixelRatio)
let tileIndex = 0
let tileID = ''
let average = [0, 0, 0]
for(let yy = 0; yy < tileSize * devicePixelRatio; yy ++) {
for(let xx = 0; xx < tileSize * devicePixelRatio; xx ++) {
const pixelX = x * tileSize * devicePixelRatio + xx
const pixelY = y * tileSize * devicePixelRatio + yy
const pixelIndex = (pixelY * (w * devicePixelRatio) + pixelX) * 4
for(let i = 0; i < 4; i++) {
tileData.data[tileIndex ++] = imageData.data[pixelIndex + i]
if(xx > 0 && xx < tileSize * devicePixelRatio - 1 &&
yy > 0 && yy < tileSize * devicePixelRatio - 1 && i < 3) {
average[i] += imageData.data[pixelIndex + i]
if(xx % 2 == 0 && yy % 2 == 0) tileID += imageData.data[pixelIndex + i].toString(36)
}
}
}
}
average = average.map(d => d / ((tileSize * devicePixelRatio - 2) ** 2) | 0)
// if the tile is already referenced we use its index as grey level for our map of tiles
let c = tiles.findIndex(tile => tile.tileID === tileID)
// else we add it to our unique tiles and use its index as grey level for our map of tiles
if(c === - 1) {
tiles.push({ tileData, tileID })
c = tiles.length - 1
}
mapData.data[mapIndex] = c
mapData.data[mapIndex + 1] = c
mapData.data[mapIndex + 2] = c
mapData.data[mapIndex + 3] = 255
mapIndex += 4
}
}
const image = new Image()
image.style.border = 'solid 1px red'
image.src = context.canvas.toDataURL('image/png')
image.mapData = mapData
image.tiles = tiles
return image
}
nxOutput = 60
nyOutput = 20
model = new wfc.OverlappingModel(canvas.mapData.data, nx, imgHeight / tileSize, 2, nxOutput, nyOutput, true, false, 1, 0)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.