指数图动画P5js画布 [英] Exponential Graph Animation P5js Canvas

问题描述

我正在尝试使用P5js为不断增长的指数图制作动画.我已经成功绘制了图形本身，但是侧面的标尺/比例尺"不起作用.我希望窗口"根据X和Y轴缩放，就像下面的示例一样:动画我正在尝试复制此动画

I am trying to animate a growing exponential graph using P5js. I have successfully plotted the graph itself, but the "rulers/scales" on the sides won't work. I want the "window" to scale according to the X and Y axis, just like this example: Animation I am trying to replicate this animation

我希望图形增长"，并且标尺/比例尺在侧面代表增长，X是时间，Y是乘数(中间是大文本).如我链接的动画所示，在图形超出框的范围后，X和Y值朝着原点移动.

I want the graph to "grow" and the rulers/scales on the sides to represent the growth, X is time and Y the multiplier (big text in the middle). As seen on the animation I linked, X and Y values move towards the origin after the graph has gone outside the box.

使用以下代码链接到P5编辑器: P5网络编辑器

Link to P5 editor with code: P5 web editor

推荐答案

至少存在一个大错误

scaleLevel -= 0.1;

因为这种方式它得到零，所以您将在 REscale 中除以它.

because this way it gets zero and you will divide by it within REscale.

您的意图是在 0 到 x 的区间内绘制一些指数函数 f(x). x 的值随着时间增加.指数函数的值也在增加，但以另一个速率增加.因此，您将不得不使用两个单独的比例因子: sX = display_width/x 和 sY = display_hight/f(x).

Your intention is to draw some exponential function f(x) in the interval 0 to x. The value of x is increasing by time. The value of the exponential function is also rising but with another rate. So you will have to use two separate scale factors: sX = display_width / x and sY = display_hight / f(x).

我希望这可以帮助您以某种方式开始.这是一些代码，说明要走的路:

I hope this gets you started somehow. Here is some code to illustrate which way to go:

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(); 语句，可以轻松地将代码更改为动画.在 setup 函数中，并在 draw 函数中添加 x + = somedelta; 行.

I omitted the ticks on the axes. I decided to create a static plot for the value of x in the between 0 and 10. The code can easily be changed into an animation by removing the noLoop(); statement in the setup function and adding the line x += somedelta; within the draw function.

这篇关于指数图动画P5js画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！