Cyril Pereira

Sherlock

Cyril — Fri, 09 Dec 2011 14:38:17 +0000

Projet : Sherlock
Agence : GlamRock

Actionscript
XML

Thêatre pam

Cyril — Fri, 09 Sep 2011 14:44:10 +0000

Projet : Thêatre PAM
Agence : GlamRock

Html
Php
MySQL
Twitter Bootstrap
JQuery

I love mobilite

Cyril — Tue, 09 Aug 2011 14:29:53 +0000

Projet : ilovemobilite.ch
Url : http://www.ilovemobilite.ch
Agence : GlamRock

Kohana
PHP
MYSQL

Site esede.ch

Cyril — Thu, 14 Jul 2011 12:07:51 +0000

Projet : esede.ch
Url : http://www.esede.ch
Agence : GlamRock

Kohana
PHP
MYSQL

1er essai en WebGL avec three.js

Cyril — Thu, 14 Jul 2011 12:04:02 +0000

1er essai en WebGL avec three.js

CDROM Belin 2011

Cyril — Mon, 07 Mar 2011 10:57:04 +0000

Projet : CDROM Belin 2011
Agence : Fake

universalpictures-films.fr

Cyril — Thu, 03 Feb 2011 15:14:09 +0000

Projet : universalpictures-film.fr
Url : http://www.universalpictures-film.fr/
Agence : SixDegrees

JAVASCRIPT
CSS
Node.JS

Away3D AS3 – tutorial rapide

Cyril — Mon, 31 Jan 2011 09:27:24 +0000

Petit test d’animation et de manipulation de camera avec Away3D

Ouvrir dans une nouvelle fenetre

Voici les class à importer pour initialiser le projet, HoverCamera3D pour manipuler la camera, View3D pour le viewport, ColorMaterial pour appliquer le material sur les meshes, Torus pour le mesh du torus, Trident pour le mesh du trident affichant le sens de la scene 3D, DirectionalLight3D pour la lumiére, ShadingColorMaterial pour la type de rendu.

import away3d.cameras.HoverCamera3D;
import away3d.containers.View3D;
import away3d.materials.ColorMaterial;
import away3d.primitives.Torus; 
import away3d.primitives.Trident;
import away3d.core.render.Renderer;
import away3d.lights.DirectionalLight3D;
import away3d.materials.ShadingColorMaterial;

Ensuite voici la liste des class de base a importer. Vectore3D pour definir des positions avec les coordonnées XYZ, Sprite pour flashdevelop, StageAlin et StageScaleMode pour le liquid layout, Event et MouseEvent pour recuperer la souris pour la camera.

import flash.geom.Vector3D;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;

Je ne vais pas vous lister l’integralité du source, mais en gros mon experience consistait à initialiser une vie, manipuler une camera a la souris, afficher des meshes et les animer.

L’affichage final se fait ainsi

public function onEnterFrame(e:Event):void
{	
  updateStage();
  hoverCam();
  updateAnimation();
  view.render();
}

updateStage met à jour la vue flash en liquid layout. Pour cela il faut ajouter ces 2 lignes dans le main.

38
39

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;

Ensuite la methode updateStage met à jour la vue à chaque cycle.

private function updateStage():void
{
  view.x = stage.width / 2;
  view.y = stage.height / 2;
}

La methode hoverCam va nous permettre de recuperer l’evenement de la souris pour manipuler la camera.

private function hoverCam():void
{
  var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.
  if (move) {
      camera.panAngle = cameraSpeed * (stage.mouseX - lastMouseX) + lastPanAngle;				
      camera.tiltAngle = cameraSpeed * (stage.mouseY - lastMouseY) + lastTiltAngle;
 
  }
  camera.hover();
}

On constate l’utilisation de certaines variable. Celles ci sont récupérées par un event mis dans le main qui update des varibles precise.

84
85

this.stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
this.stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

private function MouseDown(event:MouseEvent):void
{
  lastPanAngle 	= camera.panAngle;
  lastTiltAngle 	= camera.tiltAngle;
  lastMouseX 		= stage.mouseX;
  lastMouseY 		= stage.mouseY;
  move 			= true;
}
 
private function MouseUp(event:MouseEvent):void
{
  move = false;
}

updateAnimation va nous permettre d’animer tout les torus dans la scene. Pour cela à la création des torus je les ais pushé dans une variable qui va me permettre d’y avoir accés facilement. J’aurais tres bien pur les pusher dans un groupe, mais je voulais les animer 1 par 1 pour simuler un delay dans l’animation.

private function updateAnimation():void
{
  for (var r:Number = 0; r < allTorus.length; r++) 
  {
    allTorus[r].yaw(1);
    allTorus[r].roll(.5);
    allTorus[r].pitch(.8);
  }
}

La derniére methode view.render(); fait reference à view, ce qui permet de mettre à jour le viewport.

Voilà, j’éspére vous avoir donnée une idée de comment marche away3D

Télécharger le code avec projet FlashDevelop

Javascript 1k compo, trop tard …

Cyril — Wed, 22 Sep 2010 13:12:08 +0000

Je voulais participer à la compo javascript 1k compo, mais trop tard …

Voici ce que je voulais présenter.

w=620;h=460;c=document.getElementById("c");c.width=w;c.height=h;C=c.getContext("2d");mr=Math.round;cs=Math.cos;si=Math.sin;r=100;ph=0;z=10;ee=0.08;y1=x1=0;x2=100;y2=0;x3=50;y3=50*Math.sqrt(30);C.fillStyle="rgba(0,0,0,1)";C.fillRect(0,0,w,h);setInterval(d,10); function d(){C.fillStyle="rgba(0,0,0,.1)";C.fillRect(0,0,w,h,0.1);p=ph;for(t=0;t<150;t+=2){p+=t/100;r=mr(cs(p/5)*cs(p*2)*300);x=w/2+si(p)*r+cs(p*2)*r;y=h/2+cs(p)*r+si(p*2)*r;rc=mr(x/(w/2)*256)-mr(cs(p*4)*50);vc=mr(y/(w/2)*128)+mr(si(p*4)*50);bc=mr(x/(w/2)*128)+mr(cs(p*4)*50);col=rc+","+vc+","+bc+",1";C.fillStyle="rgba("+col+")";C.fillRect(x,y,z,z)}ph+=0.01};

Traxboard

Cyril — Fri, 20 Aug 2010 20:21:13 +0000

Projet : Traxboard
Url : http://www.traxboard.fr/
Agence : Freelance

ZendFramework
PHP
MYSQL
JAVASCRIPT