Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
Greedy picture hanging tool
Greedy picture hanging
center = { return { x: wall.w/2, y: wall.h/2 } }
function collisionCheck(base_rect, new_rect) {
let padding = 0.5
if (base_rect.x < new_rect.x - padding + new_rect.w + padding * 2 &&
base_rect.x + base_rect.w > new_rect.x - padding &&
base_rect.y < new_rect.y - padding + new_rect.h + padding * 2 &&
base_rect.h + base_rect.y > new_rect.y - padding) {
return true
} else {
return false
}
}
function findNext() {
let dist = 0.01
let angle = 0;
while (true) {
// Spiral code from https://stackoverflow.com/questions/6824391/drawing-a-spiral-on-an-html-canvas-using-javascript
let incr = angle ? (1/(dist + dist * angle))/2 : dist;
let x = (dist + dist * angle) * Math.cos(angle) + center.x;
let y = (dist + dist * angle) * Math.sin(angle) + center.y;
let temp_w = Math.random() * 10 + 5
let temp_h = Math.random() * 10 + 5
let temp_rect = {x: x - temp_w/2, y: y - temp_h/2, w: temp_w, h: temp_h}
let checks = []
for (let pict of state.pictures) {
let check = collisionCheck(pict, temp_rect)
checks.push(!check)
}
if (checks.every(val => val === true)) {
state.pictures.push(temp_rect)
break;
}
angle += incr
}
}
drawCanvas = function() {
ctx.clearRect(0, 0, m(wall.w), m(wall.h))
state.pictures = []
for (let i=0; i<number_of_pictures; i++) {
findNext()
}
for (let rect of state.pictures) {
ctx.fillStyle = 'black'
ctx.fillRect(m(rect.x), m(rect.y), m(rect.w), m(rect.h))
}
}
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.
