Learn creative coding writing simple programs

76. Slowly morphing bezier curves

Bezier curves are built using four points. To animate a bezier curve you can animate one or more of those four points. If you use random() the animation will not be smooth, which is sometimes ok. If you prefer a more smooth animation you can use the noise() function. If one of the parameters of the noise() function changes slowly over time you will get slightly different random numbers each time your draw() function is called. We create such a slow changing value by dividing frameCount by a number, for example 100. In that case you get a number that increases 100 times slower than the original frameCount.
One thing to be careful with is that if you divide two integer numbers you get an integer number. For example 9 / 2 is 4, not 4.5. So if you divide frameCount by 100, you will keep getting 0 as a result, then you will get 1 for the next 100 frames, then 2 for the next 100 frames... This is easily solved by making one of the numbers a float. One way of doing that is adding float() around one of those numbers. For example float(9) / 2, or float(frameCount) / 100. But the easier solution is just to add decimals to one of the numbers. For example 9.0 / 2 or frameCount / 100.0. Note the ".0" at the end of the numbers.

Tags: bezier, curve, animation

Code editor

You can make changes to the code below. Then
Below you can ask and answer questions related to this video. If your question is unrelated to the video, please post it at the Processing Forum as I'm unable to help with all of your programs and still have enough free time to eat and sleep :)
comments powered by Disqus