javascript - 指数图动画 P5js Canvas

Question

我正在尝试使用 P5js 制作一个不断增长的指数图的动画。我已经成功绘制了图表本身，但侧面的“标尺/刻度”不起作用。我希望“窗口”根据X和Y轴缩放，就像这个例子:Animation 我正在尝试复制此动画

我希望图表“增长”，侧面的标尺/刻度代表增长，X 是时间，Y 是乘数(中间的大文本)。正如我链接的动画所示，在图形超出框后，X 和 Y 值向原点移动。

链接到 P5 编辑器，代码:P5 web editor

Answer 1

至少有一个大错误

scaleLevel -= 0.1;

因为这样它会变为零，您将在REscale中除以它。

您的目的是在 0 到 x 区间内绘制一些指数函数 f(x)。 x 的值随着时间的推移而增加。指数函数的值也在上升，但速度不同。因此，您必须使用两个单独的比例因子:sX = display_width/x 和 sY = display_hight/f(x)。

我希望这能让你开始。下面是一些代码来说明该走哪条路:

var x = 10

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function my_func(x) {
  return exp(x * 0.2);
}

function draw() {
  background(220);
  stroke(155);
  strokeWeight(8);
  noFill();
  beginShape();
  let nPoints = 20;
  let dx = x / nPoints;
  let ymax = my_func(x);
  let dy = ymax / nPoints;
  for (let i = 0; i <= x; i += dx) {
    xValue = map(i, 0, x, 0, width);
    yValue = map(my_func(i), 0, ymax, height, 0);
    vertex(xValue, yValue);
  }
  endShape();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

我省略了轴上的刻度。我决定为 0 到 10 之间的 x 值创建一个静态图。通过删除 noLoop(); 语句，可以轻松地将代码更改为动画在 setup 函数中，并在 draw 函数中添加行 x += somedelta;。