Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
Published
Edited
Nov 17, 2019
1 star
draw('Grant Custter')
function draw(string) {
let binary = convert(string)
let canvas = document.createElement('canvas');
let ps = 10;
let cols = 2;
let rows = 4;
// let cols = 4;
// let rows = 2;
canvas.width = binary.length * cols * ps;
canvas.height = rows * ps;
let ctx = canvas.getContext('2d');
for (let b = 0; b < binary.length; b++) {
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
let byte = binary[b];
let bit = byte[r * cols + c];
if (parseInt(bit) === 1) {
let x = b * cols * ps + c * ps;
let y = r * ps;
ctx.fillRect(x, y, ps, ps)
}
}
}
}
return canvas;
}
// adapted from https://stackoverflow.com/a/14430733/8691291
function convertChar(char) {
return char.charCodeAt(0).toString(2).padStart(8, '0');
}
function convert(string) {
let chars = string.split('')
let binary = chars.map(char => convertChar(char))
return binary
}
convert('Grant Custer')
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.
