Making waves at TechNoviceTools
It's what we do. When using Processing, we often need things that 'oscillate' and sinusoids help us do just that!
Experiment with the settings to hand-craft a wave that can do your bidding. Use the green buttons to see what the wave looks like when its moving!
It helps if you know some trigonmetry...
...but even if you don't you can probably infer a lot about the settings to grasp more than you think you might. See your friendly neighborhood math teacher if you need additional explanations.
Processing makes it super-easy to rotate the image by utilizing 'push' and 'pop' commands.
As you play with the settings, the equation of the waveforms updates below the picture. Notice that the overall 'phase shift' of the wave is the sum of the x0 and the phase shift, d.
The wave is created by creating a series of points in a loop and connecting them. Play with the 'Num pts' slider to see what happens with fine or coarse 'digitization.'
The TNTSinusoid is a member of the JSGS Shapes library, and you can see how its been utilized by our novices when making their artwork.
Of course, a sinusoid is related to the infamous 'Unit Circle.' To see that relationship, check out our Sinusoid legacy app from an earlier stage of evolution of TNT.
Don't forget you can 'mess with' TNTStroke values (hue and thickness) that are housed in the drop-down region of the control panel.
This app was lovingly based on OOP: Object Oriented Programming and classes were utilized to pull of the software architecture. Be sure to examine the source code to see how the classes were structured.
Where is this used?
At TNT we often like to make things 'breathe,' meaning they can grow and shrink rhythmically. Recently we wrote Sunshine Day, where a sun-type image grows/shrinks cyclically. Yes, sinusoids do that!
In fact, the SWSinusoid class in our SketchWaveJS library models sinusoidal motion and can be used to drive the height of a bouncing ball, for example. Check out the SWSinusoid Motion Demo to see it in action!
...loading...
Click canvas to start/pause/continue
y = f(x) =