Я работаю с двухосным переменным шрифтом (wght и ширина) в p5.js v2. Я могу легко анимировать ось веса, используя шрифт Weight().
Как я могу контролировать ширину (wdth) таким же образом?
Я не хочу изменять стиль CSS с помощью JavaScript. Я хочу использовать метод text("word", x, y), чтобы позже прочитать его пиксели с холста.
Вот мой код:
JavaScript:
let vid;
let scl = 10;
let ratio = 128 / 72;
let font;
let stamps
async function setup() {
font = await loadFont("/BeyondVF.ttf");
let cnv = createCanvas(windowHeight * ratio, windowHeight);
let newCanvasX = (windowWidth - windowHeight * ratio) / 2;
cnv.position(newCanvasX, 0);
textAlign(CENTER, CENTER);
stamps = createGraphics(windowHeight * ratio, windowHeight);
}
function draw() {
background(0);
stamps.background(0);
let Fweight = map(mouseX, 0, height, 300, 700);
let Fwidth = map(mouseY, 0, width, 100, 200);
stamps.textWeight(Fweight);
stamps.textFont("khat");
stamps.textSize(500);
stamps.fill(255);
stamps.noStroke();
stamps.text("A", windowWidth/2, windowHeight/2);
let whitness = 200;
for (let i = 0; i < width; i += 5) {
for (let j = 0; j < height; j += 5) {
let pixelColor = stamps.get(i, j);
let r = pixelColor[0];
let g = pixelColor[1];
let b = pixelColor[2];
if (r > whitness && g > whitness && b > whitness) {
fill(255,255,255);
circle(i + random(-3,3), j+random(-3,3), 5);
}
}
}
// Update the canvas.
updatePixels();
function windowResized() {
resizeCanvas(windowHeight * ratio, windowHeight);
vid.size(width / scl, height / scl);
}
}
CSS:
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
@font-face{
font-family:'khat';
src:url('/BeyondVF.ttf')format('truetype');
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... -using-css