Method to change a variable smoothly over time in JavaScript?

Question

Is it possible to change a variable continuously over time? For example if a var is initialized:
let x = 0;
how can I have that smoothly change to a value of something like 10 over a period of time, lets say 10 seconds.

Ideally I'd like to be able to use something like a sine where the frequency could be controlled. For example, a sine at a frequency of .1 Hz would take 10 seconds to complete a cycle.

I'd gladly settle for any method, but being a musician I thought that maybe an oscillator would be one option as that would allow different waveforms (sine, saw, square, triangle) to control the value of the variable. But again, any method to smoothly control the variable is fine with me.

I attached a simple oscillator as an example but have no idea whether the output of an AudioContext oscillator could be converted into a variable value.
https://code.sololearn.com/Wj83O6Zt7lIz/?ref=app

Answer 1

Bob_Li
It's sometimes's referred to as Grandi's Rose, and yes, I'm familiar with it, I'm not looking for it but thank you😁. 👍

Grandi was apparantly studying it in 1723 which was a fair bit before the Lissajous curve, although I'm glad you shared that link, I'll add it to my collection.

I've been working with 2D curves for a few months primarily related to applying them to audio.

Here's an audio example from a few months ago:
https://soundcloud.com/st-csound/rose
Nothing too exciting, just a demonstration. Essentially two sine waves functioning as wavetables while the size of the rose and the amount of petals increases.

Rose:

https://en.m.wikipedia.org/wiki/Rose_(mathematics)

Mirielle's Maurer Rose code also contained this link:
https://en.m.wikipedia.org/wiki/Maurer_rose
which also references the wiki rose link above.

https://mathcurve.com/courbes2d/rosace/rosace.shtml

Some other interesting 2D & 3D curves.

https://mathcurve.com/

Answer 2

Mirielle yes, exactly and I mentioned the same thing also recommended using Date object for a better (still not good) precision. But upon further discussion I found that Scott D actually doesn't need the accuracy of this type (say, a fixed high-res timer like a system clock or multimedia timer). Just a rAF is enough and either of those three methos (Date.now, setinterval/timeout) will work in this case (to best of my understanding). And again, if you see my pervious post, recommending date I was thinking that in case of any latency, or block, at least it's obvious that code is lagging behind and by which amount, however again, none of these are important in this case.

Answer 3

Umesh Kahar Please create your own thread for asking your question.

Answer 4

I think you only need to set up an animation loop, e.g. with requestAnimationFrame. In this loop then you can apply all the changes you need. 🤔

edit:
I tried creating sounds a while ago. Here, the sounds is just constant noise. But at the bottom, I put the links to the sits/ blogs that helped me with the code.
https://code.sololearn.com/Wd6RW898irVg/?ref=app

Answer 5

Mirielle I'm afraid neither of the two are 100% accurate. test your browser to see if you get a const 60Hz callback no matter how much load is on your browser. or it just ignores some.
Also dt accuracy is in milliseconds:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
it's better, but still not 100% accurate. run it against a dt of clock_gettime() (accuracy of nanoseconds), has 10^6 margin of error... so neither are 100% accurate.

Answer 6

Bob_Li
I appreciate that (I actually found that one already, yesterday while "Googling" - still laugh at that as a verb...) but FWIW had found something similiar a few weeks ago here on Sololearn. I saved it to my code bits so unfortunately can't link the original. This one is also cool, using the arrays.

While certainly helpful and worth my time to study, as it turned out that particular method really wasn't necessary for the specific task I was working on. Being primarily a musician my first thought when it came to controlling variables over time was a musical concept. That and my js skills aren't very good. But my goalposts are constantly shifting so I'm going to save the one you posted as well for future reference.
https://code.sololearn.com/WJmc4K6U14NS/?ref=app

Answer 7

Scott D
😁
Tangents are great for explorations into unknown topics. That's why I like to browse the QA section. I learn something new everyday.
Great codes here. So much to digest.
A waveform is a continuously changing variable over time.
Maybe what you want is just a static plot of an n-multiple period of that variable? Not an animation but an interactive graph?

Answer 8

Bob_Li
Some months ago I was using the rose curve for audio in Csound so I plotted it (see link). Playing variable a or manually adjusting the slider controls how many "petals" the rose has.

So it seemed intuitive to me to control that var (n in Mirielles's code) with a sine wave: the amplitude of the sine animating the number of petals and the frequency obviously affecting how quickly they animate. In other words I wanted exactly what you wrote: a continuously changing variable over time & a highly predictable one which is exactly what a sine wave is (and it's not necessarily linear ; if I wanted that I'd use a triangle waveform).

It's still something I'd like to experiment with but for now my first little test doing both the audio & visuals using the rose curve (equation, formulae, however it's described) is done and posted on YouTube.

I'll probably post a link to it using an HTML page in code bits later then I'll update the discussion. https://www.desmos.com/calculator/mpuoy2hn3y

Answer 9

Lisa
Ok, so here's the perfect example, this is what I'd like to do. Let's look at Mirielle's wonderful Maurer's Rose code. If I wanted to animate the d and/or n variables how could that be done?

In this context everything is already setup. The variables are there as well as requestAnimationFrame. There are even a sin & cos function already created.

But I'm too inexperienced to put 2 & 2 together (I'm just learning basic JS right now but learn better by working on examples) so any help would be appreciated.

Of course I could always ask her directly but don't like imposing on people.
https://code.sololearn.com/WItxaeFaz8sB/?ref=app

Answer 10

Lisa
I checked out your code, I copied it to study as there are some things I might learn from it.

I'm lucky in that department, I'm big into Csound and they have developed some powerful web tools (APIs etc.) to allow users to create custom web pages that incorporate python, js & Csound (among other things) that can be interactive sites. Many of the forum members are very talented, some are also the code developers, so I can get quite a bit of support where the js audio context stuff is concerned. But I have little use for js as an actual sound source, more as the bridge between Csound and HTML. Csound is infinitely more powerful than js in terms of audio capabilities.

Although, I have seen some pretty impressive audio visual pages that use js, some using Strudel as well I believe. I'll try to dig those out.

Here's an example that uses Csound (not mine, it was created by Michael Gogins):
https://gogins.github.io/cloud-music/scale_example_4.html

Answer 11

I assume Mirielle will find your thread and say a few things about the animation. :)

The animation loop is the function starting in line 13, animate(). There is another function it, loop().

If we focus on loop(), we notice that the function itself is passed to requestAnimationFrame. The basic idea of a animation-loop is making requestAnimationFrame call itself recursively. And in this recursion we can controll the animation values, e.g. size or n.

Answer 12

In case you are interested: The Game Development with JS course introduces a very basic game loop on the 3rd chapter of the course.

Answer 13

Scott D if your goal is to update a variable "smoothly" over time, you can use setinterval or settimeout or requestanimationframe, the but none of these are percise, using requestanimationframe provides a best resolution of fixed 60Hz but in action it is anywhere between 0 to 60. so using these to update a time relevant var isn't wise because of stablilty, therefore "not smooth in time domain" test your device perfomance on: https://www.testufo.com/animation-time-graph
perhaps Mirielle and Lisa forgot to mention that requestanimationframe and setinterval/timeout will not even getting executed once page is on background (another tab is showing on the browser) so you won't get any updates. Using the date in a loop provides best resolution in time. also you can use date via webworkers so most browsers keep running the code even on bg.
Also whenever it's possible calc the values beforehand then update with the method of your choice. if your var isn't time dependent ig Mirielle had the answer.

Answer 14

You can use Date() for handling updates in requestAnimationFrame as well, if you like. They aren't exclusive.

As all execution is always limited by frame rate – even in loops – some frequencies cannot be displayed precisely. Especially not on web browsers. If timing is the most relevant, Javascript and web might not be the first choice.

For most animations, putting everything in a single loop is not what you want to do, I guess.

edit:
Is this the approach you had in mind, Tina?
https://gist.github.com/simonghales/3bf189c97f0a0fea2f028566c45ce414

Answer 15

maybe you can reverse engineer this:
oscilloscope with javascript:

I copy-pasted the codepen code so you can play with it here in Sololearn. But check the link because it's a good tutorial.

https://davidmatthew.ie/creating-an-oscilloscope-with-javascript/
https://code.sololearn.com/WqW6uHkmLBOE/?ref=app

Answer 16

Mirielle I'll be so glad to see your implementations. 🙂 but let's clear out some confusions.
First you say:
"requestAnimationFrame and delta time is 100% accurate"
then:
"Delta time is 100% correct. well with 0.02 statistical error"
So how much they are accurate? 100%? 98%? 90%? design-dependent? (a detla time that incorporates Date.now() can jump forward or even backwards due to NTP adjustments).
and in case of rAF, it's influenced from a clock and Vsync signal.
I don't care if it's 10fps or 60, as long as it's constant, I'm concerned about fluctuations over time, that is getting 23 callbacks from t=0 to t+1s, 60 callbacks in t+1s to t+2s and so on...
Thanks for your attention.

Answer 17

rose curve ...
perhaps it's lissajous curve you're looking for?
yes, the desmos plotter is very convenient.🤓

https://www.chebfun.org/examples/geom/RoseCurves.html

https://en.wikipedia.org/wiki/Lissajous_curve

Answer 18

The video, if anyone's curious. You can access YouTube directly from the embedded link (probably looks & sounds a little better on a TV or larger screens than a phone.)
https://www.sololearn.com/post/1724804/?ref=app

Answer 19

Lisa
Yes, hopefully she'll chime in. Meanwhile, I'm starting to get the idea although it's still a little over my head in terms of having better control to achieve the results I want. But here's an example, I moved n (essentially the amount of rose petals) inside the loop.
https://code.sololearn.com/WDZ1fZJFvSFJ/?ref=app

Answer 20

Mirielle
Thanks, some great information here and thank you for the example. It will take a little while to digest but should be fun! I appreciate the help.