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
Published
Edited
Mar 29, 2020
1 star
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, height);
sketch.colorMode(sketch.HSB, 360, 100, 100, 100);
sketch.noStroke();
sketch.rect(0, 0, width, height);
};
function gradient(x, y, w, h, c1, c2) {
var ctx = sketch.drawingContext; // global canvas context p5.js var
var grd = ctx.createLinearGradient(x, y, x, y + h);
grd.addColorStop(0, c1.toString());
grd.addColorStop(1, c2.toString());
ctx.fillStyle = grd;
ctx.fillRect(x, y, w, h);
}
sketch.draw = function() {
sketch.noLoop();
sketch.background(0);
var counter = 0;
const maxHeight = 150;
const minHeight = 5;
const maxWidth = width / 4;
const minWidth = 1;
const rowsY = randomIntFromInterval(minHeight, maxHeight);
const rowsX = randomIntFromInterval(1, 15);
let randomRectangles = [];
// go thorugh the rows
for (let gridY = 0; gridY < rowsY; gridY++) {
let gridYHeight = randomIntFromInterval(minHeight, maxHeight);
randomRectangles.push({
row: gridY,
height: gridYHeight,
grid_rect : gridYHeight,
prev_grid_rect : 0,
width: 0
})
let previousHeight = 0;
if (gridY > 0) {
previousHeight = d3.sum(randomRectangles.filter((d, i) => i < gridY), d => d.height);
randomRectangles[gridY].prev_grid_rect = randomRectangles[gridY - 1].prev_grid_rect;
} else if (gridY === rowsY - 1) {
gridYHeight = height - previousHeight + randomRectangles[gridY - 1].prev_grid_rect / 2;
randomRectangles[gridY].height = gridYHeight;
}
// go through every column in the row
for (let gridX = 0; gridX < rowsX; gridX++) {
let gridXWidth = randomIntFromInterval(minWidth, maxWidth);
const posY = previousHeight - randomRectangles[gridY].prev_grid_rect / 2;
let posX = randomRectangles[gridY].width;
if (gridX === rowsX - 1) {
gridXWidth = width - randomRectangles[gridY].width;
}
randomRectangles[gridY].width = randomRectangles[gridY].width + gridXWidth;
if (posX > width) {
posX = 0;
gridXWidth = 0;
}
const index = counter % colour_count;
const colour = sketch.color(hueValues[index], saturationValues[index], brightnessValues[index]);
var colour_start = sketch.color(0, 0, 0, 25);
// gradient(x, y, w, h, col1, col2);
// sketch.fill(colour);
gradient(posX, posY, gridXWidth, gridYHeight, colour_start, colour);
counter++;
}
}
}
})
function createPalette() {
const hues = [];
const brightness = [];
const saturations = [];
const distance = 30;
const distance_2 = 5;
const mainHue_analogous = randomIntFromInterval(distance, 360 - distance);
const mainHue_chromatic = randomIntFromInterval(0, 360);
// all colours and values and brightness are considered
for (var i = 0; i < colour_count; i++) {
if (selected_type === 'random') {
hues[i] = randomIntFromInterval(0, 360);
saturations[i] = randomIntFromInterval(0, 100);
brightness[i] = randomIntFromInterval(0, 100);
} else if (selected_type === 'Analogous') {
const mainSaturation = randomIntFromInterval(25, 95);
const mainBrightness = randomIntFromInterval(85, 95);
hues[i] = randomIntFromInterval(mainHue_analogous - distance, mainHue_analogous + distance);
saturations[i] = randomIntFromInterval(mainSaturation - distance_2, mainSaturation + distance_2);
brightness[i] = randomIntFromInterval(mainBrightness - distance_2, mainBrightness + distance_2);
} else if (selected_type === 'Monochromatic') {
hues[i] = mainHue_chromatic;
saturations[i] = randomIntFromInterval(20, 100);
brightness[i] = randomIntFromInterval(50, 95);
} else if (selected_type === 'Complementary') {
let second_hue;
if (mainHue_analogous >= 180) {
second_hue = mainHue_analogous - 180;
} else {
second_hue = mainHue_analogous + 180;
}
const value = randomIntFromInterval(0, 10);
if (value%2 == 0) {
hues[i] = mainHue_analogous;
} else {
hues[i] = second_hue;
}
saturations[i] = randomIntFromInterval(20, 100);
brightness[i] = randomIntFromInterval(50, 95);
}
}
return [hues, saturations, brightness]
}
createPalette();
function createWidth() {
const columns = [];
for (var i = 0; i < colour_count; i++) {
columns.push({
width: randomIntFromInterval(1, colour_count)
})
}
return columns;
}
d3 = require("d3-array@2", "d3-dsv@1")
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.
