Published
Edited
Jun 4, 2018
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
picture_set = shuffle(og_picture_set)
Insert cell
Insert cell
Insert cell
center = { return { x: wall.w/2, y: wall.h/2 } }
Insert cell
Insert cell
Insert cell
function getDistance(p1, p2) {
let a = p1.x - p2.x
let b = p1.y - p2.y
let c = Math.sqrt(a * a + b * b)
return c
}
Insert cell
function getMinIndex(array) {
var index = 0;
var value = array[0];
for (var i = 1; i < array.length; i++) {
if (array[i] < value) {
value = array[i];
index = i;
}
}
return index
}
Insert cell
Insert cell
function boundaryCheck(rect) {
if (rect.x + center.x - padding > 0 && rect.y + center.y - padding > 0 && rect.x + center.x + rect.w + padding < wall.w && rect.y + center.y + rect.h + padding < wall.h) {
return true
} else {
return false
}
}
Insert cell
function collisionCheck(base_rect, new_rect) {
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
}
}
Insert cell
function openCheck(x, y, w, h) {
let temp_rect = {x: x, y: y, w: w, h: h}
let checks = []
for (let pict of state.pictures) {
let check = collisionCheck(pict, temp_rect)
checks.push(!check)
}
if (checks.every(val => val === true)) {
return temp_rect
} else {
return false
}
}
Insert cell
function findNextSquare(w, h) {
let dist = 0.2
let offset = 0
let break_check = false
while (true) {
// establish four corners, then travel between
let ne = [offset, -offset]
let se = [offset, offset]
let sw = [-offset, offset]
let nw = [-offset, -offset]
let round = []
if (offset === 0) {
round = [[setFirstX(w), 0]]
}
for (let y = ne[1]; y < se[1]; y = y + dist) {
round.push([offset, y])
}
for (let x = se[0]; x > sw[0]; x = x - dist) {
round.push([x, offset])
}
for (let y = sw[1]; y > nw[1]; y = y - dist) {
round.push([-offset, y])
}
for (let x = nw[0]; x < ne[0]; x = x + dist) {
round.push([x, -offset])
}
let candidates = []
for (let coord of round) {
let check = openCheck(coord[0] - w/2, coord[1] - h/2, w, h)
if (check) {
let boundary_check = boundaryCheck(check)
if (boundary_check) candidates.push(check)
}
}
if (candidates.length > 0) {
let distances = candidates.map(candidate => {
let distance = getDistance(candidate, { x: 0 - candidate.w/2, y: 0 - candidate.h/2 })
return distance
})
let min_index = getMinIndex(distances)
state.pictures.push(candidates[min_index])
break
}
offset = offset + dist
}
}
Insert cell
function findNextCircle(w, h) {
let dist = 0.2
let offset = 0
let break_check = false

while (true) {
let radius = offset
let diameter = radius * 2
let break_check = false
for (let i = 0; i < diameter; i = i + dist) {
let x = 0 + radius * Math.cos(2 * Math.PI * i / diameter)
let y = 0 + radius * Math.sin(2 * Math.PI * i / diameter)
let check = openCheck(x - w/2, y - h/2, w, h)
if (check) {
state.pictures.push(check)
break_check = true
break
}
}
if (break_check) break
offset = offset + dist
}
}
Insert cell
drawCanvas = function() {
ctx.clearRect(0, 0, m(wall.w), m(wall.h))
state.pictures = []
for (let picture of picture_set) {
// findNextSquare(picture[0], picture[1])
findNextCircle(picture[0], picture[1])
}
for (let rect of state.pictures) {
ctx.fillStyle = 'black'
ctx.fillRect(m(rect.x + center.x), m(rect.y + center.y), m(rect.w), m(rect.h))
}
}
Insert cell
Insert cell
Insert cell
Insert cell
function toRadians (angle) {
return angle * (Math.PI / 180);
}
Insert cell
function toDegrees (angle) {
return angle * (180 / Math.PI);
}
Insert cell
Insert cell

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.
Learn more