创建嘈杂的字体动画

Question

所以我必须创建一个噪声字体，它看起来像下面的输出。

Desired Output

我的嘈杂字体必须遵循以下说明：

在 for 循环中，计算由 noise() 函数生成的值 nX。将正确缩放的 frameCount 传递给 noise() 函数。将其映射到 -amt 和 amt 之间的值，其中 amt 等于 20。

将从 map() 返回的值添加到每个点的坐标。对 nY 做同样的事情。如果你做对了，整个单词应该沿对角线移动。

通过将点的 x 和 y 坐标添加到 frameCount 并将其传递给噪声，使每个点的 nX 不同。对 nY 做同样的事情。如果你做对了，现在每个点都应该独立于其他点移动，但它们仍然各自沿对角线移动。

为传递给 nY 的参数添加一个数字（任意数字）。这样，当 nY 从噪声图中的不同点读取时，我们将 nX 和 nY 值彼此解耦。

玩amt。将其设置为依赖于 mouseX，范围为 0 到 80。

但是，my output 与所需的输出不匹配。下面是我的代码：

var points;
var font;
function preload() {
  font = loadFont('assets/Calistoga-Regular.ttf');
}

//////////////////////////////////////////////////////////////////////
function setup() {
  createCanvas(900, 400);
  fill(255, 104, 204, 150);
    noStroke();

  points = font.textToPoints('c o d e', 50, 300, 300, {
    sampleFactor: .3,
    simplifyThreshold: 0
  });
}

//////////////////////////////////////////////////////////////////////
function draw() {
    fill(0,5);
    rect(0,0,width,height);

    for(var i=0;i<points.length;i++){
        fill(255, 104, 204, 150);
        var point = points[i];
        var pX = frameCount+point.x;
        var pY = frameCount+point.y+5;
        var nX = noise(pX);
        var nY = noise(pY);
        var amt = map(mouseX, 0, 20, 0, 80);
        var mX = map(nX,0,pX,-amt,amt);
        var mY = map(nY,0,pY,-amt,amt);
        var x = point.x + random(-mX, mX);
        var y = point.y + random(-mY, mY);
        ellipse(x,y,10,10);
    }
}

Answer 1

我假设你的问题是字体太吵了？在这种情况下，问题是您将 amt 映射到一个过高的值。这是因为你告诉它范围是0到20，但实际范围是0到width。要解决这个问题，请替换为：

var amt = map(mouseX, 0, 20, 0, 80)

有了这个：

var amt = map(mouseX, 0, width, 0, 80);

编辑：您的代码中存在一些问题：

在说明中，它说：“将 frameCount 正确缩放”传递到 noise() 函数中。在您的代码中，您不缩放帧数（将其乘以一个小数字，例如 0.1）。

“通过添加点的 x 和 y 坐标使每个点的 nX 不同”。在您的代码中，您仅将 point.x 添加到 pX 的 framecount 并且仅将 point.y 添加到 pY.

此外，您将 nx 从 0 映射到 pX，但它仅从 0 映射到 1（情况总是如此使用 noise() 函数）。

最后一个问题是您使用的是random()函数。如果您使用的是 random() 函数，则值永远不会平滑变化，轨迹也不会连接。这是固定代码：

var point = points[i];
var pX = (frameCount * 0.1) + point.x + point.y;
var pY = pX + 5;
var nX = noise(pX);
var nY = noise(pY);
var amt = map(mouseX, 0, width, 0, 80);
var mX = map(nX,0,1,-amt,amt);
var mY = map(nY,0,1,-amt,amt);
var x = point.x + mX;
var y = point.y + mY;

如果你想改变轨迹的平滑度，你可以改为0.1

创建嘈杂的字体动画

Create Noisy Font animation

p5.js

noise