I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
text = "Hi There"
p5((s) => {
let font;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.background("blue");
s.fill("red");
s.textSize(200);
s.textAlign(s.CENTER, s.CENTER);
s.textFont(font);
};
s.draw = function () {
s.translate(width / 2, height / 2);
s.text(text, 0, 0);
};
})
p5((s) => {
let font;
let points;
let mic;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.textFont(font);
s.textAlign(s.CENTER, s.CENTER);
points = font.textToPoints(text, 50, 250, 200, {
sampleFactor: 0.05
});
mic = new pSound.AudioIn();
mic.start();
};
s.draw = function () {
s.background("#e4e4e4");
s.stroke("blue");
let micLevel = mic.getLevel(); // between 0 and 1
let radius = s.map(micLevel * 10, 0, 1, 20, 100);
for (let i = 0; i < points.length; i++) {
let p = points[i];
// if we use map we can change the scale
// map(value, min, max, newMin, newMax)
//let radius = s.map(s.mouseX, 0, width, 1, 50);
s.circle(p.x, p.y, radius);
}
};
})
p5((s) => {
let font;
let points;
let circleNr = 0;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.textFont(font);
s.textAlign(s.CENTER, s.CENTER);
points = font.textToPoints(text, 50, 250, 200, {
sampleFactor: 0.05
});
};
s.draw = function () {
s.background(200);
s.stroke(0);
for (let i = 0; i <= circleNr; i++) {
let p = points[i];
s.circle(p.x, p.y, 10);
}
if (circleNr < points.length && s.frameCount % 1 === 0) {
circleNr++;
}
if (circleNr == points.length) {
circleNr = 0;
}
};
})
p5((s) => {
let font;
let points;
let circleNr = 0;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.textFont(font);
s.textAlign(s.CENTER, s.CENTER);
points = font.textToPoints(text, 50, 250, 200, {
sampleFactor: 0.1
});
};
s.draw = function () {
//s.background(200);
s.stroke(0);
s.fill(0);
for (let i = 0; i <= circleNr; i++) {
let p = points[i];
s.rect(p.x, p.y, 5);
}
if (circleNr < points.length && s.frameCount % 1 === 0) {
circleNr++;
}
if (circleNr == points.length) {
circleNr = 0;
}
// copy
let x1 = s.random(width);
let y1 = s.random(height);
let x2 = x1 + s.random(-1, 1);
let y2 = y1 + s.random(-1, 1);
let fragmentWidth = 100;
let fragmentHeight = height;
let source = [x1, y1, fragmentWidth, fragmentHeight];
let target = [x2, y2, fragmentWidth, fragmentHeight];
s.copy(s, ...source, ...target);
};
})
p5((s) => {
let font;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.background("blue");
s.fill("red");
s.textSize(200);
s.textFont(font);
};
s.draw = function () {
s.text(text, 100, height / 2 + 50);
let x1 = s.random(width);
let y1 = s.random(height);
let x2 = x1 + s.random(-2, 2);
let y2 = y1 + s.random(-2, 2);
let fragmentWidth = 100;
let fragmentHeight = height;
let source = [x1, y1, fragmentWidth, fragmentHeight];
let target = [x2, y2, fragmentWidth, fragmentHeight];
s.copy(s, ...source, ...target);
};
})
pSound = require("p5").then(async (p5) => {
await require("p5@0.9.0/lib/addons/p5.sound.min.js");
return 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.
