Tutoriel : Piloter canvas avec KineticJS

function getRandom() {
	if(Math.random() > .5) return 1; else return -1;
}
function getPos(val, maxi) {
	if(val < 20) return (val + 20);
	if(val > maxi - 20) return (val - 20);
	return val + 20 * getRandom();	
}
window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	
	var Disque = new Kinetic.Ellipse({
	  x: 250,
	  y: 150,
	  radius: 20,
	  fill: "red"
	});
		
	var Texte = new Kinetic.Text({
	  y: 10,
	  text: "Attrapez le disque !",
	  fontSize: 14,
	  fontFamily: "verdana",
	  fill: "grey",
	  lineHeight: 2,
	  width: 480,
	  align: "center"
	});
	
	Disque.on("mousemove", function() {
		Texte.hide();
		Disque.setX(getPos(Disque.getX(), 500));
		Disque.setY(getPos(Disque.getY(), 300));
		calque.draw();
	});
	
	calque.add(Disque);
	calque.add(Texte);
	scène.add(calque);
};

J'ai choisi l'événement mousemove qui me paraît adapté, je vous laisse analyser le code.

function getRandom() {
	if(Math.random() > .5) return 1; else return -1;
}
function getPos(val, maxi) {
	if(val < 20) return (val + 20);
	if(val > maxi - 20) return (val - 20);
	return val + 20 * getRandom();	
}
function getPosBis(val, ref, maxi) {
	if(val < 20) return (val + 20);
	if(val > maxi - 20) return (val - 20);
	if(ref - val > 0) return val - 20;
	else return val + 20;	
}
function testGain(x, y) {
	return (Math.abs(x - 75) < 20) && (Math.abs(y - 75) < 20);
}
window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	
	var Rectangle = new Kinetic.Rect({
	  x: 40,
	  y: 40,
	  width: 70,
	  height: 70,
	  stroke: "black",
	  strokeWidth: 4
	});
	
	var Disque = new Kinetic.Ellipse({
	  x: 250,
	  y: 150,
	  radius: 20,
	  fill: "red"
	});
		
	var Texte = new Kinetic.Text({
	  y: 10,
	  text: "Poussez le disque dans le carré !",
	  fontSize: 14,
	  fontFamily: "verdana",
	  fill: "grey",
	  lineHeight: 2,
	  width: 480,
	  align: "center"
	});
	
	Disque.on("mousemove", function() {
		Texte.hide();
		var mousePos = scène.getMousePosition();
		if(Math.random() < .5) {
			Disque.setX(getPos(Disque.getX(), 500));
			Disque.setY(getPos(Disque.getY(), 300));
		}
		else {
			Disque.setX(getPosBis(Disque.getX(), mousePos.x, 500));
			Disque.setY(getPosBis(Disque.getY(), mousePos.y, 300));			
		}
		if(testGain(Disque.getX(), Disque.getY())) {
			Texte.setText("Bravo vous avez gagné !");
			Texte.show();
			Disque.setX(75);
			Disque.setY(75);
			Disque.off("mousemove");
		}
		calque.draw();
	});
	
	calque.add(Rectangle);
	calque.add(Disque);
	calque.add(Texte);
	scène.add(calque);
};

Je n'ai pas particulièrement cherché à optimiser le code, le but n'est pas un exercice de style de Javascript mais de manipuler les objets de KineticJS. J'ai créé quelques sautes d'humeur aléatoires pour le déplacement du disque pour corser un peu le jeu.

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	
	var Rectangle = new Kinetic.Rect({
	  width: scène.getWidth(),
	  height: scène.getHeight(),
	  fill: "#ade",
	});
		
	var Tooltip = new Kinetic.Text({
		text: "",
		textFill: "yellow",
		fontFamily: "Arial",
		fontSize: 10,
		padding: 4,
		fill: "grey",
		opacity: 0.9,
		shadow: {
			color: "grey",
			blur: 14,
			offset: [2, 2],
			opacity: 0.7
		},
		visible: false
	});
	
	scène.on("mousemove", function() {
		var mousePos = scène.getMousePosition();
		var x = mousePos.x;
		var y = mousePos.y;
		var text = "X = " + x + " Y = " + y;
		if(x > 400) x = 400;
		if(y > 280) y = 280;
		with(Tooltip) {
			show();
			setPosition(x, y);
			setText(text);
		}
		calque.draw();
	});
	
	scène.on("mouseout", function() {
		Tooltip.hide();
		calque.draw();
	});
	
	calque.add(Rectangle);
	calque.add(Tooltip);
	scène.add(calque);
};

Les sprites

Les sprites sont des images d'une animation regroupées sur une seule image.

Le principe des sprites

Voici le sprite qui va nous servir pour les exemples (recueilli sur ce blog) :

Il est composé de 6 images, chacune étant une étape de l'animation. La lecture normale des images se fait en partant de la première en haut à gauche et en se déplaçant ensuite vers la droite et ainsi de suite :

Animation d'un sprite

C'est la classe Sprite qui nous permet d’animer des sprites. Son constructeur attend un positionnement, une image, des animations et éventuellement une vitesse. Voici le code pour mettre en mouvement la petite taupe :

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	
	var animations = {
	  sortie: [{
		x: 10,
		y: 8,
		width: 158,
		height: 130
	  }, {
		x: 175,
		y: 8,
		width: 158,
		height: 130
	  }, {
		x: 340,
		y: 8,
		width: 158,
		height: 130
	  }, {
		x: 340,
		y: 145,
		width: 158,
		height: 130
	  }, {
		x: 175,
		y: 145,
		width: 158,
		height: 130
	  }, {
		x: 10,
		y: 145,
		width: 158,
		height: 130
	  }]
	};
	
	var imageObj = new Image();
	imageObj.onload = function() {
	  var animal = new Kinetic.Sprite({
		x: 50,
		y: 50,
		image: imageObj,
		animation: "sortie",
		animations: animations,
		frameRate: 4
	  });
	
	  calque.add(animal);
	  scène.add(calque);
	  animal.start();
	  
	};
	imageObj.src = "images/gopher.jpg";
};

Tester !

Regardons la partie animation. On crée un objet animations qui contient une seule propriété (sortie) qui est en fait le nom d'une animation. Celle-ci est composée d'un tableau d'objets dont chacun est constitué de 4 propriétés :

Vous avez compris qu'il faut donc connaître l'organisation de l'image. En particulier il faut absolument que les images élémentaires soient uniformément réparties pour éviter des prises de tête sur la détermination des valeurs. En voici quelques-unes reportées sur le sprite :

C'est une méthode efficace, mais un peu laborieuse. On se rend compte de la répétition des largeurs et hauteurs et aussi de la répartition harmonieuse. On peut donc améliorer notre script en évitant toutes ces répétitions aussi pénibles qu'inesthétiques.

Où on améliore notre script

L'amélioration consiste essentiellement à optimiser la création du tableau des animations :

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();	

	// Génération des frames
	function frames(base_x, base_y, offset_x, offset_y, nbr_x, nbr_y, width, height) {
		var frames_tab = new Array();
		for(var i = 0; i < nbr_x * nbr_y; ++i) {
			frames_tab.push({
				x: base_x + offset_x * ((i + nbr_x) % nbr_x),
				y: base_y + offset_y * parseInt(i / nbr_x),
				width: width,
				height: height
			});
		}
		return frames_tab;
	}
	
	// Animations
	var animations = {
	  sortie: frames(10, 8, 165, 137, 3, 2, 158, 130)
	};
	
	// Image
	var imageObj = new Image();
	imageObj.onload = function() {
	  var animal = new Kinetic.Sprite({
		x: 50,
		y: 50,
		image: imageObj,
		animation: "sortie",
		animations: animations,
		frameRate: 4
	  });
	
	  calque.add(animal);
	  scène.add(calque);
	  animal.start();
	  
	};
	imageObj.src = "images/gopher.jpg";
};

Tester !

Une fonction frames est chargée de faire le calcul du positionnement des images élémentaires. Elle attend 6 paramètres dont voici une visualisation :

C'est déjà moins prise de tête pour constituer une animation :p .

Plusieurs animations

Jusque-là, nous nous sommes contentés de créer une seule animation avec toutes les images prévues dans l'ordre. On pourrait aussi avoir envie de créer des animations avec certaines images à chaque fois, et pas forcément dans l'ordre. Notre code alors ne convient plus et il nous faut le rendre plus générique. Voici un exemple avec deux animations déclenchées par des boutons :

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();	

	// Génération d'une frame
	function frame(id, base_x, base_y, offset_x, offset_y, nbr_x, width, height) {
		return {
					x: base_x + offset_x * ((id + nbr_x) % nbr_x),
					y: base_y + offset_y * parseInt(id / nbr_x),
					width: width,
					height: height
			   };
	}	
	
	// Génération des frames
	function frames(ids, base_x, base_y, offset_x, offset_y, nbr_x, nbr_y, width, height) {
		var frames_tab = new Array();
		for(var i = 0; i < ids.length; ++i) 
			frames_tab.push(frame(ids[i], base_x, base_y, offset_x, offset_y, nbr_x, width, height));
		return frames_tab;
	}
	
	// Animations
	var animations = {
	  sortie: frames([0,1,2], 10, 8, 165, 137, 3, 2, 158, 130),
	  veille: frames([3,4,5,4], 10, 8, 165, 137, 3, 2, 158, 130)
	};
	
	// Image
	var imageObj = new Image();
	imageObj.onload = function() {
		var animal = new Kinetic.Sprite({
			x: 50,
			y: 50,
			image: imageObj,
			animation: "sortie",
			animations: animations,
			frameRate: 4
		});
		
		calque.add(animal);
		scène.add(calque);
		// Sortie initiale
		animal.afterFrame(2, function() {
        	animal.stop();
        });
		animal.start();
		
		// Commandes
		document.getElementById("sortie").addEventListener("click", function() {
			if(animal.getAnimation() != "sortie") {
				animal.stop();
				animal.setAnimation("sortie");
				animal.start();
				animal.afterFrame(2, function() {
              		             animal.stop();
            	                });
			}
		}, false);
		document.getElementById("veille").addEventListener("click", function() {
			if(animal.getAnimation() != "veille") {
				animal.stop();
				animal.setAnimation("veille");
				animal.start();
				animal.afterFrame(5, function() {
              		             animal.stop();
            	                });
			}
		}, false);	  
	};
	imageObj.src = "images/gopher.jpg";
};

Tester !

Le code devient un peu plus lourd. Remarquez déjà les deux méthodes start et stop pour démarrer et arrêter l'animation. Remarquez également l'événement afterFrame qui permet d’exécuter du code après une certaine image. J'ai utilisé également la méthode setAnimation qui affecte l'animation en cours avec son nom.

Mais c'est surtout la fonction frames qui a été chamboulée. Maintenant elle attend non seulement les paramètres de positionnement et dimension des images, mais également un tableau des index des images composant l'animation dans l'ordre. Du coup l'écriture du code des animations devient un jeu d'enfant :

var animations = {
    sortie: frames([0,1,2], 10, 8, 165, 137, 3, 2, 158, 130),
    veille: frames([3,4,5,4], 10, 8, 165, 137, 3, 2, 158, 130)
};

On se contente d'envoyer un tableau avec les index des images que l'on veut :) .

TP

Maintenant vous êtes prêts à faire un petit TP dans la lignée des scripts précédents. Cette fois on désire 3 animations : une pour la sortie de la taupe, une pour la faire regarder autour d'elle, et enfin une dernière pour qu'elle retourne dans son trou. On utilise trois boutons qui ne doivent apparaître que lorsqu'ils sont utiles. Voici l'exemple traité qui sera beaucoup mieux que toutes mes explications :

Tester !

Au départ la taupe peut seulement sortir, donc seulement le bouton "Sortie" doit apparaître. Lorsqu'elle est sortie, elle peut alors soit surveiller, soit rentrer, donc les deux autres boutons doivent être affichés. Lorsqu'elle surveille, elle ne peut plus que rentrer... Au niveau du code il vous faut bien gérer l'événement afterFrame pour éviter les surprises.

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();	

	// Génération d'une frame
	function frame(id, base_x, base_y, offset_x, offset_y, nbr_x, width, height) {
		return {
					x: base_x + offset_x * ((id + nbr_x) % nbr_x),
					y: base_y + offset_y * parseInt(id / nbr_x),
					width: width,
					height: height
			   };
	}	
	
	// Génération des frames
	function frames(ids, base_x, base_y, offset_x, offset_y, nbr_x, nbr_y, width, height) {
		var frames_tab = new Array();
		for(var i = 0; i < ids.length; ++i) 
			frames_tab.push(frame(ids[i], base_x, base_y, offset_x, offset_y, nbr_x, width, height));
		return frames_tab;
	}
	
	// Animations
	var animations = {
	  sortie: frames([0,1,2], 10, 8, 165, 137, 3, 2, 158, 130),
	  veille: frames([3,4,5,4], 10, 8, 165, 137, 3, 2, 158, 130),
	  entrée: frames([2,1,0], 10, 8, 165, 137, 3, 2, 158, 130)
	};
	
	// Image
	var imageObj = new Image();
	imageObj.onload = function() {
		var animal = new Kinetic.Sprite({
			x: 50,
			y: 50,
			image: imageObj,
			animation: "sortie",
			animations: animations,
			frameRate: 4
		});
		
		calque.add(animal);
		scène.add(calque);
		
		// Commandes
		document.getElementById("sortie").addEventListener("click", function() {
			set_animation("sortie", 2, "inline", "none", "inline");
		}, false);
		document.getElementById("veille").addEventListener("click", function() {
			set_animation("veille", 5, "none", "none", "inline");
		}, false);	  
		document.getElementById("entrée").addEventListener("click", function() {
			set_animation("entrée", 2, "none", "inline", "none");
		}, false);		
		
		// Gestion de l'animation et des boutons
		function set_animation(animation, index, veille, sortie, entrée) {
			animal.stop();
			animal.setAnimation(animation);
			animal.start();
			animal.afterFrame(index, function() {animal.stop();});
			document.getElementById("veille").style.display=veille;
			document.getElementById("entrée").style.display=entrée;
			document.getElementById("sortie").style.display=sortie;			
		}
	};
	imageObj.src = "images/gopher.jpg";
};

Les animations

Les animations

Nous allons pour terminer aborder les animations libres. C'est sans doute l'aspect le plus créatif de cette librairie, mais en même temps elle va peu nous aider, parce qu'il faut écrire le code pour l'animation, mais elle nous offre une infrastructure performante.

Un exemple simple

Voici un exemple élémentaire avec une balle qui se déplace dans un cadre :

window.onload = function() {
	window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	
	var cadre = new Kinetic.Rect({
      width: 500,
      height: 300,
      stroke:"black",
	  strokeWidth:2
   });
	
	var balle = new Kinetic.Circle({
		x: 200,
		y: 100,
		radius: 20,
		fill: "#6b9"
	});
	
	var deltax = -1;
	var deltay = 2;
	var rayon=balle.getRadius()
	var anim = new Kinetic.Animation(function(frame) {
		if (balle.getX()-rayon < 0 || balle.getX()+rayon > scène.getWidth()){
			deltax=-deltax;
			}
		if (balle.getY()-rayon < 0 || balle.getY()+rayon > scène.getHeight()){
			deltay=-deltay;
			}
		document.getElementById("texte").innerHTML = "x : " + deltax+" y : "+deltay;
		balle.move(deltax, deltay);
}, calque);

anim.start();

	calque.add(cadre);
	calque.add(balle);	
	scène.add(calque);
};

Tester !

Afficher dans une nouvelle page

Masquer

Déplacement sur une ellipse

Dans cet exemple on déplace une balle le long d'une ellipse :

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	var fond = new Kinetic.Layer();
	
	var a = 150;
	var b = 80;
	var centre_x = scène.getWidth() / 2;
	var centre_y = scène.getHeight() / 2;
	
	var balle = new Kinetic.Ellipse({
		radius: 10,
		fill: "red"
	});
	
	var ellipse = new Kinetic.Ellipse({
	  x: centre_x,
	  y: centre_y,
	  radius: [a, b],
	  stroke: "black",
	  strokeWidth: .7
	});

	var anim = new Kinetic.Animation(function(frame) {
		var x = a * Math.cos(frame.time / 2000);
		var y = b * Math.sin (frame.time / 2000); 
		balle.setX(centre_x + x);
		balle.setY(centre_y + y);
		}, calque);

	anim.start();

	calque.add(balle);
	fond.add(ellipse);
	scène.add(fond);
	scène.add(calque);
	
	
};

Tester !

Afficher dans une nouvelle page

Masquer

Nous allons nous intéresser à la vitesse de déplacement de cette balle. Vous remarquez dans le code l'utilisation de la propriété time du paramètre frame. Celui-ci nous donne le temps écoulé depuis le début de l'animation en millisecondes. Il existe une deuxième propriété qui nous donne le temps écoulé depuis le dernier rafraîchissement. Voici ces deux paramètres :

Paramètre	Valeur
time	Temps écoulé depuis le début de l'animation en millisecondes
timeDiff	Temps écoulé depuis le dernier rafraîchissement en millisecondes

Ce sont ces propriétés qui vont nous permettre de gérer efficacement le temps. Voyons cela avec notre balle, voici le code de calcul de la position :

var x = a * Math.cos(frame.time / 2000);
var y = b * Math.sin (frame.time / 2000); 
balle.setX(centre_x + x);
balle.setY(centre_y + y);

On sait que la fonction cosinus de Javascript attend une valeur en radians. Autrement dit un tour complet est effectué quand on passe d'une valeur de 0 à 2 * PI, autrement dit de 0 à 6,28. Comme je divise le temps par 2000 j'ai une progression de 0,5 à chaque seconde, il me faut donc 6,28 / 0,5 = 12,56 secondes pour effectuer un tour complet. A condition évidemment que le rafraîchissement s'effectue à une vitesse suffisante :) . On va d'ailleurs vérifier cela en ajoutant un contrôle du temps :

var anim = new Kinetic.Animation(function(frame) {
	document.getElementById("texte").innerHTML = "Temps écoulé en secondes : " + frame.time / 1000 + "
fps : " + parseInt(1000 / frame.timeDiff);
	var x = a * Math.cos(frame.time / 2000);
	var y = b * Math.sin (frame.time / 2000); 
	balle.setX(centre_x + x);
	balle.setY(centre_y + y);
	}, calque);

Tester !

Afficher dans une nouvelle page

Masquer

J'ai ajouté un <div id="texte"> pour afficher le temps écoulé et le fps (frames par secondes).

Mettre en mouvement plusieurs formes

Un cas simple

Nous avons fait déplacer une balle sur une ellipse, ajoutons maintenant un axe qui s'adapte automatiquement au mouvement :

window.onload = function() {
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	var calque = new Kinetic.Layer();
	var fond = new Kinetic.Layer();
	
	var a = 150;
	var b = 80;
	var centre_x = scène.getWidth() / 2;
	var centre_y = scène.getHeight() / 2;
	
	var axe = new Kinetic.Line({
	  points: [centre_x, centre_y],
	  stroke: "red",
	  strokeWidth: 3,
	  lineCap: "round"
	});
		
	var balle = new Kinetic.Ellipse({
		radius: 10,
		fill: "red"
	});
	
	var ellipse = new Kinetic.Ellipse({
	  x: centre_x,
	  y: centre_y,
	  radius: [a, b],
	  stroke: "black",
	  strokeWidth: .7
	});
			
	var anim = new Kinetic.Animation(function(frame) {
	var x = a * Math.cos(frame.time / 2000);
	var y = b * Math.sin (frame.time / 2000); 
	balle.setX(centre_x + x);
	balle.setY(centre_y + y);
	axe.setPoints([centre_x, centre_y, centre_x + x, centre_y + y]);
	}, calque);

anim.start();

	calque.add(axe);
	calque.add(balle);
	fond.add(ellipse);
	scène.add(fond);
	scène.add(calque);
};

Tester !

Afficher dans une nouvelle page

Masquer

Rien de bien compliqué là-dedans, on gère les deux formes.

TP

Pour faire le point je vous propose un petit TP. Le but est d'obtenir cet effet :

Tester !

Afficher dans une nouvelle page

Masquer

C'est une forme allongée qui va en rétrécissant en formant une queue qui suit une ellipse. Pour constituer ce genre d'effet le plus simple est d'empiler des disque colorés. A vous de jouer ;) .

window.onload = function() {
	// Scène
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
	
	// Constitution du fond dégradé
	var fond = new Kinetic.Layer();
	var rectangle = new Kinetic.Rect({
		width: 500,
		height: 300,
		fillLinearGradientStartPoint:[scène.getWidth() / 2,0],
		fillLinearGradientEndPoint:[scène.getWidth() / 2,scène.getHeight()],
		fillLinearGradientColorStops:[0, "#27f", 1, "#016"]
		});
	fond.add(rectangle);
	
	// Constitution des balles
	var calque = new Kinetic.Layer();
	var a = 150;
	var b = 80;
	var centre_x = scène.getWidth() / 2;
	var centre_y = scène.getHeight() / 2;
	var ball_number = 40;
	var offset = .035;
	var red = 140;
	var green = 50;
	var blue = 70;
	for(var i = 1; i <= ball_number; ++i) {
		var balle = new Kinetic.Ellipse({
			radius: 10,
			fill: "rgb(" + (red + 3 * i) + "," + (green + 3 * i) + "," + (blue + i) + ")",
			opacity: .8 - (i / ball_number) * .8,
			scale: 1 - i / ball_number
		});
		calque.add(balle);
	}
	
	scène.add(fond);
	scène.add(calque);

	// Animation
	var anim = new Kinetic.Animation(function(frame) {
		var balles = calque.getChildren();
		var angle = frame.time / 500;
		for(var i = 0; i < balles.length; ++i) {
				var balle = balles[i];
				var angle_ball = angle - i * offset;
				var x = a * Math.cos(angle_ball);
				var y = b * Math.sin (angle_ball); 
				var posX = centre_x + x;
				var posY = centre_y + y;
				balle.setX(posX);
				balle.setY(posY);
		}
	}, calque);

anim.start();
};

Comme je vous sens encore en forme, on va améliorer l'effet :

Tester !

Afficher dans une nouvelle page

Masquer

Cette fois la forme est plus volumineuse, avec un dégradé, un halo et elle suit un huit (un peu de maths en passant). J'ai aussi ajouté le contrôle du rafraîchissement pour juger les performances de la librairie.

window.onload = function() {
	// Scène
	var scène = new Kinetic.Stage({
	  container: "kinetic",
	  width: 500,
	  height: 300
	});
		
	// Constitution du fond dégradé
	// Constitution du fond dégradé
	var fond = new Kinetic.Layer();
	var calque = new Kinetic.Layer();
	var rectangle = new Kinetic.Rect({
		width: 500,
		height: 300,
		fillLinearGradientStartPoint:[scène.getWidth() / 2,0],
		fillLinearGradientEndPoint:[scène.getWidth() / 2,scène.getHeight()],
		fillLinearGradientColorStops:[0, "#27f", 1, "#016"]
		});
	fond.add(rectangle);
		
	// Constitution des balles
	var calque = new Kinetic.Layer();
	var a = 150;
	var b = 80;
	var centre_x = scène.getWidth() / 2;
	var centre_y = scène.getHeight() / 2;
	var ball_number = 40;
	var offset = .03;
	// Halo
	for(var i = 1; i <= ball_number; ++i) {
		var balle = new Kinetic.Ellipse({
			radius: 20,
			fill: "yellow",
			opacity: .04,
			scale: (1 - i / ball_number) + .4
		});
		calque.add(balle);
	}
	// Corps
	for(var i = 1; i <= ball_number; ++i) {
		var balle = new Kinetic.Ellipse({
			radius: 20,
			fillRadialGradientStartPoint:[0,0],
			fillRadialGradientEndPoint:[0,0],
			fillRadialGradientStartRadius:3,
			fillRadialGradientEndRadius:20,
			fillRadialGradientColorStops:[.6, "red", .8, "#cc2"],
			opacity: .8 - (i / ball_number) * .8,
			scale: 1 - i / ball_number
		});
		calque.add(balle);
	}
	
	scène.add(fond);
	scène.add(calque);

	// Animation
	var k = 2;
	
	var anim = new Kinetic.Animation(function(frame) {
		var balles = calque.getChildren();
		var angle = frame.time / 500;
		for(var i = 0; i < balles.length / 2; ++i) {
				var balle1 = balles[i];
				var balle2 = balles[i + balles.length / 2];
				var angle_ball = angle - i * offset;
				var x = a * Math.cos(angle_ball);
				var y = b * Math.sin (k * angle_ball); 
				var posX = centre_x + x;
				var posY = centre_y + y;
				balle1.setX(posX);
				balle1.setY(posY);
				balle2.setX(posX);
				balle2.setY(posY);
		}
	}, calque);

anim.start();
	
};

Nous voici arrivés au bout de ce cours. Je suis loin d'avoir été exhaustif, mais vous avez déjà les bases pour créer de belles choses.