使用innerwidth设置由p5.js函数制成的字体

Question

我已经从一组功能中制作了实验字体。我正在尝试通过使字体到达浏览器窗口的内部宽度时移动到下一行来对字体进行排版。但是由于某种原因，这里的逻辑无法正常工作，因此我无法将函数移至下一行。我认为我使用模运算符编写的条件语句有问题，但是我不知道是什么。谢谢！

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 = 'goodbye';
    const letterWidth = 170;
    const windowWidth = window.innerWidth;
    let currentLine = 0;

    for (let i = 0; i < text.length; i++) {

        const char = text.charAt(i);
        const uppercaseChar = char.toUpperCase();
        const letterData = allLetters[uppercaseChar];

        if ((letterWidth * (i % windowWidth)) >= windowWidth) {
            currentLine = currentLine + 200
        }
        drawLetter(letterData, { x: letterWidth * i, y: currentLine });
    }


    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();

    }
}

Answer 1

这不是功能代码示例。下次您在此处发布问题时，建议添加一个有效示例：)我确实将其与const text ='abcdabcd'一起使用。.

一些小点：不必具有“ const windowWidth = window.innerWidth”，因为p5.js已经提供了该变量。您甚至可以使用width，因为您创建的画布的宽度是windowWidth。

..

您的代码实际上工作正常。

if ((letterWidth * (i % windowWidth)) >= windowWidth) {
    currentLine = currentLine + 200
}

console.log(currentLine)

您将看到输出转到0、200、400。但是当您调用drawLetters时，转换对象的x值仍然是i * letterWidth。这意味着它将在新行上绘制，但不在画布内，您看不到它。

drawLetter(letterData, { x: letterWidth * i, y: currentLine });

我尝试过此操作，但它也不起作用，因为它会向下移动一行，但是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();

}