Trigonometric functions are extremely fun, and this week I want to explore how they can be used to drive interesting motion. In class, we skipped over tan() but I feel that its behaviour is much more interesting than that of sin() or cos() because it quickly goes from -inf to inf. Is this still harmonic?
A trick I learnt from Tim Rodenbröker is to use the frameCount as an input to the wave function, but since frameCount goes up too quickly in a second, converting it to radians() or effectively multiplying it by (TWO_PI/360) gives a smoother motion (by slowing down the input to the trig function).
Single circle with x position driven by tan(radians(frameCount)) * 30; multiplication factor to stretch the wave so that most of the time is spent on screen without going to infinity too quickly.
A grid of circles with tan() influencing both x and y positions at the same time, with an offset for each circle in the grid. The offset makes it feel as if we are stretching a cloth. Here’s my exact code - https://editor.p5js.org/sairamved/sketches/ppFoCmCrF
Although if I wanted smoother motion that does not go off my canvas, I would definitely stick to sin() since it is limited from -1 to 1. Playing with offsets and phase here definitely has potential to produce interesting patterns too.
I’m mapping the output of the sin function from [-1, 1] to a larger space expressed in terms of width, here it is [-width/100, width/100]
https://editor.p5js.org/sairamved/sketches/VPSFSLxUZ
variation on the phase of the wave compared to the output on the left.
So far, I have been drawing my circles in an x,y grid. But what if I switched to polar co-ordinates?
Movement based on tan() with offset - https://editor.p5js.org/sairamved/sketches/RUG6W1vAM
Movement based on sin() with larger phase offset - https://editor.p5js.org/sairamved/sketches/tfKsbZsxB
As mentioned before, when I use sin(), I have to map the values to something that’s visible on screen. Since tan() is already visible (due to its -inf to inf range), I was not mapping it so far. But what if I did - the following is the same sketch as my top-left one but here, I’ve mapped tan() from [-1, 1] to go between [-margin/5, margin/5]. So what’s happening here, is the tan() function only being mapped when it returns a value between -1 and 1? Because I can clearly see the circles going to infinity.
.gif)