text = "Hello"
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;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.textSize(height);
s.textFont(font);
s.textAlign(s.CENTER, s.CENTER);
points = font.textToPoints(text, 100, 250, 200, {
sampleFactor: 0.1
});
};
s.draw = function () {
s.background("#e4e4e4");
s.stroke("blue");
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);
}
};
})
fontUrl = await FileAttachment("TimesDotRom.otf").url();
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.
