Экспоненциальная графическая анимация P5 js Canvas - PullRequest
Новая
       48

Экспоненциальная графическая анимация P5 js Canvas

0 голосов
/ 28 апреля 2020

Я пытаюсь анимировать растущий экспоненциальный граф, используя P5 js. Я успешно построил график, но «линейки / шкалы» по сторонам не будут работать. Я хочу, чтобы «окно» масштабировалось в соответствии с осями X и Y, как в следующем примере: Анимация Я пытаюсь воспроизвести эту анимацию

Я хочу график для «роста» и линейки / шкалы по сторонам для представления роста, X - время, а Y - множитель (большой текст в середине). Как видно из анимации, которую я связал, значения X и Y перемещаются в направлении начала координат после того, как график вышел за рамки.

Ссылка на редактор P5 с кодом: Веб-редактор P5

1 Ответ

1 голос
/ 28 апреля 2020

В 

scaleLevel -= 0.1;

есть, по крайней мере, одна большая ошибка, потому что при этом она становится равной нулю, и вы делитесь на нее в пределах REscale.

Ваше намерение состоит в том, чтобы нарисовать некоторую экспоненциальную функция f(x) в интервале от 0 до x. Значение x увеличивается со временем. Значение экспоненциальной функции также растет, но с другой скоростью. Так что вам придется использовать два отдельных масштабных коэффициента: sX = display_width / x и 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();
}

Я опустил галочки на осях. Я решил создать график stati c для значения x в диапазоне от 0 до 10. Код можно легко превратить в анимацию, удалив оператор noLoop(); в функции setup и добавив строку x += somedelta; в функции draw.

...