text = "hello"
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.background("#e4e4e4");
s.fill("blue");
s.textSize(height/2);
s.textAlign(s.CENTER, s.CENTER);
};
s.draw = function () {
s.translate(width / 2, height / 2);
s.text(text, 0, 0);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.fill("blue");
s.textAlign(s.CENTER, s.CENTER);
};
s.draw = function () {
s.background(255);
s.text(text, s.mouseX, s.mouseY);
};
})
fontUrl = await FileAttachment("Courier New.ttf").url();
p5((s) => {
let font;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.fill("blue");
s.textFont(font);
s.textSize(36);
s.textAlign(s.CENTER, s.CENTER);
s.text(text, width / 2, height / 2); };
})
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.5
});
};
s.draw = function () {
s.background("#e4e4e4");
s.stroke("blue");
for (let i = 0; i < points.length; i += 4) {
let p = points[i];
let radius = s.map(s.mouseX, 0, width, 1, 100);
s.circle(p.x, p.y, radius);
//s.rect(p.x, p.y, radius);
}
};
})
p5((s) => {
let font;
let points;
let stepSize = 2;
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 = getPoints(text, 100, height / 2);
};
s.draw = function () {
s.noFill();
s.strokeWeight(0.1);
s.stroke("blue");
// drawing the the shape, distorting it
s.beginShape();
for (let i = 0; i < points.length; i++) {
let pt = points[i];
// let the points dance
pt.x += s.random(-stepSize, stepSize);
pt.y += s.random(-stepSize, stepSize);
s.vertex(pt.x, pt.y);
s.ellipse(pt.x, pt.y, 7, 7);
}
s.endShape();
};
function getPoints(text, x, y) {
let result = [];
// https://p5js.org/reference/#/p5.Font/textToPoints
let path = font.textToPoints(text, x, y, height / 2, {
sampleFactor: 0.1 // Adjust as needed
});
for (let i = 0; i < path.length; i++) {
result.push(s.createVector(path[i].x, path[i].y));
}
return result;
}
})
p5((s) => {
let typedKey = "";
let fontPath;
let spacing = 100;
let spaceWidth = 100; // width of letter ' '
let fontSize = 200;
let lineSpacing = fontSize * 1.2;
let textW = 0;
let letterX = 10;
let letterY = lineSpacing;
// distorts the position of the points
let stepSize = 2;
let distortion = 1;
let font;
let points;
s.preload = function () {
font = s.loadFont(fontUrl);
};
s.setup = function () {
s.createCanvas(width, height);
s.textFont(font);
points = getPoints(typedKey, letterX, letterY);
};
s.draw = function () {
s.noFill();
s.strokeWeight(0.1);
s.stroke("blue");
s.translate(letterX, letterY);
s.beginShape();
for (let i = 0; i < points.length; i++) {
let pt = points[i];
// distort the points
pt.x += s.random(-stepSize, stepSize) * distortion;
pt.y += s.random(-stepSize, stepSize) * distortion;
s.vertex(pt.x, pt.y);
s.ellipse(pt.x, pt.y, 7, 7);
}
s.endShape();
};
s.keyPressed = function () {
switch (s.keyCode) {
case s.ENTER:
case s.RETURN:
typedKey = "";
points = getPoints(typedKey);
letterY += lineSpacing;
letterX = 50;
case s.BACKSPACE:
case s.DELETE:
s.background(255);
typedKey = "";
points = getPoints(typedKey);
letterX = 50;
letterY = lineSpacing;
}
};
s.keyTyped = function () {
if (s.keyCode >= 32) {
if (s.keyCode == 32) {
typedKey = "";
letterX += textW + spaceWidth;
points = getPoints(typedKey);
} else {
typedKey = s.key;
letterX += textW + spacing;
points = getPoints(typedKey);
}
}
};
function getPoints(typedKey, x, y) {
let result = [];
let path = font.textToPoints(typedKey, x, y, fontSize, {
sampleFactor: 0.1 // Adjust as needed
});
for (let i = 0; i < path.length; i++) {
result.push(s.createVector(path[i].x, path[i].y));
}
return result;
}
})
p5((s) => {
let xTile = 5;
let yTile = 5;
let speed = 0.1;
let xDisplacement = 0.4;
let yDisplacement = 0;
let offset = 50;
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(255);
s.fill("blue");
s.textSize(height);
s.push();
s.translate(width / 2, height / 2);
s.textAlign(s.CENTER, s.CENTER);
s.text(text, 0, 0);
s.pop();
let wTile = parseInt(width / xTile);
let hTile = parseInt(height / yTile);
for (let y = 0; y < yTile; y++) {
for (let x = 0; x < xTile; x++) {
let waveX = parseInt(
s.sin(s.frameCount * speed + x * y * xDisplacement) * offset
);
let waveY = parseInt(
s.sin(s.frameCount * speed + x * y * yDisplacement) * offset
);
if (xDisplacement === 0) {
waveX = 0;
}
if (yDisplacement === 0) {
waveY = 0;
}
let sx = x * wTile + waveX;
let sy = y * hTile + waveY;
let dx = x * wTile;
let dy = y * hTile;
let source = [sx, sy, wTile, hTile]; // x, y, width, height
let target = [dx, dy, wTile, hTile];
s.copy(s, ...source, ...target); // the spread syntax (...) removes the brackets ([])
}
}
};
})
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.
