Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
p5(sketch => {
const thisGrid = checkValues(grid);
sketch.setup = function() {
sketch.createCanvas(width, height);
sketch.frameRate(30);
sketch.rect(0, 0, width, height);
sketch.noLoop();
};
sketch.draw = function() {
// const background_colour = sketch.color(0);
sketch.background('#222222')
// go through each column
for (var c = 0; c < thisGrid.length; c++) {
const column = thisGrid[c];
// console.log(column);
// go through each row
for (var r = 0; r < column.length; r++) {
const pt = column[r];
const thisColour = colours_string.filter(d => pt.string == d.string)[0];
sketch.fill(thisColour.color);
sketch.noStroke();
sketch.rect(pt.x * grid_rect, pt.y * grid_rect, grid_rect, grid_rect);
}
}
}
})
colours_string = [{string: '111', color: '#73002A'},
{string: '110', color: '#73002A'},
{string: '101', color: '#73002A'},
{string: '000', color: '#73002A'},
{string: '100', color: '#FF4D8E'},
{string: '011', color: '#FF005E'},
{string: '010', color: '#B33663'},
{string: '001', color: '#CC004B'}
]
function checkValues(array) {
// go through rows
for (var r = 0; r < array.length; r++) {
const row = array[r];
if (r > 0) {
const prev_row = array[r - 1];
// go through columns
for (var c = 0; c < row.length; c++) {
const pt = row[c];
let pt_1 = c - 1;
let pt_2 = c;
let pt_3 = c + 1;
if (c === 0) {
pt_1 = row.length - 1;
} else if (c === row.length - 1) {
pt_3 = 0;
}
const string = `${prev_row[pt_1].value}${prev_row[pt_2].value}${prev_row[pt_3].value}`;
pt.string = string;
if (string === '111' || string === '110' || string === '101' || string === '000') {
pt.value = 0;
} else if (string === '100' || string === '011' || string === '010' || string === '001') {
// console.log(true);
pt.value = 1;
}
}
}
}
return array;
}
function createGrid() {
const thisGrid = [];
// y = column
for (var y_n = 0; y_n < grid_n_height; y_n++) {
const arrayX = [];
// x = row
for (var x_n = 0; x_n < grid_n; x_n++) {
let value = 0;
let string = '';
// if in first row and middle point
if (y_n === 0 && x_n === n) {
value = 1;
string = '010'
} else if (y_n === 0) {
string = '000'
}
arrayX.push({
x: x_n,
y: y_n,
value: value,
string: string,
})
}
arrayX.sort((a, b) => a.x - b.x);
thisGrid.push(arrayX);
}
return thisGrid.sort((a, b) => a.order - b.order);
}
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.
