Exponential Graph Animation P5js Canvas

问题

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

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.

Link to P5 editor with code: P5 web editor

回答1:

There is at least one big error in

scaleLevel -= 0.1;

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

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

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.

来源：https://stackoverflow.com/questions/61476555/exponential-graph-animation-p5js-canvas