Drawing Shapes

EulerStudio uses three.js under the hood. You can learn how objects are animated in three.js from its documentation. To make an animation you must first write a class which takes a three.js scene, camera, and renderer in its constructor and declare it a default export. To make a shape appear on the canvas, simply add it to the scene.

To make an animation that runs continuously add a loop() method to the class. This method is called on each frame of the animation, usually 60 times per second.

For animations that should run only once create an array of instances of Animation.Animation and write it to this.animations. These animations run consecutively and each one lasts 1 second by default.

There are a number of common animations that are included with EulerStudio. You can see them using the editor's autocomplete menu after typing Animation..