Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
Published
Edited
Sep 11, 2019
3 stars
{
let letters = [c_points, l_points, o_points, u_points, d_points, e_points, r_points, a_points]
let columns = 3
let rows = 3
let canvas_padding = 80
let swidth = width * columns + canvas_padding * 2
let sheight = height * rows + canvas_padding * 2
return html`<svg width="${swidth}" height="${sheight}">
<rect x="0" y="0" width=${swidth} height=${sheight} fill="#222" />
${letters.map((l, i) => {
let c = i % columns
let r = Math.floor(i / columns)
let x = c * width + canvas_padding
let y = r * height + canvas_padding
return drawRowLetter(l, [x,y])
})}
</svg>`
}
radius = 8
grid_space_x = 20
grid_space_y = 32
points_x = 5
points_y = 5
padding_x = grid_space_x
padding_y = grid_space_x
width = padding_x * 2 + (radius * 2) * points_x + grid_space_x * (points_x - 1)
height = padding_y * 2 + (radius * 2) * points_y + grid_space_y * (points_y - 1)
c_points = [
0, 1, 1, 1, 1,
1, 0, 0, 0, 0,
1, 0, 0, 0, 0,
1, 0, 0, 0, 0,
0, 1, 1, 1, 1
]
l_points = [
1, 0, 0, 0, 0,
1, 0, 0, 0, 0,
1, 0, 0, 0, 0,
1, 0, 0, 0, 0,
1, 1, 1, 1, 1
]
o_points = [
0, 1, 1, 1, 0,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
0, 1, 1, 1, 0
]
u_points = [
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
0, 1, 1, 1, 0
]
d_points = [
1, 1, 1, 1, 0,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 1, 1, 1, 0
]
e_points = [
1, 1, 1, 1, 1,
1, 0, 0, 0, 0,
1, 1, 1, 1, 1,
1, 0, 0, 0, 0,
1, 1, 1, 1, 1
]
r_points = [
1, 1, 1, 1, 0,
1, 0, 0, 0, 1,
1, 1, 1, 1, 0,
1, 0, 0, 1, 0,
1, 0, 0, 0, 1
]
a_points = [
0, 1, 1, 1, 0,
1, 0, 0, 0, 1,
1, 1, 1, 1, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1
]
ff_points = [
1, 0, 1, 0, 0,
1, 1, 1, 1, 0,
1, 0, 1, 0, 1,
1, 1, 1, 1, 0,
1, 0, 1, 0, 0,
]
all_points = [
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
1,1,1,1,1,
]
function splitIntoColumns(letter_points) {
let columns = [...Array(points_x)].map(n => [])
for (let p = 0; p < letter_points.length; p++) {
let c = p % points_x
let v = letter_points[p]
columns[c].push(v)
}
return columns
}
function splitIntoRows(letter_points) {
let rows = [...Array(points_y)].map(n => [])
for (let p = 0; p < letter_points.length; p++) {
let r = Math.floor(p /points_x)
let v = letter_points[p]
rows[r].push(v)
}
return rows
}
function getRowConnections(letter_points) {
let connections = []
let rows = splitIntoRows(letter_points)
for (let r = 0; r < rows.length; r++) {
if (r !== rows.length - 1) {
// if not last
let row = rows[r];
let next_row = rows[r + 1];
for (let c = 0; c < row.length; c++) {
let this_point = row[c]
if (this_point === 1) {
for (let nc = 0; nc < row.length; nc++) {
let next_point = next_row[nc]
if (next_point === 1) {
connections.push([[c,r], [nc, r+1]])
}
}
}
}
}
}
return connections
}
function getColumnConnections(letter_points) {
let connections = []
let columns = splitIntoColumns(letter_points)
for (let c = 0; c < columns.length; c++) {
if (c !== columns.length - 1) {
// if not last
let column = columns[c];
let next_columns = columns[c + 1];
for (let r = 0; r < column.length; r++) {
let this_point = column[r]
if (this_point === 1) {
for (let nr = 0; nr < column.length; nr++) {
let next_point = next_columns[nr]
if (next_point === 1) {
connections.push([[c,r], [c+1,nr]])
}
}
}
}
}
}
return connections
}
getColumnConnections(c_points)
function drawColumnLetter(l_points, offset) {
let connections = getColumnConnections(l_points)
return `${connections.map((c, i) => {
let c1 = c[0][0]
let r1 = c[0][1]
let c2 = c[1][0]
let r2 = c[1][1]
let x1 = padding_x + radius * 2 * c1 + grid_space_x * c1 + radius + offset[0]
let x2 = padding_x + radius * 2 * c2 + grid_space_x * c2 + radius + offset[0]
let y1 = padding_y + radius * 2 * r1 + grid_space_y * r1 + radius + offset[1]
let y2 = padding_y + radius * 2 * r2 + grid_space_y * r2 + radius + offset[1]
return `<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="black" stroke-width="2" />`
})}
${l_points.map((v, i) => {
if (v === 1) {
let c = i % points_x;
let r = Math.floor(i / points_x);
let x = padding_x + radius * 2 * c + grid_space_x * c + radius + offset[0]
let y = padding_y + radius * 2 * r + grid_space_y * r + radius + offset[1]
return `<circle cx="${x}" cy="${y}" r="${radius}" />`
}
})}`
}
{
return html`<svg width="${width * 3}" height="${height * 3}">
${drawColumnLetter(c_points, [0, 0])}
${drawColumnLetter(l_points, [width, 0])}
${drawColumnLetter(o_points, [width * 2, 0])}
${drawColumnLetter(u_points, [width * 0, height])}
${drawColumnLetter(d_points, [width * 1, height])}
${drawColumnLetter(e_points, [width * 2, height * 1])}
${drawColumnLetter(r_points, [width * 0, height * 2])}
${drawColumnLetter(a_points, [width * 1, height * 2])}
</svg>`
}
function drawRowLetter(l_points, offset) {
let connections = getRowConnections(l_points)
let all_connections = getRowConnections(all_points)
return `${all_connections.map((c, i) => {
let c1 = c[0][0]
let r1 = c[0][1]
let c2 = c[1][0]
let r2 = c[1][1]
let x1 = padding_x + radius * 2 * c1 + grid_space_x * c1 + radius + offset[0]
let x2 = padding_x + radius * 2 * c2 + grid_space_x * c2 + radius + offset[0]
let y1 = padding_y + radius * 2 * r1 + grid_space_y * r1 + radius + offset[1]
let y2 = padding_y + radius * 2 * r2 + grid_space_y * r2 + radius + offset[1]
// return `<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="white" stroke-width="2" />`
})}
${connections.map((c, i) => {
let c1 = c[0][0]
let r1 = c[0][1]
let c2 = c[1][0]
let r2 = c[1][1]
let x1 = padding_x + radius * 2 * c1 + grid_space_x * c1 + radius + offset[0]
let x2 = padding_x + radius * 2 * c2 + grid_space_x * c2 + radius + offset[0]
let y1 = padding_y + radius * 2 * r1 + grid_space_y * r1 + radius + offset[1]
let y2 = padding_y + radius * 2 * r2 + grid_space_y * r2 + radius + offset[1]
return `<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="white" stroke-width="2" />`
})}
${all_points.map((v, i) => {
if (v === 1) {
let c = i % points_x;
let r = Math.floor(i / points_x);
let x = padding_x + radius * 2 * c + grid_space_x * c + radius + offset[0]
let y = padding_y + radius * 2 * r + grid_space_y * r + radius + offset[1]
// return `<circle cx="${x}" cy="${y}" r="${radius/1.5}" fill="white" />`
}
})}
${l_points.map((v, i) => {
if (v === 1) {
let c = i % points_x;
let r = Math.floor(i / points_x);
let x = padding_x + radius * 2 * c + grid_space_x * c + radius + offset[0]
let y = padding_y + radius * 2 * r + grid_space_y * r + radius + offset[1]
return `<circle cx="${x}" cy="${y}" r="${radius/1}" fill="white" />`
}
})}`
}
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.