La Fabrick » Nos projets

Fireworks + Javascript = Spark Skin Pleasure !

Erick — Thu, 23 Jun 2011 15:02:15 +0000

J’pensais pas faire ça aujourd’hui…, mais bon… moultes skins Spark à tomber : j’ai décidé de me helper myself et de gagner de l’argent ( enfin du temps pour commencer ). Du coup est née la petite commande Fireworks copyMXMLSelectionToClipboard, qui comme son nom l’indique presque, permet de copier une sélection dans Fireworks directement en MXML dans le ClipBoard. Elle est pas belle la vie ?!

En gros :
1. tu dessines tes trucs dans Fireworks, tu fais tes jolies dégradés, tes reflets, tes subtils petits floutés…
2. tu sélectionnes ce que tu veux mettre dans ta skin
3. tu lances la commande ‘UIGFx/SelectionToMXMLClipboard »
4. t’ouvres ta skinClass et pi t’y colle

5. et pi… tu souris !

Cette 1ère version permet d’exporter les Rect, les Path et des Groups ( de Rect et de Paths ! ),
avec leur SolidColor / SolidColorStroke, LinearGradient ou RadialGradient,
et même quelques filtres : Blur / DropShadow / InnerShadow.

Les positions sont recalculées avec un sélection placée à l’origine xy.

Télécharger l’extension Fireworks (CS3 + )

Et c’est déjà çà de fait !

Edit : et je rappelle qu’on peut mapper des raccourcis pour n’importe quel élément de menu… #jdcjdrAutres articles sur le même sujet

Make me Fluid

Fabien — Fri, 27 May 2011 08:36:48 +0000

Vous vous souvenez peut-être de l’ancien site web de Paul Neave ? Autour de 2004 il me semble. Une perle du Web 1.0 ou les bordures du site ce tordaient au moindre passage de la souris. C’est un de ces sites qui, à l’époque, me faisait dire que Flash c’était cool.

Il y a quelques temps, suivant les travaux de Philippe Elsass (@elsassph) sur les algos de dessin, j’ai entrepris de nouveaux travaux sur le sujet. Dans une librairie de primitives pour Flex4 d’abord, avec UIGFX, et puis rapidement pour rendre plus… « fluides » mes skins d’application, façon Neave.

Attention : parcequ’il y a de nombreux exemples, et parceque ce billet est un voyage dans le monde merveilleux de la gelée; votre ordinateur peu subir quelques changements et râler un peu

Ceux qui me suivent sur Twitter auront peut-être vu passer quelques essais.

(Clic pour ouvrir)
Ces tests de skinning flex interactif proviennent d’une extension Fluide de la librairie UIGFX (extension que je n’ai pas encore diffusé, faute de temps…)

BIGA! Nicolas Barradeau (@nicoptere) nous lance une série d’articles impressionnante sur l’art génératif, qui ce termine par une lib d’outils géométrique : Biga. J’ai pas pu me retenir, et repris mes expérimentations.

Des points…

L’idée de l’interaction «fluide» est basé sur les algo de répulsion. Lorsque qu’un point de souris approche d’une zone d’interaction de point de vecteur, il faut calculer une «dispersion» du point.

J’utilise 2 facteurs distincts :

La viscosité: un coefficient qui donne, comme son nom l’indique, la viscosité du point. En physique des fluides, la viscosité représente la capacité d’un liquide à s’écouler. Plus le coefficient est faible, plus l’écoulement du fluide est rapide (ex: l’eau). A l’inverse, plus le coefficient est élevé, plus le fluide à des contraintes physiques importantes qui réduisent sont écoulement (ex.: la confiture).
le facteur de gelée: c’est mon coefficient «maison». Un indicateur qui permet de préciser le degré de déformation d’un fluide. Plus ce facteur est élevé, plus le taux de déformation, et donc le mouvement de la forme, sera important.

En AS3, on peut l’écrire comme ceci :

public function update(owner:DisplayObject):void
{
offsetx+=(xref - x) / jelly;
offsety+=(yref - y) / jelly;

var dx:Number=0;
var dy:Number=0;
if (owner.stage)
{
dx=x - owner.stage.mouseX;
dy=y - owner.stage.mouseY;
}

if (Math.sqrt((dx * dx) + (dy * dy)) <= approach * 1.1)
{
var divisor:Number=approach / 10;
var a:Number=Math.atan2(dy, dx);

offsetx+=(Math.cos(a) * approach - dx) / divisor;
offsety+=(Math.sin(a) * approach - dy) / divisor;
}

offsetx*=(1 - viscosity);
offsety*=(1 - viscosity);
if (Math.abs(offsetx) < .001)
{
offsetx=0;
}

if (Math.abs(offsety) < .001)
{
offsety=0;
}

x+=offsetx;
y+=offsety;
}

Visuellement :

…Des lignes…

2 points définissent une ligne… C’est la règle.

Projection

Pour obtenir une ligne «fluide», il faut avoir un point de vecteur intermédiaire sur la ligne.
Une méthode simple et efficace est de projeter le point de la souris sur la ligne. Les mathématiciens on depuis longtemps résolu le problème, et l’implémentation AS3 d’un algo de projection ressemble à ça :

public static function projection(p:Point, a:Point, b:Point):Point
{
var len:Number = length(a, b);
var r:Number = (((a.y - p.y) * (a.y - b.y)) - ((a.x - p.x) * (b.x - a.x))) / (len * len);

var px:Number = a.x + r * (b.x - a.x);
var py:Number = a.y + r * (b.y - a.y);

return new Point(px, py);
}

Avec les outis géométriques proposés par @nicoptere dans la lib Biga, le point de projection contraint dans la ligne, peut se calculer comme suit :

var mousePoint : Point = new Point(mouseX, mouseY);
var projection : Point = GeomUtils.project(mousePoint, point1, point2);
var constraintProjection : Point = GeomUtils.constrain( projection, point, point2);

La projection du point de souris sur notre ligne molle nous permet d’obtenir une interaction intéressante :

Si les points d’origine sont fixes, vous obtenez une espèce de corde de guitare. Rigolo.

…Et des formes

Avec encore plus de points on commence a avoir des formes, façon gateau anglais :

Un autre exemple intéressant qui reprend la simulation de Philippe Elsass :
(Clic pour ajouter un point, Ctrl/Cmd + click pour supprimer un point)

Encore plus de gelée

Comme je le disais au début de cette article, nous travaillons depuis quelques temps sur une librairie de primitives pour Flex4 : UIGFX. L’idée est de proposer une suite de primitives bien utiles, qui n’existent en standard dans le SDK Flex4 (lignes pointillées, arc, camembert, ….).

Dans cette librairie, nous avons mis en place une primitive de représentation graphique de path SVG, qui, à la différence de la primitive Path standard du SDK Flex, permet de placer les vecteurs dans le modèle de contraintes top, left, bottom, right. Cette primitive permet aussi d’importer un chemin SVG, et de le convertir au format propre à cette primitive.

En modifiant un peu le parseur SVG de UIGFX, nous pouvons facilement parcourir un path SVG et extraire les points de vecteur clefs de la forme. L’idée, vous vous en doutez est de gélifier la forme

Sources et ressources

Vous trouverez l’ensemble des sources dans ce zip
Biga, geometric tools library
La série d’articles de Nicolas Barradeau
« Parametric path drawing » de Philippe Elsass
Et bien sur le site web de Paul Neave, … et l’ancien

Have fluid’s fun !Autres articles sur le même sujet

MdaME, ma résolution 2011 de génération de code AS3

La Fabrick — Tue, 11 Jan 2011 21:50:00 +0000

Voilà quelques temps que nous nous activions sans donner de nouvelles…, il est temps de corriger tout ça.
Aussi, pour démarrer cette nouvelle année du bon pied, La Fabrick vous propose une petite application de génération de code AS3 à partir d’un schéma XSD.

Ce petit outil nous a été utile pour pas mal de projets développés pour nos premiers clients, alors pourquoi ne pas vous en faire profiter ? Peut-être deviendrez-vous aussi MdaME-addict ?

Retrouvez toutes les infos sur http://mdame.lafabrick.comAutres articles sur le même sujet

ZXPackager : application pour l’empaquetage ZXP d’extensions CS5

Fabien — Wed, 28 Jul 2010 21:10:53 +0000

Vous l’aurez peut être remarqué, nous avons ajouté une rubrique Applications au blog. Nous travaillons actuellement sur plusieurs applications AIR orientées « aide au développeur ». ZXPackager est la première d’entre elles.

Cette application propose un moyen simple de packager vos extensions CS5 développées avec le nouveau SDK Creative Suite.

Les extensions ZXP

Depuis la CS5, Adobe propose un nouveau SDK de développement et un format d’extension commun a toute la suite logicielle.
Ce SDK, disponible ici, vous permet de développer vos propres panneaux et autres menus CS5. Le premier format de sortie est le MXP, toujours disponible, vous permettant d’exporter votre extension pour un logiciel cible.
Maintenant, avec la CS5, vous disposez d’un format commun, le ZXP, qui rend compatible votre extension avec toutes la suites CS.

Un fichier ZXP est défini par un manifeste xml, définissant le fonctionnement de l’extension (type, portée logiciel, …), et contient le (les) SWF de l’extension (une extension est en fait une pseudo application AIR, basée sur le SDK CS). Un fichier ZXP est signé numériquement. Vous devez donc avoir un certificat (PKCS12, PKCS11, JKS). Vous pouvez bien entendu utiliser votre certificat auto-signé préalablement créé avec Flash/Flex Buider.

Pour plus d’informations :

Un fichier ZXP doit (habituellement) être compilé en utilisant le packager Java UCF. Et c’est là l’idée de cette petite application : ne pas avoir a redéfinir vos certificats et autres options pour chaque package, et vous proposer une interface plus « user friendly » que le terminal.

Fonctionnement

Démarrage, et préférences

Au premier démarrage, l’application doit obtenir vos préférences de base.

Java Home

Vous devez indiquer le chemin vers votre JDK/JRE java, si celui-ci ne correspond pas à celui par défaut (l’application intègre le packager jar UCF, et elle doit connaître le répertoire racine de Java pour pouvoir le lancer). Les chemins racines par défaut sont:
- Pour Windows : ‘C:\Program Files\Java\jdk1.6.0′
- Pour Mac : ‘/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0′
Certificat

Vous devez préciser l’emplacement de votre certificat (généralement un fichier de type .p12 ou .p11), ainsi que votre mot de passe. Ces informations sont nécessaires pour la signature de l’extension.
- Fichier cible
  
  Vous devez indiquer le fichier de destination. L’extension .zxp est ajoutée automatiquement.
- Source de l’extension
- Démarrer un nouveau package;
- Ouvrir et installer l’extension via Extension Manager (vous devez bien entendu avoir préalablement installé Extension Manager CS5)
- Projet fxp
- Archive zip du bin de test

Définition de votre extension

Un package ZXP a besoin de 2 informations : le nom et l’emplacement de votre extension cible, et l’endroit où se trouve le répertoire « bin » de votre extension.

Une fois le packaging démarré, un message d’attente s’affiche.

Finalisation

Une fois le package créé, l’application vous propose de :

Téléchargements

ZXPackager

Extension de test

Autres articles sur le même sujet

Primitive DashedLine : une petite ligne bien utile

Fabien — Fri, 23 Jul 2010 09:07:22 +0000

Je viens de rajouter une petite primitive bien utile dans la librairie UIGFX : DashedLine, qui, comme son nom l’indique (ou pas), permet d’avoir une ligne pointillée.

Basé sur Line, cette primitive propose une propriété dashes, qui vous permet de paramètrer l’apparence des pointillées.

dashes contient un tableau (Array) de nombres. Les emplacements impaires du tableau définissent la taille (en pixel) des tirets. Les emplacements pair définissent la taille des espacement.

Dans le code :

Résultat :

C’est beau!!

Disponible bien entendu sur le google code UIGFX.
Autres articles sur le même sujet

UIGFX practice : a CircularSlider component

Fabien — Tue, 04 May 2010 21:18:39 +0000

If you were luck enough to use a multitouch application, did you ever have the idea that it would be interesting to use some circular interface components?
As interface space management is easier to achieve on large multitouch tables, I had the idea to develop a CircularSlider component, using my primitive UIGFX library, including the Pie primitive.
Let see how it works…

The component

PieButton

I needed a button with 2 properties startAngle and angle, to be able to transmit these values to the skin:

package com.lafabrick.components
{
    import spark.components.Button;

    public class PieButton extends Button
    {
        public function PieButton()
        {
            super();
        }

        private var _angle : Number;
        private var _startAngle : Number;

        public function get angle():Number
        {
            return _angle;
        }
        [Bindable]public function set angle(value:Number):void
        {
            _angle = value;
            invalidateDisplayList();
        }

        public function get startAngle():Number
        {
            return _startAngle;
        }
        [Bindable]public function set startAngle(value:Number):void
        {
            _startAngle = value;
            invalidateDisplayList();
        }

    }
}

CircularSlider

This component could not extend directly SliderBase or TrackBase because the SkinPart thumb and track, as Button, are extending the TrackBase class.
I thus used the Range class, inserted the Slider architecture, and added specific geometric codes.
Check the component’s source code

Skin implementation

The design of the Skin is similar to a skin Slider standard, except that it uses a PieButton instead of a Button:



    
    
        [HostComponent("com.lafabrick.components.CircularSlider")]

Under « thumb » and « track » Skin, the angular values are a mapped with the PieButton HostComponent. StartAngle and angle properties of the Pie primitive are directly extended from the host component.
Here follows a sample with Track Skin:




    
        [HostComponent("com.lafabrick.components.PieButton")]

Result

Let see:

Nice huh?

You can check these for more info: Link, and source code.

PS: Thanks to Hervé for review and corrections!Autres articles sur le même sujet

Arduino #2 : Flash, socket et Processing

Fabien — Tue, 06 Apr 2010 20:11:14 +0000

Suite de nos expérimentations! Cette fois on va parler de Flash. Nous allons voir comment faire un petit serveur qui écoute le port série, et qui renvoie les infos sur un socket que nous écouterons avec Flash. C’est parti!

Un serveur série avec Processing

Nous allons reprendre le code Processing précédent, et faire quelques modifications. Le principe est d’utiliser la librairie processing.net pour créer et gérer notre serveur. Nous devons modifier légèrement les fonctions setup() et draw() de notre code.

setup

Dans l’initialisation, nous devons créer notre serveur. Il suffit tout simplement de définir un port (ici le 10001) :

import processing.net.*;
import processing.serial.*;

Serial port;
Server socket;
void setup() {

  println( Serial.list() );

  String usbPort = Serial.list()[0];
  port = new Serial(this, usbPort, 9600);

  socket = new Server( this, 10001 );

  port.bufferUntil('\n');

  port.write(65);
}

dessine moi un serveur

Nous allons enlevé le code concernant la scène 3D. C’est une applet serveur que l’on veut tout de même! Enfin moi je l’enlève.
Donc, nous allons nous servir de la fonction draw pour pousser les valeurs de l’accéléromètre au travers du socket. Je n’envoie que les valeur en X et Y, vue que l’on n’a pas (encore) de gyroscope associé à l’axe Z. On termine l’écriture sur le serveur par un byte de valeur 0. Histoire de préciser que, oui, c’est fini et qu’il peut transmettre. Je conserve le delay de 100 millisecondes, pour ne pas saturer Flash Player par des tonnes de valeurs.

void draw() {

  socket.write( xvalue+","+yvalue );
  socket.write( zero );

  delay(100);
}

Aller hop ! Le code du serveur complet :

import processing.net.*;
import processing.serial.*;

Serial port;
Server socket;

byte zero = 0;

float xvalue = 0;
float yvalue = 0;
float zvalue = 0;

void setup() {

  println( Serial.list() );

  String usbPort = Serial.list()[0];
  port = new Serial(this, usbPort, 9600);

  socket = new Server( this, 10001 );

  port.bufferUntil('\n');

  port.write(65);
}

void draw() {

  socket.write( xvalue+","+yvalue );
  socket.write( zero );

  delay(100);
}

void serialEvent(Serial port) {

  String serialStr = port.readStringUntil('\n');
  serialStr = trim(serialStr);

  int values[] = int(split(serialStr, ','));

  if( values.length == 3 ) { 

    xvalue =calculate( values[0], 512 );
    yvalue = -calculate( values[1], 500 );

  }
}

float calculate( float returnValue, int baseValue ) {

  float diff = returnValue - baseValue;
  returnValue = (diff*90) / 115; 

  // to radian
  returnValue = PI*returnValue/180;

  // trunc value
  returnValue = round( returnValue*100 );
  returnValue = returnValue /100;

  return returnValue;
}

Flaaaaaaaaash

Côté Flash, finalement c’est super simple. Un socket XML, connecté sur le port 10001, avec l’adresse local (127.0.0.1). A chaque réception de données, nous découpons la valeur reçue pour extraire les valeurs X et Y provenant du serveur Processing :

package
{
    import flash.events.DataEvent;
    import flash.events.Event;
    import flash.events.SecurityErrorEvent;
    import flash.net.XMLSocket;

    public class ArduinoSocket
    {
        private var _socket : XMLSocket;

        public function connect() : void
        {
            _socket = new XMLSocket();

            _socket.connect("127.0.0.1", 10001);
            _socket.addEventListener(Event.CONNECT, onConnect );
            _socket.addEventListener(DataEvent.DATA, onData);
            _socket.addEventListener(
                        SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

        }

        protected function onConnect( event : Event ) : void
        {
            //connecté;
        }

        protected function onData( event : DataEvent ) : void
        {
            var str : String = event.data;
            var dataAr : Array = str.split(",");
            var pitch : Number = Number( dataAr[0] );
            var yaw : Number = Number( dataAr[1] );

            // faites ce que vous voulez ici
        }

        protected function onSecurityError( event : SecurityErrorEvent ) : void
        {
            //y'a une erreur
        }
    }
}

Et pour AIR(2)

Processing vous permet de compiler votre code en applet Java, mais aussi en .EXE, .DMG, .RPM. Comme ça on est bien. Le truc cool, c’est qu’avec AIR2, vous pouvez, via un packaging natif de votre application, embarquer, et lancer votre serveur directement depuis AIR (via native process, tout çà). Et c’est bien! du coup vous pouvez avoir un petit serveur qui écoute le port série, directement intégrable dans vos applications. Par extension, vous pouvez prévoir plein de choses avec cette base de petit serveur (un point d’écoute de vos périphériques bluetooth par exemple?)

Bonus track

Aller hop ! Je me jette à l’eau. Une petite séquence pour vous montrer que ce n’est pas du flan!

(Ouai bon j’aurais pu faire un gif animé… Mais la méthode old school marche pas si mal)

Pour finir

Voilà la fin de cette mise en jambe dans l’univers Arduino. J’aurais pu avoir un exemple plus « graphique » que le simple cube… Mais je laisse libre court à votre imagination! Pour la suite, et en fonction de vos retours, je pense aller plus loin dans ce montage analogique : dans un premier temps en ajoutant un gyroscope électronique, et puis j’aimerai bien vous proposer un tuto sur Arduino et les communications sans fil, notamment via une interface XBee. A vous!
Autres articles sur le même sujet

Arduino #1 : fabrique ta (presque) wiimote!

Fabien — Tue, 06 Apr 2010 20:10:28 +0000

Je vous propose un petit retour sur mes expérimentations autour de Arduino. On va créer une mini wiimote maison. Si si ! (Bon sans les boutons hein !)

Pour ce petit tuto nous aurons besoin de :

Un microcontrôleur Arduino
Un accéléromètre (le « 3 axes » de Sparkfun est très bien)
Un jeu de connecteur mâle.
Un peu d’étain
Un fer a souder pas pourri (ca vous évitera de transpirer pour souder, comme j’ai pu le faire…)

Compter 26euros pour la platine Arduino USB de base, une 20euros pour l’accéléromètre, et 35 centimes les 20 connecteurs. L’étain et le fer à souder ce trouvent chez votre papa/oncle/pote/voisin (sinon chez votre pépé).

Si vous êtes guerrier, des platines Bluetooth existent, et des extensions super fun pour votre board (un mini écran tactile, un pack batterie lithium,….) Mais là on va faire simple pour cette article. Pour le reste, on verra plus tard.

Un peu d’électronique

En premier, nous devons souder les broches sur l’accéléromètre, histoire de pouvoir le fixer sur le microcontrôleur.

Noter la qualité incroyable de la soudure.

Ensuite, il faut fixer l’accéléromètre sur la platine. Arduino a 5 « pins » de connexion analogique. Il suffit de placer l’accéléromètre dessus. Le plus dur est de ne pas se tromper de sens.


Bien !	Pas Bien !

Vous pouvez prendre un café.

Ardu, I know

Nous avons donc une magnifique platine, qui ne sait pas encore qu’elle a plein de talents pour se mouvoir gracieusement. Nous allons y remédier.

Note préliminaire

Nous avons fait les bricoleurs du Dimanche, mais je n’ai pas parlé de ce qu’est Arduino. C’est une plateforme de prototypage open source. C’est à dire un bidule électronique, qui vous sert de base pour tester un assemblage d’autres bidules électronique, plus ou moins complexe. C’est utilisé pour tout et n’importe quoi: la mise au point de carte électronique, la création de robot, l’utilisation dans l’univers artistique ou du modélisme (rien a voir, mais c’est ce que je fait). Donc une platine électronique. Avec une EEPROM que l’on peut programmer facilement, grâce à un jeu de libraire fourni.

La Programmation Arduino est basé sur Processing. C’est en fait du Java, version pas chiant, ou tout ce dont vous avez besoin est déjà là. Exit donc les Maven, Nexus et autre repository. On est là pour coder rigolo. (Ce qui ne vous empêche pas d’utiliser une librairie Java dans Processing, en la collant dans le répertoire des librairies: ça marche)

Les liens qui vont bien :

Le site officiel : http://www.arduino.cc/
Getting Started, à lire de préférence, et surtout pour l’installation du driver pour la Board :
- Mac
- Windows
- Linux
Tutos et description des API standards

Un programme Arduino s’articule autour de 2 fonctions principales : setup() qui va initialiser des trucs, et loop() qui va exécuter du code en boucle.

setup

Comme nous ne voulons pas que la platine fasse l’autiste, et qu’elle nous parle, nous allons lui demander d’envoyer des infos sur le port série.

void setup()
{
    // initialize the serial communications:
    Serial.begin(9600);
}

9600 est ~~le port sur lequel la platine va balancer ces infos~~ le débit, en bit/seconde (baud) de la transmission sur le port série. Vous pouvez choisir n’importe quelle autre port, ça ne me fait rien.
Il faut ensuite lui indiquer quelle sont les « pins » qui vont l’alimenter (ouai, elle est un peu con con, mais c’est comme çà).

const int groundpin = 18;
const int powerpin = 19;
void setup()
{
    // initialize the serial communications:
    Serial.begin(9600);

    // initialize pins on the board
    pinMode(groundpin, OUTPUT);
    pinMode(powerpin, OUTPUT);
    digitalWrite(groundpin, LOW);
    digitalWrite(powerpin, HIGH);
}

loop

Dans cette boucle, nous allons lui demander de lire les infos analogiques via la méthode analogRead( pinNumber );
Nous allons aussi « lisser » ces valeurs. Les valeurs analogiques sont exprimées en millivolts: c’est la variation électrique du circuit qui nous est restituée. Comme le circuit est très précis, les variations sont importantes. Il est donc utile de lisser les nouvelles valeurs par rapport aux anciennes. J’utilise un algorithme très simple. Pour plus de précision, il serait intéressant d’intégrer des formules de lissage plus complexes. Si vous avez des électroniciens autour de vous, ils pourront vous en parler.
Enfin, nous envoyons ces valeurs sur le port série.

Le code complet :

const int groundpin = 18;                  // analog ground pin
const int powerpin = 19;                   //

const int xpin = 3;                        // x-axis of the accelerometer
const int ypin = 2;                        // y-axis
const int zpin = 1;                        // z-axis (only on 3-axis models)

int sensorx, sensory, sensorz = 0;         // store the values

int smoothedx, smoothedy, smoothedz = 0;  // smoothed results
int precision = 5;                        // amount of precision

void setup()
{
    // initialize the serial communications:
    Serial.begin(9600);

    // initialize pins on the board
    pinMode(groundpin, OUTPUT);
    pinMode(powerpin, OUTPUT);
    digitalWrite(groundpin, LOW);
    digitalWrite(powerpin, HIGH);

}

void loop()
{
    // read analogic data from input pin
    sensorx = analogRead(xpin);
    sensory = analogRead(ypin);
    sensorz = analogRead(zpin);

    // smothing values
    smoothedx = smoothedx + ((sensorx - smoothedx)/precision);
    smoothedy = smoothedy + ((sensory - smoothedy)/precision);
    smoothedz = smoothedz + ((sensorz - smoothedz)/precision);

    // send values on the Serial port
    Serial.print(smoothedx);
    Serial.print(",");
    Serial.print(smoothedy);
    Serial.print(",");
    Serial.print(smoothedz);
    Serial.println();

     delay(10);
}

On ajoute à la fin le delay(10); qui lui indique de cadencer la boucle loop toute les 10 millisecondes.
Il ne vous reste plus qu’a uploader ce code dans votre platine. Toutes les infos sous ce lien.

Un peu de Processing

Ce qu’il y a de bien avec Processing, c’est qu’on peut faire ce que l’on veut avec. Du joli graphisme, à la reprogrammation de votre Micro-Onde pour qu’il congèle plus vite, vous avez de quoi faire. Là nous allons écouter le port série de notre platine Arduino pour lire les informations analogiques envoyées, et en faire quelque chose.
L’IDE Processing se télécharge ici.
Les étapes :

Lister les ports série ouverts;
Se connecter sur celui qu’on veut;
Ecouter les événements provenant du port série;
Faire des trucs avec les données reçues.

Processing c’est comme pour Arduino (normal c’est la même chose). Vous avez 2 fonctions principales : setup() et draw() (équivalent à loop() chez Arduino).

RE:setup

Pour le truc, nous allons initialiser une scène OpenGL (pour au final afficher un cube, et le faire bouger). Super!

void setup() {
    size( 800, 800, OPENGL );
}

Pour se connecter au port série, c’est extrêmement simple, Processing dispose d’une lib faite pour ça : processing.serial. Pour trouver le bon port, nous allons lister les ports série ouverts. Dans mon cas, la platine se connecte sur le port 0. Il suffit de récupérer le nom du port, créer une connexion série, et l’initialiser :

void setup() {
    size( 800, 800, OPENGL );

    println( Serial.list() );

    String usbPort = Serial.list()[0];
    port = new Serial(this, usbPort, 9600);

    port.bufferUntil('\n');

    port.write(65);
}

Et je l’écoute comment le port série?

Très bonne question ! En fait Processing et la librairie serial expose le port série entrant via la fonction serialEvent(Serial port). Vous n’avez pas de point d’écoute à monter. C’est magique, c’est pas chiant.
Arduino nous envoie les valeurs sous forme de texte comme ceci : « valeurX,valeurY,valeurZ ». Nous devons donc lire le port série, et découper le texte, comme ci-dessous :

void serialEvent(Serial port) {

    String serialStr = port.readStringUntil('\n');
    serialStr = trim(serialStr);

    int values[] = int(split(serialStr, ','));
    ...

Plus qu’a lire les infos contenu dans le tableau values[]
(voir plus bas pour le code complet)

draw (comme loop en fait)

Pour le cube 3D, il faut placer un point de vue virtuel au centre de la scène, placer une lumière, créer le cube, rotationner le point de vue en fonction des valeurs de l’accéléromètre, et lui dire de recommencer toutes les 100 millisecondes. Ouf ! ça c’est de la phrase ! Heureusement en terme de code c’est moins long :

void draw() {

    background(0);
    stroke(255);
    translate(800/2,800/2,0);
    lights();

    rotateX(xvalue);
    rotateY(yvalue);
    box(300,300,300);

    delay(100);
}

super total

Le code complet pour la partie processing :

import processing.net.*;
import processing.opengl.*;
import processing.serial.*;

Serial port;

byte zero = 0;

float xvalue = 0;
float yvalue = 0;
float zvalue = 0;

void setup() {
    size( 800, 800, OPENGL );

    println( Serial.list() );

    String usbPort = Serial.list()[0];
    port = new Serial(this, usbPort, 9600);

    port.bufferUntil('\n');

    port.write(65);
}

void draw() {

    background(0);
    stroke(255);
    translate(800/2,800/2,0);
    lights();

    rotateX(xvalue);
    rotateY(yvalue);
    box(300,300,300);

    delay(100);
}

void serialEvent(Serial port) {

    String serialStr = port.readStringUntil('\n');
    serialStr = trim(serialStr);

    int values[] = int(split(serialStr, ','));

    if( values.length == 3 ) {

        xvalue =calculate( values[0], 512 );
        yvalue = -calculate( values[1], 500 );

    }
}

float calculate( float returnValue, int baseValue ) {

    float diff = returnValue - baseValue;
    returnValue = (diff*90) / 115;

    // to radian
    returnValue = PI*returnValue/180;

    // trunc value
    returnValue = round( returnValue*100 );
    returnValue = returnValue /100;

    return returnValue;
}

Dans la fonction calculate, qui transforme les valeurs en volt vers des valeurs angulaires, vous verrez un truc bizarre. Je divise par 115 un nombre. Ce n’est pas du pifomètre ! En fait cette valeur correspond à la moitié de la variation en volt des valeurs. Plus clairement : Les valeurs analogiques varient entre un minimum et un maximum. Sur mon accéléromètre (un ADXL 335), les valeurs X et Y on une variation de 330 millivolts, avec comme valeur médiane 512 millivolts (soit une valeurs comprise entre 397 et 627 millivolts). Tout ceci est fonction de votre accéléromètre. Il vous faudra donc farfouiller dans les spécifications du circuit, qui doivent être disponibles là où vous l’achetez, pour connaître ces variations.

Jouons !

Voilà !
Connectez votre platine, lancez votre programme Processing, et faites bouger le cube avec « rythm ».

Vous l’aurez peut être remarqué : je n’utilise que 2 axes de l’accéléromètre (x et y). Pour obtenir une information correcte sur l’axe z, il s’avère nécessaire d’avoir un gyroscope électronique : un DOF (Degree Of Liberty) comme on les appelle. Il en existe plein : 3DOF, 5DOF, … ils peuvent s’utiliser couplés à un accéléromètre, en connectant les axes du DOF et ceux de l’accéléromètre sur les mêmes « pins » analogiques de la board Arduino. Les calculateurs des 2 circuits, travaillant ensemble, vous retourneront les bonnes valeurs spatiales de la platine. Je vous ferais un p’tit article sur le sujet si cela vous intéresse.

2ème remarque, que vous avez forcement remarqué : je n’ai JAMAIS mis les mots FLASH ou FLEX dans cet article. « Ouaaa ! Quel exploit! », « merci, merci! Cela m’a demandé beaucoup d’entraînement ». Rassurez vous : le prochain article va vous expliquer comment utiliser tout ce biniou électronique avec votre actionscript préféré, et surtout comment faire VOTRE serveur de port série. Classe ! (et finalement j’aurais quand même placer ces mots… Je suis faible)

Je vous invite fortement à lire (et écouter) Vincent Maitray dans ces UNBELIEVABLE articles (featuring Nicolas Gans) concernant Arduino. Ca va loin, et vous aurez absolument toutes les cartes en main pour ajouter des p’tits boutons et avoir au final une VRAI wiimote « made by me ».
Sinon vous avez un autre montage, version poilu, de « la Grotte du Barbu » sous ce lien.

Aller! On continue!Autres articles sur le même sujet

uigfx project : Flex4 primitives library / Fireworks extension

Fabien — Tue, 09 Feb 2010 10:40:17 +0000

I just released a new project, called by Erick uigfx, that I have introduced in my previous post (in french).
So : it’s a Flex4 primitives’s library, which allows you to extend standard graphics primitives. It’s also one (and more soon) Fireworks extension to accelerate and improve the workflow between designer and developer.
The existence of this library have just this idea: improve the work processes between teams around a Flex4 project.

uigfx library

ExclusionRect

Draw a rectangle with rounded corners (« radius » property), with a rounded rectangular punch optional.
The roundness of the inner rectangle is defined by « innerRadius » property.
Constraints of the inner rectangle are defined with « innerTop », « innerBottom, « innerLeft » and « innerRight » properties.
Sample :

Result :

PointsPath

This primitive allows you to draw a path, based on a list of points(ConstraintPoint).
Additionally, you can set a roundness to your primitive using the « radius » property

A PointsPath can be defined as « not closed » : in this case you can use the « closedPath » property and set it to false :

...

Using constraint point

The ConstraintPoint class defines a point with constraints values (left, horizontalCenter, right; and top, verticalCenter, bottom)

Every single value can be expressed as a percentage, setting « valuesInPercent » property to « true » (by default, all values are expressed in pixel) :

Sample

Draw a five branch star, with a rounded contour (« radius » property), and constraints points vector :

Result :

ComplexPointsPath

This primitive allows you to draw a path with one or more contours, defined by ComplexConstraintPoint points.

Define a complex point

The ComplexConstraintPoint class defines a vector with a constraint position, and the position of its bezier curves list.

The position of bezier curves is defined by vertical and horizontal offsets as below :

In mxml :

Just like the ConstraintPoint, all values can be expressed in percentage :

Single contour

Draw a path with a complex contour :

result :

Multiples contours

Draw a path with multiples contours.
Each Contour object defines a part of the path. Basically, it’s used to process pathfinding, such as union or exclusion.
Each contour is defined on a Contour object, through the « contours » collection property. Like PointsPath, a Contour can be defined as unclosed, using « closedContour » property :

...

Below a complete sample code :

Result :

An Extension for Fireworks

This library would not be complete without an export tools for Fireworks. Have a complex primitive is good, but how to find all the points and bezier curves without a headache? It’s the goal of this extension!

At this moment the exporter is able to :

exports all paths and rectangles
exports strokes
exports fills (solid color and gradient)
exports filters (gaussian blur, glow, drop shadow)

But for now, this exporter can’t :

exports text

Installation

Simply download the extension (uigfx.mxp), and double click on it to launch the Extension Manager. The installation is automatic. Now, open Fireworks, and open the primitives exporter panel in « Window > uigfx« .

How to use this extension

Make your design
Generate and place rules
You’ill need 4 vertical rules and 4 horizontal rules to determine all constraints positions of each vector point. You can click on the « generate rules button », to put the rules around your selection (you need to select one or more objects). Move the rules, in order to have all vectors in the good area, like below :
Export
Click on the export button to export all selections. The exporter follows rules placement to determine vectors positions. If there’s no selection, all layers are exported. Of course, you will have to provide a name for the output file and a directory to save it in.
Finally, an mxml file, containing a Spark Skin with all uigfx primitives, will be created. And voila !

This project is hosted on google code.Autres articles sur le même sujet

Flex4 : skin et primitives

Fabien — Fri, 04 Dec 2009 16:52:36 +0000

Dans le dernier article, nous avons fait un petit tour d’horizon du nouveau système de skin de Flex4. J’ai brièvement présenté EazeElement que j’utilise dans l’article. Nous allons maintenant rentrer un peu plus profondément dans les primitives, qui vous permettent de créer vos propres formes et autres éléments graphiques personnalisés.

Retour sur les primitives

Dans Flex4, une Skin est une agglomération d’éléments graphiques, définis avec un type de ligne, de fond, et des filtres. L’objet graphique final est une superposition de rectangles, de lignes, d’ellipses, d’images, de formes complexes.

Intéressons nous à celles qui utilisent directement l’API de dessin : Rect, Ellipse, Line, Path

Comment ça marche?

L’architecture des primitives utilisant l’API de dessin est la suivante :

Les classes de bases :

GraphicElement : la base des primitives. Cette classe définit les tailles et positionnement de l’objet dans l’espace, avec ses contraintes de position. Les getters protégés drawX et drawY, utilisés par toutes les primitives, renvoient la position réelle en x et y de l’objet.
StrokedElement : définit le Stroke (interface mx.graphics.IStroke), l’apparence de la ligne, de la primitive. La base des méthodes de dessin est présente : beginDraw, draw, endDraw. La méthode beginDraw applique le style du Stroke dans l’élément graphique Graphics de la primitive.
FilledElement : définit le Fill (interface mx.graphics.IFill), l’apparence du fond, de la primitives. La méthode beginDraw prépare l’objet graphique en appliquant la ligne Stroke et le fond Fill. A ce niveau, la méthode draw n’effectue aucun tracé.

Les primitives :

Line : (extension de StrokedElement) dessine une ligne, passant par 2 points (xFrom/yFrom et xTo/yTo). Si votre ligne est encadrée dans des contraintes top, bottom, left, right; la ligne dessinée sera une diagonale, respectant les contraintes top/left et bottom/right;
Ellipse : (extension de FilledElement) dessine une ellipse définie par ses contraintes de positionnement;
Rect : (extension de FilledElement) dessine un rectangle défini par ses contraintes de positionnement. Sa particularité est de pouvoir définir des rayons de courbure globaux (radiusX/radiusY), ou localisés aux angles du rectangle (topLeftRadiusX/topLeftRadiusY, bottomLeftRadiusX/bottomLeftRadiusY, …).
Path : (extension de FilledElement) dessine une forme complexe, définie dans une propriété data. Cette source utilise la syntaxe SVG.

Digression : Définition et obtention d’un “data Path”

Le “data source” d’une primitive Path est définit par un code, identique à celui utilisé dans le format vectoriel SVG. Ce code ressemble a celui-ci :
 M 8 4 C 8 4 15 4 15 4 L 15 0 L 27 8 L 15 15 L 15 11 L 8 11 L 8 11 L 8 11 L 0 11 C 0 11 0 11 0 11 C 0 7 3 4 8 4 Z

Il représente une flèche avec un bord arrondi, d’une largeur de 27 pixels, et une hauteur de 15 pixels.

Fonctionnement du code

c’est une succession de commandes (définies par des lettres), et de positions de points (les chiffres) en pixels utilisées par la commande.

Les différentes commandes sont :

M : Move, déplacement de la ligne vers le point définit par le couple de chiffres suivant. Exemple : “M 8 4” déplace le point courant de la ligne à la position x=8 et y=4. C’est toujours la première commande du code.
L : Line, création d’une ligne, avec comme point de destination le couple de chiffres suivant. Exemple “ L 15 11” crée la ligne depuis le point précédent, vers le point x=15 et y 11.
H : Horizontal Line, identique à la commande L, à la différence que seul le point de destination x est nécessaire. Exemple : “H 15” construit une ligne horizontale depuis le point précédent, vers le point x=15.
V : Vertical Line, identique à la commande H, en vertical.
Q : Quadratic Bezier, création d’une ligne courbe, a partir du précédent point, à destination du point définit par le dernier couple x/y, et passant par le point de contrôle définit par le premier couple x/y. exemple : “Q 15 11 20 22” la ligne est créée entre le point précédent et le point x=20, y=22, en passant par le point de contrôle x=15, y=11;
C : Cubic Bezier, identique à la commande Q, à la différence que la ligne passe par un point de contrôle supplémentaire. Exemple : “ C 0 7 3 4 8 4” la ligne est créée entre le point précédent et le point x=8 / y=4, en passant par un premier point de contrôle x=0, y=7, et un second x=3, y=4;
Z : Close, définit la fermeture de la forme. C’est aussi le dernier code du data.

Obtenir un code à partir d’une forme

La meilleur méthode pour obtenir le code de votre forme vectorielle est de passer par Fireworks. Je vous recommande fortement d’utiliser ce logiciel pour vos créations d’interface, car très complet, performant, et beaucoup plus adapté à la création graphique web que Photoshop ou Illustrator.

Fireworks, depuis la CS4, dispose d’une commande d’exportation FXG. Vous pouvez la trouver sous “Commandes” > “Exporter au format FXG”.

Il vous suffit de sélectionner votre forme, (si rien n’est sélectionné, c’est la totalité du document, y compris les calques masqué, qui sera exporté), et de lancer la commande d’exportation.

Vous obtenez un document de ce type :

Copiez le data du noeud , et utilisez le dans votre skin comme dans cette exemple :

Et maintenant?

L’idée serait de pouvoir créer des primitives, spécialisées ou non, utilisables dans un contexte de composants très précis, comme la primitive EazeElement du dernier article; ou dans une perspective plus globale, type librairie… Allons-y

Un trou dans mon Rectangle

Il peut être intéressant dans certains cas d’avoir un “trou” dans un rectangle. Pour créer par exemple une bordure qui pourrait avoir un Stroke ET un Fill. C’est ce que j’ai fais ici.

Pour obtenir un rectangle “troué” avec l’api de dessin, c’est extrêmement simple : il suffit de dessiner 2 rectangles l’un dans l’autre, à la suite : les points de vecteurs faisant partie du même chemin, cela génère l’exclusion du rectangle 2 dans le rectangle 1.

Bon c’est une méthode rapide, mais qui est suffisante pour nos besoin… Nous ne sommes pas en train de coder un outil de Pathfinding !

Dessin de rectangle

Au lieu d’utiliser les méthodes de dessin de rectangle fournies par Flex, j’utilise celle proposée par Philippe Elsass. Performante, elle m’évite de recourir au méthode de base, qui lance des contrôles de positions évitable.
Pour plus d’information sur son fonctionnement, je vous invite à vous rendre sur cette explication.

La méthode utlisée dans la librairie, que j’expose ci-après, derrière ce lien.

La primitive ExclusionRect

Donc nous avons besoin de 2 rectangles. Le premier est celui qui correspond aux contraintes de positionnement de base de la primitive. J’utilise une petite méthode getOutterVectorPoint qui me renvoie le vecteur définissant les points de ce rectangle. Le second rectangle, celui définissant la zone à exclure, à lui besoin de contraintes spécifiques, que j’ai ajouté dans la classe (innerTop, innerRight, innerLeft, innerBottom). la méthode getInnerVectorPoint remplit la même fonction que getOutterVectorPoint. Dans l’override de la méthode draw, celle qui “dessine”, les 2 rectangles sont créés l’un après l‘autre. Cela donne :

/**
 * Return the Vector of Point for the rectangle
 */
protected function getOutterVectorPoint() : Vector.
{
    var vector : Vector. = new Vector.();
    vector.push( new Point( drawX, drawY ) );
    vector.push( new Point( drawX+width, drawY ) );
    vector.push( new Point( drawX+width, drawY+height ) );
    vector.push( new Point( drawX, drawY+height ) );
    return vector;
}
/**
 * Return the Vector of Point for the inner rectangle
 */
protected function getInnerVectorPoint() : Vector.
{
    var vector : Vector. = new Vector.();
    vector.push( new Point( drawX+innerLeft, drawY+innerTop ) );
    vector.push( new Point( drawX+width-innerRight, drawY+innerTop ) );
    vector.push( new Point( drawX+width-innerRight, drawY+height-innerBottom) );
    vector.push( new Point( drawX+innerLeft, drawY+height-innerBottom ) );
    return vector;
}

/**
 * Draw the rectangle
 * @see com.lafabrick.uigfx.utils.UigfxUtils
 */
override protected function draw(g:Graphics) : void
{
    UigfxUtils.drawRoundPath( g, getOutterVectorPoint(), radius, true );

    if( enableExclusion ) {
        UigfxUtils.drawRoundPath( g, getInnerVectorPoint(), innerRadius, true );
    }
}

Utilisation

L’utilisation est très proche de celle de Rect, avec les contraintes et radius intérieur :

La classe complète de la primitive

Dessine moi une forme !

Une primitive qui me manque est celle permettant de dessiner une forme, à la manière de Path, mais en définissant un tableau de points. Quelque chose qui ressemble à ça :

Bien, mais pas suffisant.
Dans ce premier essai, les points sont définis “statiquement”. Une utilisation parfaite pour moi d’une telle primitive serait de pouvoir définir des contraintes de placement sur les points (top, verticalCenter, bottom et left, horizontalCenter, right), par rapport à la primitive.

J’ai donc fait une classe ConstraintPoint.

ConstraintPoint : un point “contraint”

Cette classe toute simple, extension de Point, dispose de propriétés de placement, en getter/setter : top, left, bottom, right, horizontalCenter, verticalCenter. Une méthode getConstraintPoint() renvoie un point x/y, calculer par rapport à une cible GraphicElement, en tenant compte des contraintes de placement. J’ai préféré avoir ce type de fonctionnement, plutôt que d’avoir le couple x/y directement modifié lors du set des différentes propriétés de contraintes.

Une primitive se dessine par rapport à son positionnement global. GraphicElement fournit les propriétés protégés drawX et drawY, qui donne les positions x/y de la primitive de manière global, par rapport à l’application.

La méthode getConstraintPoint() doit donc renvoyer le point par rapport à l’application. GraphicElement fournit tout la mécanique de calcul nécessaire, notamment l’objet postLayoutTransformOffsets, qui contient la position globale de la primitive.

La méthode en question :

public function getConstraintPoint( graphicElement : GraphicElement ) : Point
{
    var px : Number = 0;
    var py : Number = 0;

    var xOffset : Number;
    var yOffset : Number;

    if (graphicElement.displayObjectSharingMode ==
                        DisplayObjectSharingMode.OWNS_UNSHARED_OBJECT) {
        xOffset = 0;
        yOffset = 0;
    }
    else {
        xOffset = graphicElement.postLayoutTransformOffsets ?
                        graphicElement.x + graphicElement.postLayoutTransformOffsets.x : graphicElement.x;
        yOffset = graphicElement.postLayoutTransformOffsets ?
                        graphicElement.y + graphicElement.postLayoutTransformOffsets.y : graphicElement.y;
    }

    // Calcutates y position
    if( !isNaN( top ) ) {
        py = yOffset + top;
    }
    else if( !isNaN( bottom ) ) {
        py = yOffset + graphicElement.height - bottom;
    }
    else if( !isNaN( verticalCenter ) ) {
        py = ( yOffset + graphicElement.height ) / 2 + verticalCenter;
    }
    else {
        py = yOffset + y;
    }

    // Calcutates x position
    if( !isNaN( left ) ) {
        px = xOffset + left;
    }
    else if( !isNaN( right ) ) {
        px = xOffset + graphicElement.width - right;
    }
    else if( !isNaN( horizontalCenter ) ) {
        px = ( xOffset + graphicElement.width ) / 2 + horizontalCenter;
    }
    else {
        px = xOffset + x;
    }

    return new Point( px, py );
}

La classe complète ce trouve derrière ce lien.

Intéressons nous maintenant à la primitive.

Primitive PointsPath

J’utilise toujours la méthode de dessin drawRoundPath, contenu dans ma classe static UigfxUtils.

Ici, la classe étend FilledElement. Une propriété points, définit les différents points de type ConstraintPoint de la primitive. J’utilise ici un vecteur comme conteneur des points : Vector.. Le “set” de cette propriété appelle invalidateDisplayList(), afin de lancer le processus de dessin de la forme.

La méthode draw parcour le vecteur de points ConstraintPoint, appelle pour chacun sa méthode getConstraintPoint, et pousse le point dans un vecteur. C’est ce vecteur qui est utilisé par drawRoundPath.

Le code de cette mécanique :

public function get points():Vector.
{
    return _points;
}

/**
 * @private
 */
public function set points(value:Vector.):void
{
    _points = value;
    invalidateDisplayList();
}

/**
 * Draw the path
 * Drawing method is static, in UiGfxUtils
 * @see com.lafabrick.uigfx.utils.UiGfxUtils
 */
override protected function draw(g:Graphics) : void
{
    // replace points from local to global position
    var vectorPoint : Vector. = new Vector.();
    for each( var point : ConstraintPoint in points ) {
        vectorPoint.push( point.getConstraintPoint( this ) );
    }
    // launch drawing method
    UigfxUtils.drawRoundPath( g, vectorPoint, radius, true );
}

La classe PointsPath en entier

Utilisation

Reprenons l’exemple, avec cette primitive et les contraintes de placement :

La forme respecte les contraintes de placement, en fonction de l’évolution de la taille de la primitive. Amazing !
L’exemple complet (les sources au clic droit), ce cache sous ce lien.

Librairie Uigfx

Tout ce que je viens d’exposer fait partie d’une librairie nommée par Erick « uigfx ».
Cette petite librairie, sera bientôt disponible publiquement sur le svn lafabrick. Vous pouvez d’ores et déjà télécharger le projet (format .fxpl), dans la version proposée dans cette article. La documentation ( en anglais… pas parfait ! ) est disponible là.

[UPDATE]
Le projet uigfx a maintenant sa page sur google code. Pour plus d’information, la présentation de ce projet.
[/UPDATE]

Je vous laisse la place sur le fil de commentaire !

Autres articles sur le même sujet

La Fabrick » Nos projets

Fireworks + Javascript = Spark Skin Pleasure !

Make me Fluid

Des points…

…Des lignes…

Projection

…Et des formes

Encore plus de gelée

Sources et ressources

MdaME, ma résolution 2011 de génération de code AS3

ZXPackager : application pour l’empaquetage ZXP d’extensions CS5

Les extensions ZXP

Fonctionnement

Démarrage, et préférences

Java Home

Certificat

Fichier cible

Source de l’extension

Définition de votre extension

Finalisation

Téléchargements

ZXPackager

Extension de test

Primitive DashedLine : une petite ligne bien utile

UIGFX practice : a CircularSlider component

The component

PieButton

CircularSlider

Skin implementation

Result

Arduino #2 : Flash, socket et Processing

Un serveur série avec Processing

setup

dessine moi un serveur

Flaaaaaaaaash

Et pour AIR(2)

Bonus track

Pour finir

Arduino #1 : fabrique ta (presque) wiimote!

Un peu d’électronique

Ardu, I know

Note préliminaire

setup

loop

Un peu de Processing

RE:setup

Et je l’écoute comment le port série?

draw (comme loop en fait)

super total

Jouons !

uigfx project : Flex4 primitives library / Fireworks extension

uigfx library

ExclusionRect

PointsPath

Using constraint point

Sample

ComplexPointsPath

Define a complex point

Single contour

Multiples contours

An Extension for Fireworks

Installation

How to use this extension

Flex4 : skin et primitives

Retour sur les primitives

Comment ça marche?

Les classes de bases :

Digression : Définition et obtention d’un “data Path”

Fonctionnement du code

Obtenir un code à partir d’une forme

Et maintenant?

Un trou dans mon Rectangle

Dessin de rectangle

La primitive ExclusionRect

Utilisation

Dessine moi une forme !

ConstraintPoint : un point “contraint”

Primitive PointsPath

Utilisation

Librairie Uigfx