时间戳

首页 > 解决方案 > 创建嘈杂字体动画

p5.js - 创建嘈杂字体动画

问题描述

所以我必须创建一个看起来像下面的输出的嘈杂字体。

期望的输出

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

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

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

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

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

与amt一起玩。将其设置为依赖于 mouseX 并使其范围为 0 到 80。

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

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

标签： p5.jsnoise

解决方案

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

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

有了这个：

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

编辑：您的代码中有几个问题：

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

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

此外，当它仅从to时，您正在映射nxfrom 0to （函数总是如此）。pX01noise()

最后一个问题是您正在使用该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

推荐阅读