I have this code that takes an image and divides it into blocks with a size of blockSize, then deletes the surrounding pixels and spaces them out by a spacing defined by spacing. This creates a uniform split, but I want to add some randomness to the spacing to distribute the blocks unevenly (controlled by variance variable).
Bonus answer: Also add some randomness to the blockSize to make some blocks larger than others. This is my current code:
const canvas = document.createElement("canvas")
const ctx = ref.current.getContext("2d")!
const imgData = ctx.getImageData(0, 0, ref.current.width, ref.current.height)
const pixels = imgData.data
let blockSize = 5
let spacing = 70
let variance = 50
for (let row = 0; row < imgData.height; row++) {
for (let col = 0; col < imgData.width; col++) {
const i = (row * imgData.width + col) * 4
let r = pixels[i]
let g = pixels[i+1]
let b = pixels[i+2]
let a = pixels[i+3]
const adjustedSpacing = spacing // Add randomness?
const blockRow = Math.floor(row / (blockSize + adjustedSpacing))
const blockCol = Math.floor(col / (blockSize + adjustedSpacing))
const blockRowPixel = blockRow * (blockSize + adjustedSpacing)
const blockColPixel = blockCol * (blockSize + adjustedSpacing)
const withinBlockRow = row >= blockRowPixel && row < blockRowPixel + blockSize
const withinBlockCol = col >= blockColPixel && col < blockColPixel + blockSize
if (withinBlockRow && withinBlockCol) {
pixels[i] = r
pixels[i+1] = g
pixels[i+2] = b
pixels[i+3] = a
} else {
pixels[i] = 0
pixels[i+1] = 0
pixels[i+2] = 0
pixels[i+3] = 0
}
}
}
ctx.putImageData(imgData, 0, 0)
This was my attempted solution, but it doesn’t work. It destroys the blocks:
const adjustedSpacing = Math.floor(Math.random() * variance) + spacing
