JavaScript Canvas Animation
I guess I'm just assuming that it's inefficient because it makes my macbook's fans spin up after maybe 10 seconds


That's not really a good measure of "efficiency". The browser is trying to render 60 frames per second. That's a frame every ~16ms. Of course that's going to cause your processor to churn.

Math.floor(i+Math.sin(t/10)*10)


You can use &lt;number&gt; | 0 to trim off the decimal places of your numbers. In some JS engines and certain versions of JS engines, bitwise operations are faster than your regular math functions.

2 * Math.PI


There is a very small penalty when accessing object properties and becomes evident when you use it all over the place. Since Math.PI is a constant value, it wouldn't hurt if you assigned it to a variable for direct access. In fact, 2 * Math.PI is also constant. Why not put the result in a variable and spare the engine a multiplication operation as well.

function animate() {
  ...
  requestAnimationFrame(animate)
}


The issue with depending on just the render loop is the time it takes between updates. requestAnimationFrame can run faster or slower depending on conditions. If your "tweening" is time-sensitive, you might want to update based on delta-time instead.