时间戳

首页 > 解决方案 > 指数图动画 P5js 画布

javascript - 指数图动画 P5js 画布

问题描述

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

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

使用代码链接到 P5 编辑器：P5 Web 编辑器

标签： javascriptcanvasp5.js

解决方案

至少有一个大错误

scaleLevel -= 0.1;

因为这样它会变为零，你将在 内除以它REscale。

您的意图是f(x)在 的区间内0绘制一些指数函数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();
}

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

推荐阅读