Мне нравится, что ты делаешь. Эти волнистые буквы забавны:)
Это не функциональный пример кода. В следующий раз, когда вы разместите здесь вопрос, желательно добавить рабочий пример :) Я заставил его работать с const text = 'abcdabcd' ..
Некоторые небольшие моменты: не обязательно иметь "const windowWidth = window.innerWidth ", потому что p5. js уже предоставляет эту переменную. Вы даже можете использовать ширину, так как вы создаете свой холст с шириной windowWidth.
..
Ваш код на самом деле работает правильно.
if ((letterWidth * (i % windowWidth)) >= windowWidth) {
currentLine = currentLine + 200
}
console.log(currentLine)
Вы увидите выходные данные go 0, 200, 400. Но когда вы вызываете drawLetters, значением x объекта перевода по-прежнему является i * letterWidth. Это означает, что он aws находится на новой строке, но за пределами холста вы его не видите.
drawLetter(letterData, { x: letterWidth * i, y: currentLine });
Я пробовал это, но и это не работает, потому что это будет go вниз на одну строку, но x все еще перемещается на 1 буквенную ширину.
drawLetter(letterData, { x: (letterWidth * i) % windowWidth, y: currentLine });
..
Код также не учитывает ширину букв, поэтому перед если вы прыгаете по линии, письмо может быть нарисовано за пределами холста. В моем примере я вычел letterWidth из ширины, чтобы предотвратить это.
Это практически невозможно без дополнительной переменной. Так как у вас есть currentLine, просто добавьте currentX.
const letterA = {
lines: [
{ x1: 35, y1: 170, x2: 50, y2: 136 },
{ x1: 50, y1: 136, x2: 89, y2: 45 },
{ x1: 89, y1: 45, x2: 125, y2: 136 },
{ x1: 125, y1: 136, x2: 140, y2: 170 },
{ x1: 125, y1: 136, x2: 50, y2: 135 }
]
}
const letterB = {
lines: [
{ x1: 35, y1: 170, x2: 35, y2: 102 },
{ x1: 35, y1: 102, x2: 35, y2: 41 },
{ x1: 35, y1: 41, x2: 125, y2: 52 },
{ x1: 109, y1: 103, x2: 35, y2: 103 },
{ x1: 125, y1: 52, x2: 109, y2: 103 },
{ x1: 109, y1: 103, x2: 125, y2: 159 },
{ x1: 125, y1: 159, x2: 35, y2: 170 }
]
}
const letterC = {
lines: [
{ x1: 131, y1: 147, x2: 85, y2: 177 },
{ x1: 85, y1: 177, x2: 30, y2: 111 },
{ x1: 30, y1: 111, x2: 85, y2: 38 },
{ x1: 85, y1: 38, x2: 131, y2: 65 },
]
}
const letterD = {
lines: [
{ x1: 36, y1: 170, x2: 36, y2: 45 },
{ x1: 36, y1: 45, x2: 123, y2: 54 },
{ x1: 123, y1: 54, x2: 138, y2: 111 },
{ x1: 138, y1: 111, x2: 113, y2: 162 },
{ x1: 113, y1: 162, x2: 36, y2: 170 }
]
}
const allLetters = {
A: letterA,
B: letterB,
C: letterC,
D: letterD
}
function setup() {
createCanvas(windowWidth, 1080);
}
function draw() {
background(255)
strokeWeight(20);
frameRate(3)
const text = 'abcdabcd';
const letterWidth = 170;
let currentX = 0;
let currentLine = 0;
for (let i = 0; i < text.length; i++) {
const char = text.charAt(i);
const uppercaseChar = char.toUpperCase();
const letterData = allLetters[uppercaseChar];
//subtract the letterwidth, so it doesn't clip off of the canvas
if ( currentX % width >= width - letterWidth ) {
currentLine = currentLine + 200
currentX = 0;
}
drawLetter(letterData, { x: currentX, y: currentLine });
// here you add the letterWidth to the currentX positions.
currentX += letterWidth;
}
}
// This function should be outside the draw function. It cán be inside there, but you wouldn't be able to
// access it outside of the draw function, if you'd want
function drawLetter(letter, translation) {
let range = 4
push();
translate(translation.x, translation.y)
for (let i = 0; i < letter.lines.length; i++) {
const { x1, y1, x2, y2 } = letter.lines[i];
line(random(x1, x1 + range), random(y1, y1 + range), random(x2, x2 + range), random(y2, y2 + range));
}
pop();
}