var ys;

var N = 100;

​

var minp, maxp;

​

var points;

var emaPoints;

​

let baseHeightSlider, heightRangeSlider;

​

​

function setup() {

  let canvas =createCanvas(400, 400);

  canvas.parent('canvasholder');

  s = select('#slider1');

  s.input(loop);

​

  ys = select('#slider2');

  ys.input(() => {

    points[0].y = map(ys.value(), 0, 1, minp, maxp);

    loop();

  });

  NSlider = select("#NSlider")

  NSlider.input(updatePoints);

  baseHeightSlider = select('#baseHeightSlider');

  baseHeightSlider.input(updatePoints);

​

  heightRangeSlider = select('#heightRangeSlider');

  heightRangeSlider.input(updatePoints);

  select('#createNewPointsBtn').mousePressed(createRandomPoints);

  updatePoints()

  createRandomPoints()

}

​

function updatePoints() {

  N = NSlider.value()

  baseHeight = baseHeightSlider.value();

  heightRange = heightRangeSlider.value();

  // Update slider labels if you have them

  select("#NSliderLabel").html(N)

  select('#baseHeightLabel').html(baseHeight - (height/2));

  select('#heightRangeLabel').html(heightRange);

}

​

function createRandomPoints() {

  points = [];

  emaPoints = [];

  for (var i = 0; i < N; i++){

    const h = baseHeight + random() * heightRange;

    minp = min(h, minp)

    maxp = max(h, maxp)

    points.push(createVector(i/N * width, h));

  }

  // Initialize EMA points

  emaPoints.push(points[0]);

  for (var i = 1; i < points.length; i++) {

    emaPoints.push(createVector(points[i].x, 0));

  }

  loop()

}

​

function draw() {

  background(220);

  var alpha = 2 / (s.value() + 1); // Convert slider value to alpha for EMA

​

  push()

  strokeWeight(4);

  // Draw the original points

  for (var i = 0; i < points.length - 1; i++) {

    stroke(0); // Black color for original points

    point(points[i].x, points[i].y)

  }

  pop()

  // Compute and draw EMA line

  for (var i = 1; i < points.length; i++) {

    emaPoints[i].y = (1 - alpha) * emaPoints[i-1].y + alpha * points[i].y;

    stroke(255, 0, 0); // Red color for EMA line

    line(emaPoints[i-1].x, emaPoints[i-1].y, emaPoints[i].x, emaPoints[i].y);

  }

  updateLabels()

  noLoop()

}

​

function updateLabels() {

  select('#slider1Label').html(s.value().toFixed());

  select('#slider2Label').html(map(ys.value(), 0, 1, minp, maxp).toFixed(2));

}