Canvas Play 01: Trigonometric Functions

After my previous simple demo, I wanted to display more than one item at once and create a few classes that I can easily re-use in other experiments. I had recently seen Aral Balkan’s shot on Dribbble and was inspired to play with some Trigonometric functions, i.e. Math.sin and Math.cos. You can see the demo by clicking the image below. This is quite a jump from the last post, but hopefully it makes sense!

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

The getCircle function creates a DisplayContainer and adds two Circles to it. A DisplayContainer is simply a container that allows you to add things to it, you can then control the alpha and position of the container and it’ll effect the items it contains. The getCircle function is used in the for loop to create the circle that’s placed on the canvas. I’ve wrapped the canvas in a CanvasController, when the CanvasController is created we pass reference to the canvas it needs to control. The CanvasController, like the DisplayContainer, allows you to add children to it. The children are drawn to the canvas when the CanvasController is updated, when the update method is called. You can grab the source code from GitHub and have a play.