我正在尝试使用 P5js 制作一个不断增长的指数图的动画。 我已经成功绘制了图表本身,但侧面的“标尺/刻度”不起作用。 我希望“窗口”根据X和Y轴缩放,就像这个例子:Animation 我正在尝试复制此动画
我希望图表“增长”,侧面的标尺/刻度代表增长,X 是时间,Y 是乘数(中间的大文本)。正如我链接的动画所示,在图形超出框后,X 和 Y 值向原点移动。
链接到 P5 编辑器,代码:P5 web editor
最佳答案
至少有一个大错误
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;
。
关于javascript - 指数图动画 P5js Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61476555/