Aller au contenu | Aller au menu | Aller à la recherche

Thursday 17 February 2011

Flocking letters

Mes premiers pas en HTML5 / javascript !

Animation simulant les vols d'oiseaux (flocking bird) décrits par Craig Reynold.
L'animation est largement inspiré de la version as3 de soulwire.



Pour la suite, j'essayerai de rajouter une 3e dimension, la notion d'obstacle, de prédateur et sans doute une relecture de certains comportements qui me semblent erratiques.
Une version java reprend ces derniers points ici.

voir l'animation

Sunday 17 October 2010

Comment utiliser Dropbox et GIT comme solution de sauvegarde de vos fichiers

Après un énorme plantage de CS5, un fichier .fla corrompu, de grosses gouttes de sueur et une soirée de déprime à reconstituer un fichier, je me suis demandé si je ne pouvais pas trouver une solution de gestion de versions comme système de sauvegarde. Après quelques recherches, j'ai trouvé de nombreux tutoriaux combinant GIT et Dropbox qui me semblent tout à fait adapté à cet effet.

Quelques notes lors de l'installation de GIT et son utilisation sur mon mac osX 10.5.8 :

Installation de GIT et GITX expérimental

installer git-1.7.3.1-intel-leopard.dmg
http://code.google.com/p/git-osx-installer/downloads/list?can=3

puis dans l'ordre :
- éxécuter setup git PATH for non-terminal programs.sh qui est dans le dmg de git

Suite à mon configuration il fallait que j'installe activeTcl pour que GIT X marche :
- télécharger et installer ActiveTcl8.5.9.0.293667-macosx-universal-threaded.dmg qui se trouve http://www.activestate.com/activetcl

- télécharger gitX Experimental GitX fork de Brotherbards :
http://brotherbard.com/blog/2010/03/experimental-gitx-fork/


GITX Experimental


GIT GUI (inclus avec GIT)

Création de son répertoire de sauvegarde (remote) sur Dropbox

on crée le répertoire du projet et le repertoire .git :
aller dans le repertoire de destination dans Dropbox
mkdir -p nomDuBoulot/nomQuelconque.git

intialiser le repertoire :
aller dans le nouveau repertoire (ici nomQuelconque)
git --bare init

Relier le serveur distant au local
1 - aller au repertoire contenant le projet
cd /Users/tran/Documents/bla bla bla/fla/src

2 - créer le lien en créant par la même le nom de la branche
(dans l'exemple on crée la branche backup)
git remote add backup /Dropbox/backup/nomDuBoulot/nomQuelconque.git/

copier le contenu :
git push backup master

Un guide pas à pas illustré avec beaucoup de captures d'écran pour utiliser GIT GUI
nathanj.github.com/gitguide/tour.html

La ligne de commande reste inévitable pour créer ses dossiers GIT, mais pour les commit et la synchronisation, j'utilise GIT X ou GIT GUI (cf captures plus haut) qui sont très simples.


Wednesday 13 October 2010

Récupérer les dimensions de la page html à partir de flash

Pour écrire et exécuter une fonction javascript il suffit d'écrire la fonction en utilisant la classe ExternalInterface :

ExternalInterface.call("function() {alert('hello world');}");

Pour récupérer les dimensions de la page html il sufffit donc d'écrire :
var availHeight:int = ExternalInterface.call("
	function(){ 
		return window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
	}");

var availWidth:int = ExternalInterface.call("	
	function(){ 
		return window.innerWidth? window.innerWidth : (document.documentElement.clientWidth? document.documentElement.clientWidth : document.body.clientWidth); 
	}");


Tuesday 8 June 2010

as3dmod,

Un test utilisant les "modifiers" (je ne sais pas comment ça se dit en français) cloth et twist de la bibliothèque as3mod.




La classe :
package {
	
	import caurina.transitions.Tweener;
	
	import com.as3dmod.ModifierStack;
	import com.as3dmod.modifiers.Cloth;
	import com.as3dmod.modifiers.Twist;
	import com.as3dmod.plugins.pv3d.LibraryPv3d;
	
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.getDefinitionByName;
	
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Cylinder;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	
	public class ClothEffect extends Sprite {

		private var _view:Viewport3D;
		private var _camera:Camera3D;
		private var _scene:Scene3D;
		private var _renderer:BasicRenderEngine;
		private var _flag:DisplayObject3D;
		private var _modifierStack:ModifierStack;
		private var _cloth:Cloth;
		private var _twist:Twist;
		private var _wind:Number=2;
		private var _windDirection:Number=1;
		private var _windVariation:Number=2;
		private var _background:Class;
		private var _flagAsset:BitmapData;
		private var _woodAsset:BitmapData;

		private var _angle:Number = 3;

		public function ClothEffect():void {

			// initialize libraries
			initPV3D();
			initAS3DMod();

			addEventListener(Event.ENTER_FRAME, handleEnterFrame);

			tweenA();
		}



		private function initPV3D():void {

			var bmp:BitmapData;
			var material:BitmapMaterial;
			var pole:Cylinder;

			// create basic scene setup
			_scene=new Scene3D();
			_view=new Viewport3D(800, 600);
			//_view.y=-100;
			_renderer=new BasicRenderEngine();
			_camera=new Camera3D();
			_camera.zoom = 90;
			
			// create the flag
			var classRef2:Class=getDefinitionByName("Flag") as Class;
			_flagAsset=new classRef2(600, 400);

			bmp=_flagAsset;
			material=new BitmapMaterial(bmp);
			_flag=new Plane(material, 500, 400, 15, 20);
			_flag.material.doubleSided=true;
			_scene.addChild(_flag);

			_camera.target=_flag;

			addChild(_view);
		}



		private function initAS3DMod():void {

			// create the modifier stack and assing it to the flag

			_modifierStack=new ModifierStack(new LibraryPv3d(), _flag);
			_cloth=new Cloth();
			_modifierStack.addModifier(_cloth);
			_twist = new Twist();
			_modifierStack.addModifier(_twist);

			// sets the left side of the flag as immobile
			_cloth.lockXMax(20);
			_cloth.lockXMin(0);
			_cloth.lockYMax(20);
			_cloth.lockYMin(0);
		}

		private function tweenA():void {
			
			var X:Number = Math.sin(_windDirection) * _wind - Math.random() * _windVariation;
			var Z:Number = Math.cos(_windDirection) * _wind - Math.random() * _windVariation;
			
			var rX:Number = Math.random() *  (400);
			var rY:Number = Math.random() * (400);
			var rZ:Number = Math.random() * (400);
			var rYY:Number = Math.random() * (45);
			
			_angle = (_angle == 30 ? -30 : 30); 
			
			Tweener.addTween(_twist, {angle:_angle, time:2, transition:"easeInOutElastic"});
			Tweener.addTween(_flag, {rotationY:rYY, x:rX, y:rY, z:rZ, time:2, transition:"easeInOutElastic", onComplete:tweenC});
			Tweener.addTween(_cloth, {forceX:X, forceZ:Z, time:2, transition:"easeInOutElastic"});
			
		}
		
		private function tweenC():void {
			//trace("tweenC");
			
			var rX:Number = Math.random() *  (-400);
			var rY:Number = Math.random() * (-400);
			var rZ:Number = Math.random() * (-400);
			var rYY:Number = Math.random() * (45);
			
			Tweener.addTween(_twist, {angle:0, time:2, transition:"easeInOutElastic"});
			Tweener.addTween(_flag, {rotationY:rYY, x:rX, y:rY, z:rZ, time:2, transition:"easeInOutElastic", onComplete:tweenA});
		}

		private function handleEnterFrame(event:Event):void {
			
			var halfW:Number=stage.stageWidth * .5,
				halfH:Number=stage.stageHeight * .5;
		
			var cameraAngle:Number=(0.1 + mouseX / halfW - halfW) * 1.3;
			
			// applies the modifier and updates the cloth simulation
			_modifierStack.apply();
			
			// render the scene
			_renderer.renderScene(_scene, _camera, _view);
		}
	}
}

Sunday 9 May 2010

La perspective 3D et flash

La 3D dans flash fausse complètement les mesures si l'axe Z est à 0 :
trace (toto.height);	// output 70.5
toto.rotationY = -180;
trace(toto.height);	// output 72
toto.rotationY = 0;
trace(toto.height);	// output 72