I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
mySketch = (s) => {
var num = texts.length;
var noiseScale = 500;
var noiseStrength = 1;
var particles = [];
var frameCounter = 0;
var grad1;
var grad2;
s.setup = function () {
s.createCanvas(s.windowWidth, 600);
s.noStroke();
for (let i = 0; i < num; i++) {
var loc = s.createVector(s.random(s.width * 1.2), s.random(s.height), 2);
var angle = 0;
var dir = s.createVector(s.cos(angle), s.sin(angle));
var speed = s.random(0.5, 2);
particles[i] = new Particle(loc, dir, speed, texts[i % texts.length]);
}
};
s.draw = function () {
s.fill(0, 10);
s.noStroke();
s.rect(0, 0, s.width, s.height);
for (let i = 0; i < particles.length; i++) {
particles[i].run();
}
frameCounter++;
if (frameCounter === 240) {
grad1 = s.color(s.random(255), s.random(255), s.random(255));
grad2 = s.color(s.random(255), s.random(255), s.random(255));
for (let i = 0; i < particles.length; i++) {
particles[i].changeColors();
}
frameCounter = 0;
}
};
class Particle {
constructor(_loc, _dir, _speed, _text) {
this.loc = _loc;
this.dir = _dir;
this.speed = _speed;
this.text = _text;
this.color1 = "white";
this.color2 = "white";
}
run() {
this.move();
this.checkEdges();
this.update();
}
move() {
let angle =
s.noise(
this.loc.x / noiseScale,
this.loc.y / noiseScale,
s.frameCount / noiseScale
) *
s.TWO_PI *
noiseStrength;
this.dir.x = s.cos(angle);
this.dir.y = s.sin(angle);
var vel = this.dir.copy();
var d = 1;
vel.mult(this.speed * d);
this.loc.add(vel);
}
checkEdges() {
if (
this.loc.x < 0 ||
this.loc.x > s.width ||
this.loc.y < 0 ||
this.loc.y > s.height
) {
this.loc.x = s.random(s.width * 1.2);
this.loc.y = s.random(s.height);
}
}
update() {
let gradient = s.drawingContext.createLinearGradient(
this.loc.x,
0,
this.loc.x + s.textWidth(this.text),
0
);
gradient.addColorStop(0, this.color1);
gradient.addColorStop(1, this.color2);
s.drawingContext.fillStyle = gradient;
s.text(this.text, this.loc.x, this.loc.y);
}
changeColors() {
this.color1 = grad1;
this.color2 = grad2;
}
}
}
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.
