指數圖 Animation P5js Canvas

Question

我正在嘗試使用 P5js 為不斷增長的指數圖制作動畫。 我已經成功地繪制了圖表本身，但是兩側的“標尺/刻度”不起作用。 我希望“窗口”根據 X 和 Y 軸進行縮放，就像這個例子一樣： Animation我正在嘗試復制這個 animation

我希望圖表“增長”，兩側的標尺/刻度代表增長，X 是時間，Y 是乘數（中間是大文本）。 正如我在鏈接的 animation 上看到的那樣，X 和 Y 值在圖形超出框后向原點移動。

使用代碼鏈接到 P5 編輯器： P5 web 編輯器

Answer 1

至少有一個大錯誤

scaleLevel -= 0.1;

因為這樣它會變為零，你將在REscale中除以它。

您的意圖是在0到x的區間內繪制一些指數 function f(x) 。 x的值隨時間增加。 指數 function 的值也在上升，但速度不同。 因此，您將不得不使用兩個單獨的比例因子： sX = display_width / x和 sY sY = display_hight / f(x) 。

我希望這能讓你以某種方式開始。 下面是一些代碼來說明 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(); }

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

我省略了軸上的刻度。 我決定為 0 到 10 之間的x值創建一個 static plot。通過刪除 noLoop 可以輕松地將代碼更改為noLoop(); setup function 中的語句並添加行x += somedelta; 內draw function。