Can someone help me with this? (special graph)

[cocopuffs]

So I basically have to create the exact sketch/animation as depicted in the gif.
I attached a gif of exactly how it needs to look and animate (you may need to refresh page in a few minutes because I think the gif stops moving after a few minutes.) So, I’m having a hard time mainly figuring out how to make some of the curves different sizes (similar to the gif). In my code that I have now, all the curves are at the same y axis level and not similar to the gif. I’m not just looking for the answer, I genuinely want to understand and learn how it’s done. So I’m looking to how I can get the finishing results! Someone please help me!

The code that I have so far is:

int numPts = 300;
size(400,400);
background(0);
noStroke();
fill(255);
for(float i = 1; i <= numPts; i++) {
float y = sin(i/15);
ellipse(i * width/numPts, height/2 + 50 * y, 10, 10);
}

[NumericPrime]

try using

int numPts = 300;
void setup(){
size(400,400);
noStroke();
fill(255);
}
void draw(){
for(float i = 1; i <= numPts; i++) {
float y=sin((i+frameCount)/15);
ellipse(i * width/numPts, height/2 + 50 * y, 10, 10);
}

[micycle]

A curve like that is made from summing multiple waves of differing frequencies.

[CodeMasterX]

do you calculate the average of the sin-waves to get the new one or is there a different way?

[micycle]

Simply summing them all up will give you the shape.

To squeeze it back between -1…1 you’d divide by the number of waves (an average).

[CodeMasterX]

thank you!
I made this with it!