Astronaute Engine

INTRODUCTION

Astronaute Engine, as its "Frenglish" name which does not mean anything does not indicate it, is an animation engine for HTML canvas written in pure Javascript by Christophe Leblanc in 2018. It is autonomous and does not depend on any external library. It is also simple, easily programmable, and therefore easily adaptable and scalable.

It was born from the idea of animating a small astronaut designed by my sister and make a small demonstration of my skills in Javascript in end of 2017/ early 2018.

Astronaut Engine allows you to program different sequences of different types of animations (for example: move, rotate, resize). Everything can be started automatically (programmed) or by external events (a mouse click or any DOM event).

It is coded according to an architecture quite classic: A main loop, a scene manager, a display manager and a sequencer.

Developer: Christophe Leblanc.

Link: astronaute_engine.js

Demos:

An astronaut in space

A bubble machine

Examples of use:

//Instanciate the engine
var engine = new AstronauteEngine(canvas, width, height, update);

//Instanciate a scene
var scene = new AstronauteEngine.Scene();

//Root node recovery
var root = scene.getRoot();

//Add an image in the engine
var image = new AstronauteEngine.NodeImage("Object", "object.jpg");
root.appendChild(image);

//Instanciate an animation sequence
var sequence = new AstronauteEngine.Sequence();

//Add an animation type "Translation"
var animation = new AstronauteEngine.AnimatedTranslation(image, startTime, endTime, startX, startY, endX, endY, loop);
sequence.addAnimation(animation);

//Start a sequence
sequence.start();

//Repeat a sequence at a given time
sequence.loopAt(loopTime);

//Stop a sequence at a given time
sequence.finishAt(endTime);

//Load a scene
engine.loadScene(scene);

//Start running the sequencer
engine.sequencer.start();

N. view:

This document by Christophe Leblanc is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.