I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
let colors = ["yellow", "blue", "white", "red"];
s.setup = function () {
s.createCanvas(w, h);
if (isStatic) {
s.noLoop();
}
s.noFill();
s.frameRate(5);
};
s.draw = function () {
s.background(0);
s.strokeWeight(s.random(5, 20));
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.stroke(s.random(colors));
s.translate(x, y);
s.translate(cw / 2, ch / 2);
s.rect(0, 0, cw, ch);
s.resetMatrix(); // reset translate/transform/scale for next interation
}
}
};
})
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
let colors = ["yellow", "white", "blue", "black", "red"];
s.setup = function () {
s.createCanvas(w, h);
if (isStatic) {
s.noLoop();
}
s.frameRate(5);
};
s.draw = function () {
s.background(255);
s.strokeJoin(s.ROUND);
s.strokeCap(s.SQUARE);
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.stroke(s.random(colors));
s.translate(x, y);
s.translate(cw / 2, ch / 2);
let size = s.random(0, 5);
s.strokeWeight(size);
s.rect(0, 0, size, size);
s.resetMatrix(); // reset translate/transform/scale for next interation
}
}
};
})
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
let colors = ["yellow", "white", "blue", "black", "red"];
let noiseScale = 0.01;
s.setup = function () {
s.createCanvas(w, h);
if (isStatic) {
s.noLoop();
}
s.frameRate(5);
};
s.draw = function () {
s.background(255);
s.noFill();
s.strokeJoin(s.ROUND);
s.strokeCap(s.SQUARE);
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.stroke(s.random(colors));
s.translate(x, y);
s.translate(cw / 2, ch / 2);
let size = s.noise(x * noiseScale, y * noiseScale) * 10;
s.strokeWeight(size);
s.rect(0, 0, 10, 10);
s.resetMatrix(); // reset translate/transform/scale for next interation
}
}
};
})
import {p5} from "@thometnanni/p5";
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.
