Faitmain Volume 1

download Faitmain Volume 1

of 76

description

cours

Transcript of Faitmain Volume 1

  • 7/21/2019 Faitmain Volume 1

    1/76

    .

  • 7/21/2019 Faitmain Volume 1

    2/76

    SommaireEdito Volume 1 3

    Tribune - Semences striles et donnes futiles 6

    What The Feuille ? 8

    Piloter des dispositifs sans fil 17

    Cindermedusae - Les Cratures Gnratives 25

    Cable d'interface pour Raspberry Pi 35

    5 petits trucs sur la photographie culinaire 45

    The Midst ? 50

    Rencontre au LabFab de Rennes 55

    Un Juke Box avec le Raspberry-Pi 59

    Le monde merveilleux des CNCs 64

    A propos 74

    - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 2/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    3/76

    Edito Volume 1Vous affichez sur votre cran (ou tenez entre vos mains, qui sait ?) le tout premier numro de Fait Main, un magazineen ligne qui couvre plusieurs sujets, savoir :

    l'informatique,

    l'lectronique,

    la cuisine l'art,

    et enfin l'cologie.

    Certains de ces sujets peuvent paratre loigns les uns des autres, comme l'cologie de l'lectronique mais en yrflchissant les projets les plus originaux et intressants sont souvent la croise de plusieurs domaines.

    Un projet base d'Arduino pour contrler un fumoir saumon ou de la cuisine sous vide, un logiciel de domotique pourdiminuer les factures d'lectricit, un script Python de gnration de musique, sont autant d'applications trs concrtesde savoir-faire en informatique, lectronique.

    Nous entrons dans l'poque reine du Do It Yourself, o, pour un budget raisonnable, n'importe lequel d'entre nous peutraliser un projet avanc que ce soit en soudant quelques composants sur un Arduino ou un Raspberry Pi, ou en

    commandant l'usinage de 10 pices moules sur un service en ligne, voire imprimes avec l'imprimante 3d du coin.Mais cela ne s'arrte pas l'lectronique: la maison, on peut bricoler du meuble, de la cuisine, des produitscosmtiques

    Une voiture de rcupe, pilote avec un Arduino.

    Fait Main a pour objectif de montrer travers ses articles ce qu'il est possible de faire avec les outils d'aujourd'hui etsans dpenser des sommes folles (ou sans rien dpenser du tout). Fait Main a envie d'veiller la crativit de chaquelectrice et lecteur, et peut-tre de lui donner l'envie de se lancer dans son propre projet DIY.

    Le magazine qui se rapproche finalement le plus de ce que nous souhaitons faire avec Fait Main est le magazineamricain Make.

    Edito Volume 1 - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 3/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://makezine.com/http://raspberrypi.org/http://fr.wikipedia.org/wiki/Domotiquehttp://arduino.cc/
  • 7/21/2019 Faitmain Volume 1

    4/76

    Fait Main sera dans un premier temps trimestriel et chaque numro, nous prsenterons une srie d'articles avec unemise en page trs pure et sans chichi.

    Chaque article essayera de toucher au moins deux des domaines cits, et nous chercherons sans cesse de nouveauxauteurs qui auront envie de participer un numro.

    L'objectif terme est de faire de Fait Main un magazine participatif o chacun puisse venir proposer un article et trerelu par d'autres passionns, puis dit.

    Fait Main est entirement gratuit et son contenu est distribu sous licence CC-By-NC-SA 3.0 et l'auteur(e) de chaque

    article conserve tous ses droits.L'objectif de cette licence est de protger le contenu des auteur(e)s afin qu'il ne puisse pas tre rutilis sur le web des fins commerciales.

    Bien videmment, les auteurs peuvent choisir de publier leurs articles sous une autre licence (par exemple dans le caso la clause "non commerciale" ne serait pas souhaite).

    Le magazine est conu en ligne, cette adresse : https://github.com/faitmain

    Si vous souhaitez participer ce projet, la page http://faitmain.org/apropos.html regroupe toutes les informationsncessaires.

    Contenu du volume 1La tribune de ce numro est un parallle entre web hberg et OGM. Lire la tribune.

    Le premier article prsente une application de reconnaissance de feuille crite pendant un Hackathon. C'estl'application qui a t crite en 24 heures par Olivier, Ronan & Tarek lors du dernier AngelHack Paris. On y parle demachine-learning au service des plantes, des hackathons de programmation & de responsive design. Lire l'article

    Le deuxime article parle de domotique et vous explique comment piloter des dispositifs sans fils - portails, dtecteursde mouvements etc. On y parle d'Arduino, de Raspberry-PI et de signal en 433 mhz. Lire l'article

    Le troisime article prsente le travail de Marcin Ignac: des mduses animes en 3D. Des captures d'cran de cesmduses ont ensuite t utilises pour faire partie d'un projet de livre gnratif. On y parle d'animation procdurale, deprocessing.js & d'hachurage. Lire l'article

    Le quatrime article vous donne 5 conseils de photos culinaires pour que vous puissiez prendre en photos vos soupes,gigots et autres desserts comme un(e) pro. Lire l'article,

    Suit une interview de Hugues Aubin au LabFab de Rennes. Lire l'article.

    Un cinquime article sur la conception d'un Juke box avec un Raspberry-PI, sans aucune soudure requise :) Lirel'article.

    Le sixime article vous explique comment recycler une vieille nappe de disque dur pour connecter le GPIO de votreRaspberry. Lire l'article.

    Le septime article est une rapide prsentation du jeu The Midst, conu avec Processing et WebPD. Lire l'article.

    Enfin, le huitime article aborde les bases du fonctionnement d'une CNC. Lire l'article.

    Bonne Lecture!

    Tarek

    EquipeLe projet FaitMain est mont par Tarek Ziad mais est surtout possible grce aux crateurs d'articles et auxrelecteurs.

    Ont particip ce numro :

    Yannick Jost, Xavier Fernandez, Mathieu Agopian, Alexis Mtaireau, Martine Cadot, Lina Ziad - relectures

    Tarek Ziad - Article "What The Feuille", Traduction "Cindermedusae", Article "Un Juke Box avec leRaspberry-Pi".

    Marcin Ignac - Article "Cindermedusae".

    Jonathan Schemoul - Article "Dispositifs sans fils"

    David Larlet - Tribune - "Semences striles et donnes futiles"

    Contenu du volume 1 - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 4/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://auteurs/david_larlet.htmlhttp://auteurs/jonathan_schemoul.htmlhttp://auteurs/marcin_ignac.htmlhttp://auteurs/tarek_ziade.htmlhttp://ziade.org/http://faitmain.org/volume-1/cncs.htmlhttp://faitmain.org/volume-1/the_midst.htmlhttp://faitmain.org/volume-1/cable-gpio.htmlhttp://faitmain.org/volume-1/raspberry-jukebox.htmlhttp://faitmain.org/volume-1/raspberry-jukebox.htmlhttp://faitmain.org/volume-1/labfab_rennes.htmlhttp://faitmain.org/volume-1/5-trucs.htmlhttp://faitmain.org/volume-1/cindermedusae.htmlhttp://faitmain.org/volume-1/dispositifs.htmlhttp://faitmain.org/volume-1/wtf.htmlhttp://faitmain.org/volume-1/semences-donnes.htmlhttp://faitmain.org/apropos.htmlhttps://github.com/faitmainhttp://creativecommons.org/licenses/by-nc-sa/3.0/deed.fr
  • 7/21/2019 Faitmain Volume 1

    5/76

    Franois Dion - Article "Cable d'interface pour Raspberry Pi"

    Brin de Cuisine - Article "5 petits trucs sur la photographie culinaire"

    Florian Strzelecki - Interview "Rencontre au LabFab de Rennes"

    Alcor Walter - Article "Le monde merveilleux des CNCs"

    Brenger Recoules - Article "The Midst"

    Contenu du volume 1 - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 5/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://auteurs/berenger_recoules.htmlhttp://auteurs/alcor_walter.htmlhttp://auteurs/florian_strzelecki.htmlhttp://auteurs/brin_de_cuisine.htmlhttp://auteurs/francois_dion.html
  • 7/21/2019 Faitmain Volume 1

    6/76

    Tribune - Semences striles et donnes futilesdate: 2013-02-01

    category: autre,ecologie

    level: vulgarisation

    author: David Larlet

    Champ de bl

    La problmatique des semences gntiquement modifies pose des questions d'ordre thique, sanitaire et social. Lessemences striles utilisant le gne au doux nom de Terminator sont emblmatiques de la socit Monsanto quiest prte diffuser tout prix ses semences, mme gratuitement titre humanitaire pour avoir un contrle de laproduction mondiale de nourriture.

    Les schmas de penses court-termistes apportant un confort immdiat ont tendance se reproduire d'undomaine un autre et c'est notamment ce qui est en train de se passer avec le Web.

    Aprs une tape de standardisation prometteuse qui permettait une interoprabilit entre les diffrentes publications(RSS, Atom, trackbacks), la mode est plutt la centralisation des donnes (Twitter) voire leur dconnexion du Web(Facebook) au profit d'un confort de publication bien rel avec la promesse de l'instantanit et de l'approcheubiquitaire.

    Le tout associ une flatterie de l'go par une quantification du partage (nombre de retweets/likes/followers/etc) quise rapproche, osons le dire, d'une comptition malsaine capitaliste du toujours plus, d'une approche en consommateurdes liens sociaux, d'une course effrne la socialisation numrique qui dtruit les communauts locales au profitd'une communaut de suiveurs inconnus.

    Or, au mme titre que les associations pour le maintien d'une agriculture paysanne (AMAP), il existe une voie pour unweb ouvert qui encourage l'artisanat et la rutilisation via un modle acentr et local. Certaines initiatives comme La

    Distribution ou CozyCloud encouragent de telles approches permettant de garder un contrle sur ses donnes etmme un hbergement sur son propre serveur afin d'assurer la prennit de ses URI. L'avnement d'outils depublication gnrant des fichiers statiques facilite grandement le dploiement et l'hbergement de ses ides etminimise les connaissances techniques ncessaires son expression sur le web. Les problmes techniques restants

    Tribune - Semences striles et donnes futiles - FaitMain Magazine - Volume 1 -Fvrier/Avril 2013

    Page 6/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://docs.getpelican.com/http://docs.getpelican.com/https://github.com/mycozycloud/https://github.com/ladistributionhttps://www.cozycloud.cc/http://ladistribution.net/http://ladistribution.net/https://fr.wikipedia.org/wiki/AMAPhttp://www.monde-diplomatique.fr/carnet/2010-06-15-Haitihttps://fr.wikipedia.org/wiki/Technologie_terminatorhttps://fr.wikipedia.org/wiki/Organisme_g%C3%A9n%C3%A9tiquement_modifi%C3%A9
  • 7/21/2019 Faitmain Volume 1

    7/76

    rsoudre sont la notification de manire distribue et l'agrgation en temps-rel mais ceux-ci ne pourront tre validsqu'aprs une adoption large chelle de tels services, permettant d'atteindre la masse sociale critique pour rendre cesservices utiles.

    tudions la liste des composants ncessaires pour garder son indpendance vis--vis de services web centraliss :

    un nom de domaine, ce qui cote entre 5 et 15 selon le niveau de support et de confiance que l'on souhaiteavoir ce niveau, en bonus non ngligeable vous pouvez associer ce domaine un certificat SSL qui assurera laconfidentialit des changes entre vos visiteurs et vos publications. Mme si vos crits ne sont pas critiques,

    pensez au fait qu'une banalisation de tels usages permet de rendre une telle pratique moins suspecte lorsqu'elleest ncessaire (nous ne vivons pas tous en dmocratie) ;

    un hbergement, il en existe tous les prix et si vous vous dirigez vers un site au rendu statique grce desgnrateurs locaux vous n'tes soumis aucune contrainte technique si ce n'est celle de l'espace disque et de labande passante qui ne devraient pas poser problme dans un premier temps au moins ;

    un logiciel de tlversement, permettant de dployer le contenu gnr sur le serveur d'hbergement. Il en existede nombreux qui ne demandent aucune connaissance technique particulire.

    Et voil ! Il ne reste plus qu' faire connatre votre URI au reste du monde. N'oubliez pas de produire un fluxpermettant vos visiteurs de s'abonner vos publications (cela est normalement gr par le gnrateur) sans avoir dpendre d'une plateforme non prenne et centralise.

    Barbels

    Vos publications, mme titre futile, constituent une partie de votre identit numrique, vos interactions sur le webparticipent votre propre dfinition et vos relations sociales. Il serait dommage de laisser des services tiersmontiser votre identit et vos interactions avec vos amis, d'autant plus qu'ils ne garantissent aucun engagement dansla dure et conduisent de vritables gnocides de donnes que j'appelle datacides lors de la fermeture brutaledes entreprises qui ont du mal trouver un business modle rentable associ la gratuit du service propos.

    Si vous tes un jardinier numrique, je vous encourage reprendre le contrle de vos semences^W^donnes afin deprenniser votre rcolte^W^identit numrique. Il n'est pas trop tard pour nourrir d'ides ouvertes et gratuites vosconcitoyens du web.

    Ragissez sur cet article.

    Tribune - Semences striles et donnes futiles - FaitMain Magazine - Volume 1 -Fvrier/Avril 2013

    Page 7/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=6http://openweb.eu.org/articles/syndication-mon-amour
  • 7/21/2019 Faitmain Volume 1

    8/76

    What The Feuille ?date: 2013-02-01

    category: ecologie,informatique

    level: vulgarisation

    author: Tarek Ziad

    Tarek & Ronan en train de tester What The Feuille (by Kenneth Reitz)

    Le Hackathon est un mot-valise, m'apprend Wikipdia contraction de hacking et de marathon. Un marathon dehacking est un vnement durant lequel des dveloppeurs vont travailler ensemble pour tenter d'acclrer ledveloppement d'un projet en se concentrant dessus le temps d'un week-end ou parfois d'une semaine.

    Dans la communaut Python, on parlera plus de sprints, terme invent par Tres Seaver pour dcrire les runions de2-3 jours pendant lesquelles des paires de programmeurs bossaient sur Zope 3 un logiciel crit en Python.

    Les Hackatons organiss par AngelHack sont encore une autre variante : vous avez 24 heures pour produire un projetde A Z dans des locaux o tous les participants se runissent et restent veills toute la nuit soigns coup de

    pizzas et Red Bull par les organisateurs.

    A la cl, la possibilit de gagner un A/R San Francisco pour pitcher des Angel Investors de la Silicon Valley.

    La plupart des projets sont des applications web. Plus rarement des applications desktop ou du hardware.

    Il ne faut pas se leurrer, mon avis, derrire la plupart des quipes participantes se cachent des startups en devenirqui planchent sur leur sujet depuis des mois voir des annes pour elles, un concours comme AngelHack est uneopportunit de s'exposer aux investisseurs, voire d'avoir la chance d'aller leur rendre visite en Californie.

    De mon cot la partie startup/pitch ne prsentait aucun intret. Mais l'ide d'essayer d'crire une appli fonctionnelleet moderne en 24h par contre...

    On s'est donc inscrit avec Olivier & Ronan et on a particip au concours sans carte de visite, ni rien vendre justel'envie de hacker une appli.

    What The Feuille ? - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 8/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://www.angelhack.com/https://fr.wikipedia.org/wiki/Hackathonhttps://secure.flickr.com/photos/kennethreitz/8239976465/in/set-72157632156365245/
  • 7/21/2019 Faitmain Volume 1

    9/76

    What The FeuilleWhat The Feuille c'est l'excellent nom trouv par Olivier pour l'application que l'on a dcid de construire pendant lehackathon.

    Le but de cette application est de deviner de quelle plante ou quel arbre provient une feuille que l'on vient de prendreen photo depuis son mobile ou sa tablette.

    Note

    Oui, j'ai dj vu des promeneurs prendre des photos avec une tablette en fort.

    On a choisi assez rapidement d'crire cette application web entirement en Javascript et HTML5 pour le cotutilisateur, sans passer par des dvelopements spcifiques la plateforme iOS ou Android pour plusieurs raisons :

    mme si des outils comme PhoneGap permettent de dvelopper une application mobile qui est ensuite compilepour chaque plateforme native, le principe de subir une modration sur l'app store d'Apple ou Google Play nousrebute profondment.

    le HTML5 et le Javascript sont compris par tous les priphriques, et notre application n'a pas besoin d'accder des fonctionnalits avances des mobiles ou tablettes, comme l'envoi de texto.

    le HTML5 et le Javascript pour les applications mobile, c'est l'avenir !

    avec un peu de responsive design, la mme interface marchera aussi sur les ordinateurs de bureau ou laptop.Cette technique consiste adapter la mise en page en fonction du priphrique qui se connecte sur le site :tlphone, tablette, ou ordinateur. En fonction de la taille de l'cran, le serveur essayera d'optimiser l'affichage.

    Ct serveur, l'application web n'a pas grand chose faire : servir 2 ou 3 crans, rcuprer les photos et les stocker,et enfin lancer l'algo d'apprentissage automatique - ou machine learning en anglais.

    Mais mine de rien, ce genre d'application touche pas mal de domaines de programmation :

    du responsive design, de manire pouvoir afficher l'application sur une tablette, un tlphone, etc ;

    du stockage d'images et de mta-donnes associes, avec potentiellement beaucoup, beaucoup d'entres ;

    une bonne dose de Javascript pour les interactions avec l'utilisateur ;

    du machine learning pour toute la partie intelligente ;

    de la programmation web pour lier le tout, avec les composantes classiques comme l'identification, le templating,etc.

    Pour rsumer le fonctionnement dans un schma simple :

    C'est pas compliqu...

    L'utilisateur trouve une feuille o l'arrache discrtement, puis dgaine son portable pour prendre un clich, etdemande notre serveur de reconnatre la feuille.

    En dtail, le flow est le suivant :

    1. La page principale permet d'uploader une photo golocalise.

    2. La photo est stocke sous un nom unique sur le disque dur du serveur.

    What The Feuille - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 9/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    https://fr.wikipedia.org/wiki/Machine_learninghttps://fr.wikipedia.org/wiki/Responsive_Web_Designhttp://www.phonegap.com/
  • 7/21/2019 Faitmain Volume 1

    10/76

    3. L'utilisateur dite la photo en indiquant au doigt (ou la souris) le haut et le bas de la feuille.

    4. Les informations de positionnement sont envoyes au serveur, qui redimensionne la photo.

    5. La photo est mise jour et affiche pour que l'utilisateur valide l'dition.

    6. L'algorithme de reconnaissance de feuilles cherche ensuite dans la base les feuilles considres comme similaires.

    7. Une liste de suggestions d'arbres/plantes est ensuite propose, et l'utilisateur peut en choisir une.

    8. Enfin, toutes les informations sur la photo sont stockes dans la base de donnes.

    Le va-et-vient entre 3. et 4. est d au fait que toutes les transformations de l'image de la feuille se font sur leserveur, car moins d'crire une application native chaque priphrique, Javascript est assez limit sur ce genre defonctionnalits.

    Edition de la feuille

    D'autres fonctionalites mineures que nous avons ajoutes au fil de la nuit sont un plantopedia une page qui listeles plantes et arbres avec les feuilles correspondantes trouves dans la base ; une page d'accueil qui affiche lesdernires photos uploades et enfin un systme d'authentification bas sur Mozilla Persona

    Responsive ?Crer un joli design responsive en 24 heures est impossible sans utiliser un toolkit qui mche le travail. Le plus souple

    et le plus puissant est Bootstrap, qui permet trs rapidement de crer un design propre et qui s'adaptera tout seulcomme un grand n'importe quel type de priphrique.

    L'autre grande qualit de Bootstrap est de permettre des dveloppeurs comme moi qui n'ont aucune notion dedesign, de faire une application web peu prs jolie, avec des botes qui s'alignent bien, un rendu moderne etstandard.

    C'est aussi le gros dfaut de Bootstrap finalement : rien ne ressemble plus un site fait avec Bootstrap qu'un autresite fait avec Bootstrap, souvent car les intgrateurs se sont contents de copier-coller les mises en page fournies enexemple, et aussi parce que il y a un Bootstrap look and feel.

    Mais pour notre hackathon, c'est parfait !

    Si vous avez envie de tester Bootstrap, je vous conseille de tester Bootswatch qui offre plusieurs thmes pour

    Bootstrap. C'est un excellent moyen de dmarrer son propre thme.La killer feature de Bootswatch c'est son Bookmarklet en bas de la page. Un lien dposer dans Firefox dans la barredes bookmarks et hop !, un menu droulant permet d'essayer les thmes fournis par le projet en live sur n'importe quelsite fait avec Bootstrap !

    Responsive ? - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 10/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://bootswatch.com/http://twitter.github.com/bootstrap/https://fr.wikipedia.org/wiki/Mozilla_Persona
  • 7/21/2019 Faitmain Volume 1

    11/76

    Le bookmarklet de bootswatch en plein action

    L'autre outil indispensable pour un design propre en 24 heures, c'est Google Web Fonts.

    La police facile.

    En quelques minutes, on trouve forcment une police qui nous plait, et il suffit d'ajouter un lien vers la CSS fournie parGoogle.

    En deux heures, les premires pages de What The Feuille taient affiches sur notre navigateur, et correctementretailles sur nos tlphones.

    Responsive ? - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 11/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    https://www.google.com/webfontshttps://www.google.com/webfontshttp://bootswatch.com/
  • 7/21/2019 Faitmain Volume 1

    12/76

    Il a quand mme fallu par la suite tout le talent de Ronan pour ajouter un logo, une texture de fond de page sympa ettous les petits rglages qui ont donn notre appli web un vrai look pro.

    Du JavascriptPour toutes les interactions avec l'utilisateur et les petits effets spciaux,jQuery est incontournable. De toute faon,il est disponible d'office dans un environnement Bootstrap.

    On s'est servi de jQuery pour le positionnement interactif des feuilles par exemple. L'utilisateur clique sur la feuille

    pour indiquer le haut et le bas, avec son doigt sur un cran tactile ou sa souris. Les coordonnes sur l'image sontenvoyes au serveur, qui applique une rotation de l'image.

    Tape ta feuille.

    On est loin de la barre d'outils de Photoshop, mais l'ide est l : l'utilisateur peaufine son image avant de demander auserveur de faire une reconnaissance de la plante ou l'arbre.

    Ce genre de fonctionnalit n'est pas dure ajouter mais prouve qu'il est possible d'crire des applications mobiles unminimum interactives bases sur HTML5 et Javascript.

    Elastic SearchLes photos uploades dans l'application sont stockes sur le disque dur, ainsi que les diffrents thumbnails, gnrs la demande.

    Elastic Search est le systme que nous avons choisi pour stocker toutes les autres informations.

    Ce n'est pas une base de donnes dans le sens strict du terme, mais un moteur de recherche bas sur le trsperformant Apache Lucene.

    Au vu des donnes que nous stockons, et au vu des requtes raliser comme par exemple une liste de feuillescorrespondant une plante donne, en batch Elastic Search est l'outil idal.

    Du Javascript - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 12/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    https://lucene.apache.org/http://elasticsearch.org/http://jquery.com/
  • 7/21/2019 Faitmain Volume 1

    13/76

    Elastic Search ajoute au dessus de Lucne un service web qui permet d'indexer et de rechercher en utilisant desmessages JSON, ce qui nous permet de ne pas avoir manipuler du XML, qui est le format d'change natif de Lucene et assez laborieux.

    Mais Elastic Search c'est bien plus que a. Les donnes indexes sont schemaless, c'est--dire qu'il n'est pasncessaire comme la plupart des moteurs de recherche de dfinir pour chaque type de document les valeurs indexer.On passe un dictionnaire JSON Elastic Search et il se dbrouille comme un grand pour crer ou mettre jour leschma.

    L'autre intrt d'Elastic Search est la possibilit de dployer plusieurs serveurs et de le laisser sharder les donnes demanire redondante c'est--dire de distribuer les donnes sur au moins deux serveurs de manire ne rien perdresi un des serveurs tombe.

    Pour le hackathon, on ne dploie qu'une machine avec tous les lements, mais potentiellement, si on prend en phototoutes les feuilles de la plante, le sharding devient indispensable.

    Le CloudEn parlant de dploiement, nous avons choisi de mettre l'application sur un serveur Amazon EC2 de type SpotInstance pour minimiser les cots au maximum pour ce premier prototype.

    Les Spot Instance sont des serveurs chez Amazon qui ne sont pas attribus des clients fixes et dont le prix delocation fluctue en fonction de l'offre et de la demande.

    C'est un systme malin pour rduire le parc de machines non utilises : Amazon met jour en temps rel son prix delocation, et pour obtenir une Spot Instance il faut faire une enchre dont le montant est suprieur au prix fix.

    L'avantage est que l'on peut avoir une machine un prix trs avantageux, comme l'explique cet article.

    Le gros inconvnient est que si le prix fix par Amazon dpasse le prix de votre enchre, vous perdez brutalement lamachine.

    Pour notre dmo, ce n'est pas trs grave et mme terme, on peut trs bien imaginer une architecture ou desmachines Spot Instance sont utilises comme noeuds pour Elastic Search du moment que l'ensemble est tolrant la disparition d'un des noeuds.

    Les donnes sont stockes dans un volume EBS (Elastic Block Store), qui est compltement indpendant desinstances. Un EBS est simplement mont comme volume supplmentaire au dmarrage d'une ou plusieurs instances.Les EBS sont hautement disponibles, contrairement aux spot instances, si bien qu'il est possible de dployer desprojets dont les bases de donnes sont stockes sur un EBS et dont toutes les applications excutes sur desinstances plus ou moins fiables.

    Il existe d'autres cloud providers comme Rackspace, qui offrent encore d'autres solutions mais Amazon estprobablement le provider qui offre le plus d'options et de souplesse, et permet de s'adapter tout type de projet.

    Bien sr, toute cette belle technologie dploye sur http://whatthefeuille.com n'avait aucun intrt pour notre dmo puisque le WiFi tait trop mauvais : les manipulations ont t prsentes sur une version locale .

    La partie webPour ce projet la partie web a pour principaux objectifs :

    l'authentification des utilisateurs

    le requtage de la base Elastic Search

    le calcul et l'affichage de pages HTML

    Il existe une plthore de frameworks qui permettent de fournir ces fonctionalits, et nous avons choisi Pyramid pourpouvoir recycler une petit application existante qui une fois dpouille de son contenu, nous a fourni un squelette avectout les outils ncessaires.

    Sans cette application de dpart, nous aurions probablement choisi un outil plus lger, comme le micro-frameworkBottle ou Flask qui permettent de monter une application web en Python en quelques lignes.

    La dfinition de micro-framework est vague, mais dans le monde Python, elle regroupe les outils dont le principal

    objectif est de simplifier au maximum la cration d'une application web, au dtriment des fonctionnalits secondaireshabituellements fournies dans les frameworks web. Il est rare par exemple de retrouver des fonctionnalits depermissions trs avances, ou des systmes de schmas de base de donns.

    Bottle par exemple est un framework distribu dans un seul module Python - et il est ncessaire d'intgrer deslibrairies externes pour la plupart des fonctionnalits avances.

    Le Cloud - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 13/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://flask.pocoo.org/http://bottlepy.org/docs/dev/http://www.pylonsproject.org/http://whatthefeuille.com/https://www.rackspace.com/https://aws.amazon.com/ebs/http://cloudcomments.net/2011/05/16/dont-forget-spot-instances-on-aws/https://aws.amazon.com/ec2/spot-instances/https://aws.amazon.com/ec2/spot-instances/https://aws.amazon.com/ec2/
  • 7/21/2019 Faitmain Volume 1

    14/76

    Pyramid reste malgrs tout un bon choix, mme en partant de zro. Mme si dmarrer une application avec ceframework est un exerice plus contraignant, c'est en gnral un choix gagnant moyen terme. En effet, il est assezfrquent de voir les projets qui grossissent abandonner les micro-frameworks pour passer des outils qui fournissentplus de fonctionnalits de base.

    Voici un exemple de code Pyramid dans notre application :

    @view_config(route_name='plants', request_method='GET',

    renderer='plants.mako')

    defplants(request):

    """Plants page."""

    query =StringQuery('*')

    plants =request.db.search(query, size=10, indices=['plants'],

    sort='name')

    data ={'messages': request.session.pop_flash(),

    'user': request.user,

    'gravatar': gravatar_image_url,

    'came_from': request.path_qs,

    'plants': plants,

    'format_date': format_es_date}

    returndata

    Cette fonction est appele quand l'utilisateur visite l'URL /plants. request.db.search lance une recherche sur la baseElastic Search pour rcuperer les 10 premires plantes. data est un dictionnaire qui contient toutes les donnesncessaires l'affichage. Dans ce cas, la liste des plantes, et quelques donnes annexes comme l'utilisateur (user).

    La fonction renvoie Pyramid le dictionnaire et indique le nom du template a utiliser : plants.mako. Le rendu estautomatiquement gnr et renvoy par le framework.

    Le reste de l'application est construit sur le mme modle : une fonction par URL.

    L'authentification est gre par Mozilla Persona, l'affichage des pages est obtenue via le moteur de template Mako etles formulaires valids via FormEncode.

    Enfin le requtage d'Elastic Search est fait par la librairie pyes.

    La partie intelligente

    Scikit-image en action.

    La partie la plus intressante est la reconnaissance des feuilles bien sr, et pour la mettre en oeuvre, nous avonsutilis la librairie Python scikit-image qui fournit un ensemble d'algorithmes pour la vision artificielle.

    Chaque feuille entre dans l'application subit d'abord une rotation et une normalisation de taille, afin d'avoir un jeu dedonnes le plus homogne possible. La rotation consiste positionner avec l'aide de l'utilisateur le haut de la feuille en

    haut au milieu de l'image et le bas de la feuille, sans compter la tige, en bas au milieu.Ces tapes de normalisation amliorent grandement les rsultats puisque l'algorithme de reconnaissance ne sait pasqu'il manipule des feuilles. Il se contente d'essayer de dtecter sur chaque photo le maximum de zones d'intrt, oufeatures en anglais.

    La partie intelligente - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 14/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://scikit-image.org/http://scikit-image.org/http://packages.python.org/pyes/http://www.formencode.org/http://docs.makotemplates.org/https://fr.wikipedia.org/wiki/Mozilla_Persona
  • 7/21/2019 Faitmain Volume 1

    15/76

  • 7/21/2019 Faitmain Volume 1

    16/76

    Des heu-reux gagnants du AngelHack (by Kenneth Reitz)

    Ce hackathon m'a fait raliser la diffrence majeure entre les moyens que nous avions il y a 5 ans et aujourd'hui nous autres petits dveloppeurs.

    Il n'y a plus besoin d'un budget consquent et d'une quipe complte pour dvelopper une ide d'application qui peut

    potentiellement s'adresser des centaines de milliers d'utilisateurs.

    Du platane. C'est du platane je vous dis.

    Pour un budget de moins de 50 euros et un petit week-end de travail, nous avons pu mettre en ligne, dans le cloudune application mobile qui ressemble quelque chose.

    Le code source est ici : https://github.com/whatthefeuille/whatthefeuille et l'application en ligne.

    Ragissez sur cet article.

    Conclusion - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 16/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=3http://whatthefeuille.com/https://github.com/whatthefeuille/whatthefeuillehttps://secure.flickr.com/photos/kennethreitz/8239979675/sizes/c/in/set-72157632156365245/
  • 7/21/2019 Faitmain Volume 1

    17/76

    Piloter des dispositifs sans fildate: 2013-02-01

    category: electronique,informatique

    level: avanc

    author: Jonathan Schemoul

    Partie 1: Rception en 433 MHz

    Vous avez sans doute entendu parler ou vu des dtecteurs de fume, d'ouverture de porte, des tlcommandes, desprises murales, etc. sans fil ?

    Que ce soit les modles chers que vous trouvez en magasin ou les modles chinois bon march, la plupart, s'ils ne sont

    pas avancs, utilisent la bande de frquence 433 MHz (n'essayez pas ceux en 315, ils sont illgaux en France).Certains autres sont en 2.4 ghz, mais nous les laisserons de cot pour l'instant.

    En ce qui concerne ces capteurs en 433 MHz, il se trouve qu'ils utilisent pour la plupart un protocole trs simple,introduit par des circuits intgrs chinois bas cot, les PT2262 ct mission et les PT2272 ct rception (d'autresplus exotiques comme les SC5262 / SC5272, HX2262 / HX2272, EV1527, RT1527, FP1527 ou encore HS1527peuvent tre trouvs et fonctionneront aussi).

    Plutt que de nous lancer dans l'acquisition de ces chips, on va utiliser notre microcontrleur, plus que capable de lefaire, pour dcoder et encoder les signaux, grce la librairie RC-Switch pour Arduino, ou RCSwitch-pi pour laRaspberry Pi.

    Regardons de plus prs ce que nous avons disposition :

    Un Arduino (ici un Leonardo, mais un Uno ou unclonequelconque fera l'affaire) - Une breadboard

    Un 433 MHz RF link kit (un metteur, un rcepteur) - Des fils breadboard

    Piloter des dispositifs sans fil - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 17/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://hackspark.fr/fr/fils-a-breadboard-renforces-male-75-pieces.htmlhttp://hackspark.fr/fr/433mhz-rf-link-kit.htmlhttp://hackspark.fr/fr/breadboard-taille-standard-platine-de-prototypage-sans-soudure-blanc-mat-16-5-5-5-cm.htmlhttp://hackspark.fr/fr/platine-seeeduino-v3-0-atmega-328p-carte-100-arduino-compatible.htmlhttp://hackspark.fr/fr/platine-seeeduino-v3-0-atmega-328p-carte-100-arduino-compatible-1.htmlhttp://hackspark.fr/fr/freeduino-usb-complete-kit.htmlhttp://hackspark.fr/fr/arduino-uno.htmlhttp://hackspark.fr/fr/arduino-leonardo.htmlhttp://hackspark.fr/fr/plateformes-de-developpement/arduino.htmlhttps://github.com/r10r/rcswitch-pihttps://github.com/r10r/rcswitch-pihttp://code.google.com/p/rc-switch/
  • 7/21/2019 Faitmain Volume 1

    18/76

    Montage dtaill

    Niveau dtecteurs :

    Un dtecteur d'ouverture de porte

    Un dtecteur PIR

    Dtecteur PIR Dtecteur d'ouverture de porte

    Regardons ce dtecteur d'ouverture de porte de plus prs :

    Gros plan sur le dtecteur d'ouverture de porte

    Piloter des dispositifs sans fil - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 18/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://hackspark.fr/fr/433mhz-wireless-door-sensor-door-switch.html
  • 7/21/2019 Faitmain Volume 1

    19/76

    On voit bien le PT2262 pour l'encodage et gauche des jumper pour choisir le code (ainsi chaque metteur aura uncode diffrent). Pas besoin de dduire le code de ces jumpers, on va faire un petit programme Arduino qui nous lesdira au fur et mesure de leur activation.

    Installation de la librairie RC SwitchTlcharger RCswitch_2.3.zip et extraire le contenu dans le sous-repertoire "libraries" (s'il n'existe pas, crez le) devotre rpertoire "sketchbook", pour que cela donne :

    sous Mac, /Users/VOTRE_UTILISATEUR/Documents/Arduino/libraries/RCswitch

    sous Linux, /home/VOTRE_UTILISATEUR/sketchbook/libraries/RCswitch

    sous Windows, C:UsersVOTRE_UTILISATEURDocumentsArduinolibrariesRCswitch

    Connexion du rcepteurLe rcepteur est simple, il suffit de le connecter au courant (+5v et GND) et un pin de l'Arduino ayant uneinterruption.

    Rcepteur

    Voici un petit tableau des interruptions :

    Carte int.0 int.1 int.2 int.3 int.4 int.5

    Uno, Ethernet 2 3

    Mega2560 2 3 21 20 19 18

    Leonardo 3 2 0 1

    Sur notre Leonardo, si nous voulons connecter notre rcepteur sur l'interrupt 0, il nous faut le connecter sur le pin 3 :

    Montage

    Reevoir des codesPour cela, nous allons lancer l'IDE Arduino et charger l'exemple de RCSwitch, "ReceiveDemo_Simple".

    Pour le Leonardo, il faut ajouter "while (!Serial) ;" avant d'crire sur le port srie (li l'utilisation de l'USB aprs lelancement) :

    Installation de la librairie RC Switch - FaitMain Magazine - Volume 1 - Fvrier/Avril2013

    Page 19/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    https://code.google.com/p/rc-switch/downloads/detail?name=RCswitch_2.3.zip&can=2&q=
  • 7/21/2019 Faitmain Volume 1

    20/76

    Le code dans Arduino IDEEnvoyons le croquis sur la carte, et lancons le moniteur srie (Outils > Moniteur Srie, aprs avoir vrifi que le porttait le bon dans Outils > Port srie).

    Actionnez votre senseur (ici le dtecteur d'ouverture de porte, en cartant les deux parties) :

    Installation de la librairie RC Switch - FaitMain Magazine - Volume 1 - Fvrier/Avril2013

    Page 20/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    21/76

    Montage

    Et magie, des codes s'affichent dans le moniteur srie :

    Retours dans le port srie

    Ce code, 13464924 dans cette capture d'cran, est l'id unique de votre senseur, 24bit est la taille de celui-ci et 1 leprotocole utilis (ici celui du PT2262).

    Si l'on active un autre senseur (le capteur de mouvement ici, il s'allume en rouge lorsqu'il dtecte un mouvement) :

    Installation de la librairie RC Switch - FaitMain Magazine - Volume 1 - Fvrier/Avril2013

    Page 21/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    22/76

    Dtection de mouvement Deux codes

    On voit que l'on reoit un nouveau code : 12449942.

    Note : si vous ne voyez rien dans la console avec un Leonardo, c'est quelque chose qui arrive souvent, n'hsitez pas ouvrir un autre moniteur srie que celui livr avec l'IDE Arduino. Par exemple, putty fait trs bien l'affaire mme sousLinux. La commande "putty -serial /dev/ttyACM2 -sercfg 9600" permet d'ouvrir ttyACM2 en 9600 baud. (remplacer

    /dev/ttyACMx par COMx sous windows :))

    InterprtationDe l garder ces codes et donner une information humainement comprhensible, il n'y a qu'un pas.

    Essayons d'envoyer une information utile sur le port srie

    #include

    #define couloir 12449942

    #define porte 13464924

    RCSwitch mySwitch =RCSwitch();

    voidsetup() {

    Serial.begin(9600);

    mySwitch.enableReceive(0);

    }

    voidloop() {

    if(mySwitch.available()) {

    intvalue =mySwitch.getReceivedValue();

    while(!Serial) ;

    switch(value) {

    caseporte:

    Serial.println("Quelqu'un a ouvert la porte

    Interprtation - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 22/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    23/76

    !");

    break;

    casecouloir:

    Serial.println("Quelqu'un marche dans le couloir !");

    break;

    default:

    Serial.print("Dispositif inconnu: ");

    Serial.println(value);

    break;

    }

    mySwitch.resetAvailable();

    }

    }

    D'abord dans setup() on initialise mySwitch sur l'interrupt 0, ensuite, dans le loop() lorsque l'on reoit un message, onagit selon ce qui est reu. On envoie un message simple "Quelqu'un a ouvert la porte !" ou "Quelqu'un marche dans lecouloir !" selon le cas.

    Voici ce que l'on reoit sur le port srie :

    Capture du port srie

    Comme vous pouvez le voir, on a l'information, mais elle se rpte. C'est d la nature du protocole, qui ne permet pasde vrifier la rception de l'information. Du coup, elle est envoye plusieurs fois pour tre sr de sa rception.

    Pour rgler ce problme, il suffit d'ajouter un timer sur la rception, pour ne l'avoir qu'une seule fois :

    #include

    #define couloir 12449942

    #define porte 13464924

    RCSwitch mySwitch =RCSwitch();

    // On limite un vnement par seconde long

    #define debounceDelay 1000

    // On a deux dtecteurs, donc on a deux timers.

    last_times[2] ={0,0};

    voidsetup() {

    Serial.begin(9600);

    mySwitch.enableReceive(0);

    }

    booldebounce(intnumber) {

    if((last_times[number] ==0) ||

    ((millis() -last_times[number]) >debounceDelay)) { last_times[number] =millis();

    returntrue;

    }

    Interprtation - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 23/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    24/76

    returnfalse;

    }

    voidloop() {

    if(mySwitch.available()) {

    intvalue =mySwitch.getReceivedValue();

    // on remet zero le timer

    while(!Serial) ;

    switch(value) {

    caseporte:

    if(debounce(0))

    Serial.println("Quelqu'un a ouvert la porte !");

    break;

    casecouloir:

    if(debounce(1))

    Serial.println("Quelqu'un marche dans le couloir !");

    break;

    default: Serial.print("Dispositif inconnu: ");

    Serial.println(value);

    break;

    }

    mySwitch.resetAvailable();

    }

    }

    Notre fonction debounce permet, pour un dtecteur donn (de 0 1 ici), de dire si c'est un nouvel vnement ou pas.Voici ce que cela donne si j'ouvre la porte, marche jusqu' une autre porte puis ouvre cette autre porte inconnue :

    Capture du port srie

    Comme vous pouvez le voir, nous n'avons pas de timer sur l'metteur inconnu mais on en a un sur ceux qui sont

    connus.

    La suite ?Dans la deuxime partie nous verrons comment envoyer des signaux une prise en 433 MHz, et envoyer et recevoirdes signaux entre Arduino selon le mme principe.

    Ragissez sur cet article.

    La suite ? - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 24/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=8http://forums.faitmain.org/viewtopic.php?id=8
  • 7/21/2019 Faitmain Volume 1

    25/76

    Cindermedusae - Les Cratures Gnrativesdate: 2013-01-02

    category: art,informatique

    level: avanc

    author: Marcin Ignac

    translator: Tarek Ziad

    Note

    Cet article est une traduction adapte de l'article de Marcin Ignac originalement paru en anglais sur son blog cette addresse.

    Vous pouvez retrouvez tous les projets de Marcin ici : http://marcinignac.com/projects/category/featured/

    Les mduses en action

    Cindermedusae est un projet qui me tient beaucoup cur. Il a t ralis trs vite (en une semaine) et a t intensif.Mais les rsultats que j'ai obtenus sont trs concluants. J'ai toujours aim l'ide de livre gnratif et la premire foisque j'ai entendu parler du concours de Written Images cela m'a tout de suite donn envie de participer.

    Written Images est un projet de livre gnratif qui a t financ via la communaut KickStarter et qui prsente desimages gnres par des programmes fournis par des artistes. Chaque impression de livre est calcule individuellement afin de crer des livres uniques.

    Cindermedusae a t selectionn avec 47 autres projets pour faire partie du livre.

    Cindermedusae - Les Cratures Gnratives - FaitMain Magazine - Volume 1 -Fvrier/Avril 2013

    Page 25/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://www.kickstarter.com/projects/deffekt/written-imageshttp://writtenimages.net/http://marcinignac.com/projects/category/featured/http://marcinignac.com/blog/cindermedusae-making-generative-creatures
  • 7/21/2019 Faitmain Volume 1

    26/76

    Un des livres imprims d_effekt

    Je travaillais encore chez shiftcontrol cette poque, pour un projet de jeu sous-marin pour la ZDF appel UniversumDer Oceane en collaboration avec les architectes de Hosoya Schaefer. Vous pouvez trouver plus d'information sur ceprojet ici.

    Nous avions beaucoup de runions pour discuter de l'ergonomie du jeu et du comportement des craturessous-marines et c'est probablement ce qui m'a intress aux mduses gantes.

    Ces animaux sont extraordinaires j'adore la faon dont elles se dplacent lentement. Un choix parfait pour tordredes fils de fers avec du code.

    Animation procduraleL'animation procdurale consiste animer des objets en temps rel par le biais d'un ensemble de rgles procdurales,

    c'est--dire une description des rgles de fonctionnement du monde physique et un ensemble de conditions initiales.

    Ce n'est pas la premire fois que je fais de l'animation procdurale. En fait, toute la Scne dmo en use et abuse. Unbon exemple est le torus en forme de cactus dans l'introduction de mon projet Borntro.

    Le code original de Cindermedusae est en C++ et utilise la bibliothque Cinder mais je dcris dans cet article les idesde base de l'animation de mduses avec des exemples de code en processing.js, le portage de Processing enJavascript.

    La plupart des exemples sont interactifs et en 2D c'est plus facile comprendre (et dessiner !). Dans quelques casje prsente des exemples en 3D et il faut un navigateur compatible WebGL pour que cela fonctionne.

    Tte de la mduseCommenons avec un cercle ou une sphre en 3D, vue du dessus. C'est l'ensemble des points quidistants d'unpoint unique, le centre du cercle. Si ce cercle a pour coordonnes (0, 0), et que le rayon du cercle est r, tous les pointsdu cercles peuvent tre dcrits comme les fonction de l'angle phi, variant de 0 2.

    Animation procdurale - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 26/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    https://fr.wikipedia.org/wiki/WebGLhttp://processing.org/http://processingjs.org/http://libcinder.org/http://marcinignac.com/projects/borntro/https://fr.wikipedia.org/wiki/Demoscenehttps://fr.wikipedia.org/wiki/Animation_proc%C3%A9duralehttp://vimeo.com/453319http://www.hosoyaschaefer.com/2010/10/universum-der-ozeane-2/http://www.hosoyaschaefer.com/http://ozeane3d.zdf.de/http://ozeane3d.zdf.de/http://shiftcontrol.dk/https://secure.flickr.com/photos/d_effekt/5793687813/sizes/l/in/set-72157623955416899/
  • 7/21/2019 Faitmain Volume 1

    27/76

    x =r *cos(phi)

    y =r *sin(phi)

    L'tape suivante consiste ajuster dynamiquement le rayon avec une fonction sinusodale pour qu'il varie de 0.925 1.075 soit de 92.5% 107.5% de sa valeur initiale.

    On multiplie aussi l'angle par dix pour avoir cet effet de vague dix fois dans le cercle.

    x =r *(1+0.075*cos(phi *10)) *cos(phi)

    y =r *(1+0.075*cos(phi *10)) *sin(phi)

    Les segments rouges que vous voyez sur l'image sont les segments slctionns comme points de dpart pouraccrocher les tentacules de la mduse. Nous nous y intresserons plus tard.

    Vue des ttes du dessus cliquez pour le code

    Si l'on regarde la tte de notre mduse en 2D sur le ct, c'est aussi un cercle, puisqu' la fin nous jouons avec dessphres.

    La diffrence avec le calcul prcdent est que cette fois-ci, la variation de l'angle theta va de 0 (en haut) 2 (en bas)

    La tte est symtrique le long de l'axe Y, donc nous construirons 2 points chaque tape un gauche et un droite :

    x = r * cos(theta)

    y = r * sin(theta)

    x' = -x

    y' = y

    Sachant que la tte de la mduse ressemble plus un dme qu'une sphre, nous devons faire une forme qui estconvexe au dessus et concave en dessous.

    Il suffit d'inverser la valeur de la coordonne Y en atteignant /2, ou 90' dans notre cas. On ajoute aussi r/2 pour

    pousser l'arc de cercle obtenu aprs /2 vers le bas, afin que les deux arcs ne se confondent pas :

    if(theta

  • 7/21/2019 Faitmain Volume 1

    28/76

    Vue des ttes de ct cliquez pour le code

    Il y a de meilleures techniques d'animations mais comme Written Images n'tait pas un concours d'animation, j'ai utilisl'outil le plus simple : sin(). Personne ne verra la diffrence sur des pages statiques de toute faon.

    Pour chaque frame o je calcule les positions x et y, je calcule aussi la droite normale la surface.

    Ensuite, si l'animation est lance, je dplace le point le long de la normale en utilisant la valeur de la fonction sin() uninstant t . Cette formule dplace les points mais sans rien faire de plus, la tte se mettrait faire des pulsationscomme un cur, en grossissant et rtrcissant car tous les points se dplacent en phase.

    C'est pourquoi j'ajoute y * 0.5 t pour introduire un dcalage de phase le long de l'axe Y et la structure en fil de fer(wireframe ou mesh en anglais) commence bouger d'une manire un peu plus naturelle.

    x +=normal.x *sin(t +y *0.5)

    y +=normal.y *sin(t +y *0.5)

    Vue anime des ttes de ct cliquez pour code & animationJ'ai dcid de combiner toutes les tapes dans un script processing.js en 3D, et ma surprise le code obtenu estquasiment un copier-coller de la version C++. J'ai essay de garder le code le plus simple & clair possible pour cetarticle, donc il n'est pas optimal : les performances ne sont pas au rendez-vous.

    Animation procdurale - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 28/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://marcinignac.com/blog/cindermedusae-making-generative-creatures/mesh03.htmlhttps://fr.wikipedia.org/wiki/Normale_%C3%A0_une_surfacehttp://marcinignac.com/blog/cindermedusae-making-generative-creatures/mesh02.html
  • 7/21/2019 Faitmain Volume 1

    29/76

    Vue anime en 3D cliquez pour code & animation

    TentaculesProblme Etant donn une courbe ou plutt une ligne polygonale, fabriquez un mesh en forme de tube autour decette ligne.

    Solution On dmarre avec trois vecteurs perpendiculaires :

    Forward - gnralement le vecteur normal l'endroit o je veux accrocher la tentacule ou si j'ai l'quation dela courbe, ce serait le vecteur tangeant.

    Up - choisi arbitrairement : (0,1,0) et

    Left qui peut tre calcul avec la rgle de la main droite.

    La formule de la rgle de la main droite s'applique ainsi :

    L = U x F

    O x est le produit vectoriel des deux vecteurs trois dimensions.

    Pour le deuxime point de notre ligne, on a le nouveau vecteur F' et l'on conserve le mme vecteur L, on peut calculerle nouveau vecteur U' :

    U' = F' x L

    En rptant cette opration pour chaque point/segment de la ligne, on obtient une srie de coordonnes pour chaquevecteur Up, Front et Left.

    Rgle de la main droite

    Tous ces calculs sont inspirs du repre de Frenet.

    Si vous dveloppez dans Cinder, vous n'avez pas vous soucier de tous ces calculs, car le dveloppeur Chaoticbob acontribu un systme encore plus performant : les Parallel Transport Frames.

    Maintenant que nous avons les vecteurs Up et Forward, il est facile de construire des triangles. Dans l'exemple suivantj'ai ajout deux lements supplmentaires. Le premier ajout est une rduction du vecteur Up pour que la pointe de latentacule apparaisse plus fine.

    Tentacules - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 29/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forum.libcinder.org/#topic/23286000000494005http://forum.libcinder.org/#User/chaoticbobhttps://fr.wikipedia.org/wiki/Rep%C3%A8re_de_Frenethttps://fr.wikipedia.org/wiki/Produit_vectorielhttps://fr.wikipedia.org/wiki/Regle_de_la_main_droitehttp://marcinignac.com/blog/cindermedusae-making-generative-creatures/mesh04.html
  • 7/21/2019 Faitmain Volume 1

    30/76

    Le deuxime ajout est un enroulement de la tentacule en fonction de la position de la souris. La tentacule est de plusen plus enroule au fur et mesure que l'on se rapproche de la pointe la force de cette enroulement estreprsente par des lignes rouges.

    Tentacules animes cliquez sur l'image

    Nous sommes maintenant prts attacher les tentacules la tte. Je regroupe tous les lments car le travail desombres masquera les discontinuits de la surface.

    Tentacules & corps anims cliquez sur l'image

    Rendu finalJ'ai utilis une gomtrie de triangles beaucoup plus dense pour le rendu ci-dessus, pour des plus belles courbes etpour viter des artefacts d'antialiasing.

    Rendu final - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 30/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://marcinignac.com/blog/cindermedusae-making-generative-creatures/mesh06.htmlhttp://marcinignac.com/blog/cindermedusae-making-generative-creatures/mesh05.html
  • 7/21/2019 Faitmain Volume 1

    31/76

    Rendu final

    Ombres procduralesLorsque j'ai commenc ce projet, je faisais des essais avec de la Transluminescence et j'avais des rendusassezbeaux.

    Mais j'ai chang d'avis aprs tre tomb sur le travail de Ernst Haeckel et son livre incroyable : "Kunstformen derNatur". Je savais que c'tait la bonne voie.

    La premire tape est d'utiliser de la lumire diffuse standard juste pour vrifier que mon wireframe est suffisamentlisse et n'a pas de normales au comportement trange.

    Ombres procdurales - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 31/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://en.wikipedia.org/wiki/Kunstformen_der_Naturhttp://en.wikipedia.org/wiki/Kunstformen_der_Naturhttps://fr.wikipedia.org/wiki/Ernst_Haeckelhttps://secure.flickr.com/photos/marcinignac/4776954906/in/set-72157624330971273/https://secure.flickr.com/photos/marcinignac/4776954912/in/set-72157624330971273/https://secure.flickr.com/photos/marcinignac/4776954910/in/set-72157624330971273/https://fr.wikipedia.org/wiki/Subsurface_scattering
  • 7/21/2019 Faitmain Volume 1

    32/76

    Lumire diffuse applique au modle 3D.

    HachurageIl y a beaucoup d'articles de recherche sur les techniques pour avoir un rendu croquis. J'ai bas mon implmentation

    sur du code issu du livre OpenGL Shading Language BookL'algorithme gnre d'abord des traits verticaux avec les coordonnes de texture, puis choisit la densit des traits enfonction de la lumire diffuse. Moins il y a de lumire, plus la densit des traits augmente.

    Un paramtre important pour un beau rendu est de bien choisir l'paisseur des traits : ni trop fin pour ne pas avoird'effet de moir, ni trop pais pour ne pas perdre en finesse de rendu.

    Un grand rendu hors-cran dans un framebuffer object de 4080 sur 2720 pixels, et l'antialiasing aident beaucoup choisir la bonne paisseur.

    Hachurage cliquez pour la version hi-res

    Malheureusement il n'y a aucun exemple bas sur processing.js, en partie car j'utilise des fonctionnalits qui dpendentdes extensions WebGL GLSL, comme GL_OES_standard_derivatives et les fonctions dFdx / dFdy.

    Pour aller plus loin, vous pouvez consulter le livre mention.

    CouleursChaque image est compose de cinq couches :

    Hachurage - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 32/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://marcinignac.com/blog/cindermedusae-making-generative-creatures/hatching_hi.jpghttp://libcinder.org/docs/v0.8.4/guide__gl___fbo.htmlhttps://fr.wikipedia.org/wiki/Moir%C3%A9_%28effet_de_contraste%29http://www.amazon.fr/OpenGL-Shading-Language-Randi-Rost/dp/0321637631
  • 7/21/2019 Faitmain Volume 1

    33/76

    un fond jaune

    des coins de page orange

    un hachurage en noir

    des reflets bleus

    des bordures roses

    Les reflets bleus et les coins de pages ont t bruits pour donner une impression de coloriage la main.

    Colorisation cliquez pour la version hi-res

    Rsultat final combin

    ParamtrageJ'ai aussi cr une interface graphique de paramtrage trs simple. Cette interface me permet de jouer avecl'ensemble des paramtres de la simulation et de regarder comment la crature volue en temps rel. Pour lesparamtres qui varient entre une valeur minimale et maximale, l'interface me permet de calibrer ces limites afin degarder un rendu de mduse raliste.

    Paramtrage - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 33/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://marcinignac.com/blog/cindermedusae-making-generative-creatures/color_layers_hi.jpg
  • 7/21/2019 Faitmain Volume 1

    34/76

    Interface de paramtrage

    La suite ?J'ai trs envie de continuer le travail sur ce projet. Une amlioration vidente serait d'optimiser le code pour que lenombre de frames par secondes (FPS) soit correct. Il plafonne actuellement 10 FPS.

    Je pensais aussi faire un portage sur WebGL pour que les utilisateurs puissent s'amuser crer leurs proprescratures en ligne.

    Enfin, j'aimerais tendre le systme et jouer avec d'autres types d'organismes ou de plantes.

    Ragissez sur cet article.

    La suite ? - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 34/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=4
  • 7/21/2019 Faitmain Volume 1

    35/76

    Cable d'interface pour Raspberry Pidate: 2013-02-01

    category: informatique,electronique

    level: vulgarisation

    author: Franois Dion

    Exemple de circuit fait main reli a un Raspberry Pi, avec un cable fait main.

    Une des fonctions qui a contribu au succs du Raspberry Pi, c'est la possibilit d'interface avec le monde extrieur.On parle ici des GPIO (en anglais les General Purpose Input and Output entres et sorties pour tout usage), quise retrouvent au connecteur P1. En fabricant notre propre cble, on pourra se connecter des DELs (diodeslectroluminescentes), des moteurs ou autres composants physiques.

    Comment faire un cable d'interface GPIONous allons faire du recyclage aujourd'hui. En effet, le type de cble que l'on va faire, un cble plat a 26 conducteurs,est trs proche d'un cble trs commun que l'on peut retrouver un peu partout, dans le fond d'un tiroir, dans une boitede vieux composantes d'ordinateur... Il suffit de fouiller un peu, il y en a des dizaines de millions qui ne demandent qu'se rendre utile une fois de plus.

    De quoi s'agit'il ? D'une nappe pour disque dur IDE (ou ATA) 40 conducteurs. On peut aussi utiliser un cbleATA66/133 80 conducteurs, mais c'est beaucoup plus de boulot, et il y a le risque de se retrouver avec un cble quine fonctionne pas, d un court-circuit entre la mise la masse et notre signal. Je recommande donc plutt les cbles

    40 conducteurs, plus vieux et trs communs :

    Cable d'interface pour Raspberry Pi - FaitMain Magazine - Volume 1 - Fvrier/Avril2013

    Page 35/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://fr.wikipedia.org/wiki/Advanced_Technology_Attachmenthttp://fr.wikipedia.org/wiki/Diode_%C3%A9lectroluminescentehttp://fr.wikipedia.org/wiki/GPIO
  • 7/21/2019 Faitmain Volume 1

    36/76

    Cable IDE pour disque dur, 40 conducteurs.

    Au boulotNous aurons besoin de 2 connecteurs, et non de 3. Avec un cble comme celui de la photo, on coupe une section avecdes ciseaux :

    Au boulot - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 36/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    37/76

    On coupe l'extra avec des ciseaux.Il faut ensuite diviser le cble. En effet, on n'a besoin que de 26 conducteurs, et on en a 40. Avec le fil rouge agauche, on compte 26 fils et on marque avec un feutre permanent la division. On compte du cote droit pour s'assurerque l'on a bien 14 fils, pas un de plus ou de moins.

    Au boulot - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 37/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    38/76

    Marquer au feutre une ligne qui dlimite 26 et 14 conducteurs.La prochaine tape consiste a faire une incision avec un couteau genre X-acto ou un scalpel, dans la rainure entre les2 fils, et ceci sans endommager l'isolation des fils. Le plus simple c'est de commencer l'incision au couteau et de la finir la main, en tirant de chaque cote de l'incision.

    Au boulot - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 38/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    39/76

    Faire l'incision et sparer les 2 parties.Il faut maintenant couper le connecteur exactement sur la septime range de trous, en partant de la droite. On peut lefaire avec une petite scie a dcouper le mtal, ou encore avec une meule a dcouper, dans le genre Dremel.

    Au boulot - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 39/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    40/76

    Faire la dcoupe. Ici, on a mis un connecteur male de 2x13 pour s'assurer de ne pas se tromper d'endroit.On enlve la partie du dessus, puis la section de cble 14 conducteurs, et puis finalement, aprs avoir fait uneentaille, on enlve la partie de dessous.

    Au boulot - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 40/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    41/76

    On enlve la portion de droite.On est prt connecter notre cble notre Raspberry Pi. Le fil rouge marque la position #1 sur le connecteur P1. Ilfaut donc insrer le cble pour que ce fil rouge soit du cote de la carte SD, et non pas du cote du connecteur RCA /video composite (jaune) :

    Au boulot - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 41/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    42/76

    Conducteur rouge sur position #1, pres de la carte SD.

    ConnectionsAfin de vrifier le fonctionnement de notre cble, on va faire une connexion de 2 DELs, une rouge et une verte. Pasbesoin de fil ou soudure car on va simplement insrer les DELs dans les trous du cble.

    En suivant le diagramme ci dessous :

    La patte courte de la DEL rouge et de la DEL verte vont se connecter au troisime trou du cote gauche

    La patte longue de la DEL rouge au deuxime trou du cote droit

    La patte longue de la DEL verte au troisime trou du cote droit

    Connections - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 42/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    43/76

    Le PythonAvant toute chose, on doit se procurer un module Python du nom de RPi.GPIO. C'est un module qui permet decontrler les GPIO sur un Raspberry Pi. Sur Raspbian, il est maintenant inclus, mais si on utilise une autre version deLinux, on peut l'installer grce a

    easy_install RPi.GPIO

    ou bien par apt-get :

    $ sudo apt-get install python-rpi.gpio

    Crer un fichier portant le nom flashled.py ayant le contenu suivant :

    #!/usr/bin/env python

    """ 2 DEL qui s'allument en alternance """

    importRPi.GPIOasgpioimporttime

    PINR =0 # on utilisera 2 sur un RPi V2

    PING =1 # on utilisera 3 sur un RPi V2

    gpio.setmode(gpio.BCM) # mode Broadcom

    gpio.setup(PINR, gpio.OUT) # DEL rouge en mode sortie (OUT)

    gpio.setup(PING, gpio.OUT) # DEL verte en mode sortie (OUT)

    #On alterne pour l'eternite

    try:

    whileTrue:

    gpio.output(PINR, gpio.HIGH)

    gpio.output(PING, gpio.LOW)

    time.sleep(1)

    gpio.output(PINR, gpio.LOW)

    gpio.output(PING, gpio.HIGH)

    time.sleep(1)

    exceptKeyboardInterrupt:

    gpio.cleanup()

    PINR est le GPIO pour la DEL rouge (0 pour un Rpi V1 et 2 pour un V2)

    PING est le GPIO pour la DEL verte (1 pour un Rpi V1 et 3 pour un V2)

    On slectionne le mode Broadcom (BCM), et on active les 2 GPIO comme sorties (OUT). La boucle va alterner entreDEL rouge allume / DEL verte teinte durant 1 seconde, et DEL rouge teinte / DEL verte allume durant uneseconde (time.sleep(1)). Si on fait un CTRL-C durant l'excution, le programme termine aprs avoir fait le mnage, parl'entremise de gpio.cleanup().

    On y vaNormalement, on doit toujours protger une DEL avec une rsistance, pour limiter le courant. Toutefois, comme lesGPIO ne peuvent fournir que 20mA et que dans ce test on allume les DELs de faon intermittente, on peut ignorercette rsistance sans risque dans ce cas particulier.

    Pour un usage prolong, on va devoir ajouter une rsistance en srie de 220 a 360 Ohm.

    Pour lancer le script que l'on vient de sauver, on doit le rendre excutable, et le lancer avec permission root (sudo), cause du module RPi.GPIO qui a besoin d'accder en criture /dev/mem :

    Le Python - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 43/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://pypi.python.org/pypi/RPi.GPIO
  • 7/21/2019 Faitmain Volume 1

    44/76

    $ chmod +x flashled.py

    $ sudo ./flashled.py

    CTRL-C interrompt l'excution.

    DEL Rouge DEL Vert

    Ceci conclut notre petit article. Dans un prochain numro, nous allons fabriquer un adaptateur pour plaque deprototypage.

    Ragissez sur cet article.

    Le Python - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 44/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=10
  • 7/21/2019 Faitmain Volume 1

    45/76

    5 petits trucs sur la photographie culinairedate: 2013-02-01

    category: cuisine,art

    level: vulgarisation

    author: Brin de cuisine

    Contrairement ce qu'on croit, raliser une jolie photo culinaire ncessite de la prparation. D'abord, imaginer, et cettetape doit avoir lieu avant mme d'avoir ralis la recette ! Ensuite, si l'on est tout seul revtir la fois la toque decuisinier, les gants des assistants lumire et la casquette de photographe, mieux vaut s'organiser. C'est bien plus facile plusieurs ...

    Note

    Retrouvez toutes les recettes sur http://www.brindecuisine.fr

    1. ScnariserCertains plats dlicieux ne sont pas forcement prsentables, il est donc ncessaire d'en tenir compte. Par exemple,pour un plat mijot, il vous sera ncessaire de veiller soigner le dcoupage de votre viande, ainsi que le parage devos lgumes, pour pouvoir les prsenter d'une manire agrable l'il.

    Le tajine est un bon exemple. Pour le rendre apptissant, j'ai dispos les morceaux dans une assiette, en otant le jusde cuisson

    Penser aussi ds cette tape l'harmonisation du plat avec la vaisselle et le dcor, que vous pouvez choisir neutre ousignifiant.

    5 petits trucs sur la photographie culinaire - FaitMain Magazine - Volume 1 -Fvrier/Avril 2013

    Page 45/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://www.brindecuisine.fr/tajine-leger-de-volaille-aux-coings-et-citrons-confits/http://www.brindecuisine.fr/
  • 7/21/2019 Faitmain Volume 1

    46/76

    Un fond blanc et un voilage trs simple sont un exemplede dcor neutre.

    Un dcor signifiant donne aussi beaucoup d'ambiance une photo.

    2. clairerPrivilgiez autant que possible la lumire naturelle, c'est elle qui donne les couleurs les plus apptissantes. Dehors ouderrire une fentre, le soleil permet de multiples clairages. Un voilage servira de diffuseur. Attention la lumiredirecte, qui donne des ombres dures.

    Une lumire du jour rasante donne de la profondeur l'image

    La lumire artificielle est plus difficile grer. Maisparfois, on n'a pas le choix, notamment en hiver,

    lorsque le jour est de courte dure.

    2. clairer - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 46/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    47/76

    Les nuages forment le meilleur des diffuseurs.

    3. PrparerAvant de raliser votre photo, faites votre mise en scne avec la vaisselle et accessoires, sans le plat. Cela vouspermettra de vrifier quelle prise de vues est la plus adapte. Variez la focale, les angles et l'orientation de la lumire,la distance de prise de vues, et si votre appareil se dbraye, la profondeur de champ : ces paramtres ne donnent pasdu tout les mmes effets.

    La macro donne toute sa place au sujet de la photo

    4. CadrerLa photo culinaire se prte de nombreux styles photographiques. Clair ou sombre, en plan rapproch ou plus loign,en nature morte ou avec prsence humaine, vous de trouver votre prfr. Ou bien de varier selon les recettes. Voiciquelques exemples :

    Lifestyle, c'est--dire prise de vue intgrant la prsencehumaine

    Style "nature", lumire du jour et ingrdients frais

    3. Prparer - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 47/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://www.brindecuisine.fr/comment-rater-ses-fudge-et-decouvrir-que-le-caramel-en-poudre-cest-delicieux/http://www.brindecuisine.fr/mures-du-jardin-un-parfum-de-fin-dete/
  • 7/21/2019 Faitmain Volume 1

    48/76

    Plan rapproch en studio, double clairage latral demme puissance.

    Clair-obscur.

    La vue plongeante est adapte aux recettesfamiliales, ralises dans de grands plats.

    Le high key consiste clairer fortement le sujet, et lgrement surexposer afin qu'il n'y ait aucune zone decouleur noire, et le moins possible d'ombre grise.

    5. PlanifierLes prparations froides permettent videmment de prendre tout son temps, mais ce n'est pas le cas des plats chauds

    dont l'aspect se matifie en refroidissant, le rendant moins apptissant. Il faut donc que tout soit prt avant de mettrevotre prparation dans le cadre de la photo. Je vous conseille de poser votre appareil sur pied, l'allumer, cadrer, etd'ensuite seulement disposer les lments.

    5. Planifier - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 48/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://www.brindecuisine.fr/veloute-aux-orties/
  • 7/21/2019 Faitmain Volume 1

    49/76

    Ragissez sur cet article.

    5. Planifier - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 49/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=7
  • 7/21/2019 Faitmain Volume 1

    50/76

    The Midst ?date: 2013-02-01

    category: art, informatique

    level: vulgarisation

    author: Brenger Recoules

    Un arbre rcursif

    The Midst est un projet de art-game se jouant en ligne : comme cela arrive souvent aux personnages principaux dejeux vido, la petite-amie de Hro s'est fait enlever ; cette fois ci ce sont de mchants pixels blancs qui ont fait le coup(the white meanies) ; en consquence Hro est condamn errer dans un labyrinthe de fentres pop-up en noir etblanc truff d'obstacles, dans le but de dnicher une sortie et d'alors pouvoir peut-tre retrouver sa dulcine.

    Ce jeu se dcline aussi en un atelier et une srie de ressources en ligne permettant de dcouvrir les technologies luvre : beaucoup de processing.js pour la cration graphique et l'animation, une gnreuse portion de Webpd pour lasynthse sonore en temps rel, un soupon de HTML5 et une pince de jQuery pour faire en sorte que tout celafonctionne dans une page web. C'est du coup l'occasion de comprendre comment implmenter une succession depetits jeux simples allant du pong au casse-brique...

    Le code complet du jeu est disponible et consultable en ligne cette adresse : https://github.com/b2renger/TheMidst

    Au programme et en vrac : systme particules, physique et vecteurs pour l'animation, interaction, tweening, collisionsnon orthogonales, synthse sonore, musique gnrative...

    Du point de vue des technologies on utilise des outils libres et gratuits et qui disposent d'une large communautd'acteurs internationaux. Cet article va se concentrer sur webpd qui n'est pas encore compltement document alorsque processing.js, lui, dispose dj d'une communaut vibrante et d'une multitude d'exemples de code en ligne.

    Pour rappel, Processing est un langage de programmation apparu en 2001 au MIT, qui a pour vocation de faciliterl'apprentissage de la programmation objet en l'appliquant au dessin, l'animation, l'interaction et la visualisation dedonnes. Aujourd'hui il y a une trs large communaut internationale et le langage permet aussi bien de dvelopperpour des ordinateurs, que pour des tlphones Android ou encore des navigateurs web.

    Pure Data est un langage de programmation visuelle n en 1996, il est la rsultante d'une partie des travaux de MillerPuckette l'IRCAM : c'est le petit frre libre et gratuit de MAX/MSP. Il permet de crer du code en reliant des botesentre elles l'aide de fils : c'est un langage de programmation trs utilis pour la cration sonore, mais aussi graphiqueainsi que pour l'interaction.

    The Midst ? - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 50/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://crca.ucsd.edu/~msp/software.htmlhttp://www.processing.org/http://fr.wikipedia.org/wiki/Tweeninghttps://github.com/b2renger/TheMidsthttp://fr.wikipedia.org/wiki/Casse_briquehttp://fr.wikipedia.org/wiki/Ponghttp://jquery.com/https://github.com/sebpiq/WebPdhttp://processingjs.org/http://weblab.pagesperso-orange.fr/
  • 7/21/2019 Faitmain Volume 1

    51/76

    La Structure du jeu et du codeLe code du jeu est structur de manire assez simple. Pour chaque fentre nous avons recours un canvas html quiva excuter un sketch processing ainsi qu'un patch Pure Data. Deux pages html sont prsentes, index.html etlevel-template.html qui font appel a diffrents scripts JavaScript permettant d'aller chercher les fichiers level*.pde(pour l'animation) et level*.pd (pour le son).

    cran d'accueil

    Lorsqu'on clique sur le bouton "start" une fentre pop-up va s'ouvrir : c'est le premier niveau incarn par la fentre"level-template.html" : partir de ce moment l toutes les ressources seront charges dans cette mme fentre de200x200 pixels. On se dplace ainsi de niveau en niveau en cherchant o sont les murs et o sont les passages versles cases adjacentes.

    La case de dbut du jeu.

    La base de code produite au niveau un permet d'avoir une ellipse (notre personnage principal), qui est anime de deuxfaons : la premire consiste modifier la largeur et la hauteur de cette ellipse en fonction de son loignement de lasouris et la seconde animation consiste permettre ce personnage de se dplacer dans l'espace de chaque case l'aide de l'application de lois physiques.

    Le personnage une masse, une position, une vlocit ainsi qu'une acclration. Une force de friction a aussi timplmente. Lorsque l'on clique quelque part, le personnage va alors subir une modification de son acclration qui vadonc se rpercuter sur sa vitesse puis sur sa position. La relation est tout simplement une addition de vecteurs : pourobtenir le nouveau vecteur de vlocit on lui ajoute le vecteur acclration; pour obtenir le nouveau vecteur deposition on y ajoute le vecteur de vlocit etc.

    A partir de l tout est permis. L'avantage d'utiliser Processing dans ce contexte se situe dans le fait que l'on peut avoiraccs des notions de programmation objets, il est donc possible de structurer sont code l'aide de classes et ducoup de gagner une certaine flexibilit. De plus procession offre tout un tas de primitives de dessin dont la syntaxe estgrandement simplifie.

    La Structure du jeu et du code - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 51/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    52/76

    Le moteur audio : webpdWebpd est une librairie JavaScript qui permet de faire de la synthse audio en temps rel. Pour ceux qui connaissentdj Pure-Data, s'en est un port partiel pour JavaScript : cela veut dire que vous pouvez faire tourner certains patchsdirectement dans votre navigateur. Pour ceux qui ne connaissent pas Pure-Data je vous invite lire la suite...

    Le hello world de Pure Data.

    The midst prsente une particularit au niveau du gameplay et de l'implmentation du moteur audio. J'ai choisivolontairement de conserver la mme fentre pour tous les niveaux, cela signifie qu' chaque fois qu'on l'on quitteraune case une nouvelle page va se charger (un canvas avec un sketch Processing et un patch Pure Data). J'ai doncchoisit de crer l'ambiance sonore de chaque case l'aide d'un "drone" audio, c'est dire un accord tenu le temps quel'on reste dans la case, mais cet accord est modul par la position du hros dans sa case ainsi que par son animation.

    La source audio.

    L'accord est form de deux sons : un oscillateur, et un phasor (forme d'onde en triangle), on utilise la convention MIDIpour choisir la frquence laquelle vont osciller ces deux sources, l'objet [mtof] permet la conversion de notes midi enfrquences.

    Une premire enveloppe contrle par l'animation du personnage.

    Une seconde enveloppe contrle par la position du personnage dans la case.

    La sortie audio : l'objet [dac~] reprsente les haut-parleurs de votre ordinateur.

    Il reste maintenant dupliquer ce code quatre fois (et changer la valeur de la note midi joue chaque fois pourformer un accord) puis interfacer le code de notre ambiance sonore avec notre code processing.js qui rgitl'animation de notre personnage principal, c'est dire permettre notre code processing.js d'envoyer des messages webpd pour moduler le son de notre synthtiseur en temps rel.

    Le moteur audio : webpd - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 52/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    53/76

    Linterfaage d'un seul drone avec processing JS.

    En ce qui concerne le son de collision on peut se servir d'un bruit blanc qui va tre modul par une enveloppe maison.

    La source sonore est cette fois un bruit blanc [noise~].

    L'enveloppe "maison" : un enveloppe attack (1ms) decay (10ms).

    Les deux parties assembles.

    Pour jouer ce son, on pourra maintenant envoyer un message de type :

    patch.send("pjstick","bang");

    Il ne nous reste alors plus qu' tout assembler, pour obtenir la base du moteur audio du jeu :

    Le moteur audio : webpd - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 53/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    54/76

    Le moteur audio au complet

    Nous ne sommes bien sr pas du tout obligs de synthtiser tous les sons ! Il est possible de charger des sons et deles jouer comme on le souhaite (une fois, en boucle, ou alors juste des bouts droite gauche). Si vous y arrivez, ledernier niveau vous permettra de dcouvrir une premire approche de la musique gnrative pour le web. L'avantagede Pure Data et qu'il existe une large communaut de musiciens qui l'utilisent, ceux-ci seront mme de mettre enplace un moteur audio complet et interactifs pour le web.

    The Midst ...

    Comme je le mentionnais au dbut ce jeu est aussi un atelier dont la premire dition aura lieu du 16 janvier au 20fvrier Stereolux Nantes, sous forme de six sances de deux heures, qui permettront leurs participants de sefamiliariser avec ces technologies mais aussi de dvelopper une case du jeu. J'espre qu'avec le temps le jeus'toffera que le labyrinthe s'tendra... alors si vous souhaitez contribuer n'hsitez pas me contacter !

    Ragissez sur cet article.

    The Midst ... - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 54/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://forums.faitmain.org/viewtopic.php?id=11http://www.stereolux.org/
  • 7/21/2019 Faitmain Volume 1

    55/76

    Rencontre au LabFab de Rennesdate: 2013-02-01

    category: electronique,informatique,art

    level: vulgarisation

    author: Florian Strzelecki

    Hugues Aubin en train de montrer une carte Arduino un atelier du LabFab

    Depuis que je frquente Hugues Aubin aka @Hugobiwan sur Twitter, je suis chaque fois surpris non seulement par sesprojets et par les nouvelles qu'il apporte, mais aussi (et surtout) par la ferveur et l'nergie qui l'animent.

    Rencontre avec le porteur du projet "LabFab", un FabLab Rennes, qui a ouvert ses portes l'anne dernire, et qui vabientt employer temps plein une personne pour accueillir le public.

    Petite introduction

    Rencontre au LabFab de Rennes - FaitMain Magazine - Volume 1 - Fvrier/Avril 2013

    Page 55/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    https://twitter.com/Hugobiwanhttp://labfab.fr/
  • 7/21/2019 Faitmain Volume 1

    56/76

    Lorsque je lui demande de se prsenter en quelques mots, il me tend sa carte : Hugues Aubin, "Charg de Mission TIC",sous les logos de Rennes Mtropole et de la Mairie de Rennes. Sa situation est assez exceptionnelle pour tre note,car elle lui permet de faire le pont entre des activits de la ville, et les activits de toute l'agglomration.

    Son lien avec le LabFab ? Il l'a mis en place, en contactant les bonnes personnes, et en runissant des acteurs locauxqui se posaient dj les mmes questions sur les FabLab, les Hackerspaces, et tous ces lieux qui proposent desespaces de fabrication au plus proche des gens.

    Parce que le LabFab ne s'est pas fait tout seul ! D'abord, il y a l'Ecole europenne suprieure d'Art de Bretagne, qui

    prte des locaux pour le LabFab. Et tout comme Telecom Bretagne, l'intrt pour eux est ce qu'un FabLab apporte auxtudiants.

    Il y a la ville de Rennes, ainsi que Rennes Mtropole, qui s'intressent tous deux ce qu'un FabLab peut apporter seshabitants. Et n'oublions pas non plus la rgion Bretagne, qui participe pour des raisons similaires.

    Enfin il y a les associations BUG et la Cantine Numrique Rennaise (CNR), centrs sur les communauts et lesnouvelles technologies, ce que reprsente parfaitement le LabFab.

    L'exprience du LabFab RennesLa question qui revient souvent, me dit-il, c'est comment apprivoiser ces espaces ? Comment les inclure dans lasocit et dans ses projets ? Parce que mme s'il ne fait pas de doute que ces lieux ouverts sont trs intressants, ilreste savoir comment les mettre en place.

    l'origine, le but de l'exprience est d'essayer quelque chose, et d'essayer vite, en investissant peu de moyens d'unepart, mais surtout sans attendre quelque chose en retour : ni objectif, ni russite, ni rsultat particulier. Le but est

    justement de savoir comment a va se passer, comment l'espace est pris en main, et qui s'y intresse.

    Alors avec juste quelques hommes, des locaux et un peu de matriel, le LabFab est mis en place, avec diffrents axesde recherche.

    Tout d'abord, que le lieu soit utile aux gens qui viennent. Qu'il serve l'ducation populaire pour accder au numrique,et aux objets qui touchent ces technologies. Hugues insiste d'ailleurs sur l'approche de consommation actuelle de latechnologie, qui amne selon lui peu d'innovation, et qui bloque l'mergence de nouveaux usages, notamment

    dmocratiques.Aujourd'hui, Internet sort des PCs, mais il reste l'apanage des spcialistes et de ceux qui savent.

    L'cole des Beaux Arts formant des tudiants au design, elle cherche obtenir plus d'intgration dans la fabrique denouveaux usages, avec les technologies de l'information (rseau, lectronique, communication inter-objets, etc.), dansles savoirs dispenss.

    Ils veulent gnrer une dynamique entre les tudiants et l'usage du LabFab.

    On retrouve aussi cette notion de mixit que ce soit pour la ville ou Tlcom Bretagne : comment faire venir autantdes professionnels que Monsieur et Madame tout le monde ? Comment intresser la fois des ingnieurs, deschercheurs et des spcialistes ? Des jeunes, vieux, amateurs, nophytes et tous les curieux ?

    Il y a une relle volont d'attirer tout le monde en mme temps.

    Les axes de recherche ne manquent dcidment pas, et Hugues est intarissable sur le sujet. Il me raconte ple-mleque ce projet apporte un tas de questions, que les gens se posent un tas de question : quel va tre le regard desexperts auprs des amateurs ? Quelles questions est-ce que cela pose, de fabriquer des choses sans brevet, sansrgles sur la "proprit intellectuelle" ?

    Sans compter que si le LabFab s'inscrit dans un environnement local, il y a une volont d'essaimer, de faire qu'uncosystme international se dveloppe.

    En 2012 Montral lors du MakerFair, ce qui se voyait le plus c'tait "tout le monde monte son FabLab" !

    Le public et le rseau des FabLabParce que le LabFab de Rennes, ce n'est qu'un tout petit lment finalement. Depuis dbut 2012, c'est un vritable

    rseau de lieux qui est en train de se dvelopper : Hugues me parle du Vietnam, de Qubec, de Dakar, ou encore duBurkina Faso, bref, tout un ensemble de pays avec des communauts francophones.

    Le problme rencontr aujourd'hui en Afrique, c'est qu'ils apprennent ventuellement leur langue maternelle et lefranais, mais rarement l'anglais. Alors que les documentations techniques, elles, sont toutes en anglais.

    L'exprience du LabFab Rennes - FaitMain Magazine - Volume 1 - Fvrier/Avril2013

    Page 56/76 - 2013 FaitMain Magazine - CC-By-NC-SA

    http://www.lacantine-rennes.net/http://www.asso-bug.org/http://www.bretagne.fr/http://metropole.rennes.fr/http://www.telecom-bretagne.eu/http://www.erba-rennes.fr/
  • 7/21/2019 Faitmain Volume 1

    57/76

    La traduction des documents et le partage de ces traductions, est devenu l'un des objectifs du LabFab.

    Parce que le public aujourd'hui est vraiment trs htrogne : j'ai pu moi-mme m'en rendre compte avec une petitesance photo lors d'un atelier sur Arduino.

    Nous avons des artistes, des vieux bricoleurs, etc. L'anne dernire avec la CNR, c'est 26 ateliers que nous avonsfait. Et ils ont tous t complets en moins de 48h ! a reprsente plus de 450 dbutants qui ont t forms !

    Un public htrogne pour cet atelier du LabFab sur Arduino connect.

    Le succs est au rendez-vous, parce qu'outre les ateliers frquents, il y a les diffrents salons auxquels est invitHugues pour parler du FabLab Rennais :

    Entre Laval Virtual et le forum des usages Brest, Vivacit, nous avons aussi reu des invitations pour aller l'tranger. Ce n'tait pas prvu du tout l'origine.

    L'exprience du LabFab Rennes - FaitMain Magazine - Volume 1 - Fvrier/Avril2013

    Page 57/76 - 2013 FaitMain Magazine - CC-By-NC-SA

  • 7/21/2019 Faitmain Volume 1

    58/76

    Plusieurs "Starter Kit" sont disponibles pour former les gens sur Arduino.

    Hugues ayant un emploi du temps de ministre, l'entretien touche bientt sa fin, et il y a encore une question ou deuxque je me pose. La premire, c'est "comment peut-on utiliser le LabFab ?".

    Il n'y a pas de rgles trs prcises. Les gens doivent venir avec un projet, c'est dire une phrase qui prsente le

    projet et ventuellement un dessin de ce que c'est cens faire, et c'est tout. On ne juge pas des projets, chacunpeut faire ce qu'il a envie, et chacun a accs au matriel du LabFab (kit Arduino pour du prototypage, uneMakerBot, etc.). On demande seulement ce que le porteur du projet partage quelque chose en change.

    Intrigu, je lui demande pourquoi cette rgle : pourquoi ne pas simplement imposer une licence ou proposer deslicences libres - puisque c'est le but.

    Les gens qui viennent n'ont pas forcment la culture du logiciel libre ou de Creative Commons. Parfois ils nesavent mme pas que a existe. Alors on leur demande de partager quelque chose : leur produit, une comptence,un savoir ou une petite partie de leur projet. Certains arrivent et savent tout de suite quelle licence utiliser, maisla majorit dcouvre le concept en venant ici.

    a laisse songeur

    Le futur du LabFabLe succs tant au rendez-vous, Hugues est serein pour l'avenir. Il a prsent un rapport d'activit RennesMtropole le 21 Dcembre dernier, un bilan d'une quarantaine de pages qu'il m'invite tlcharger sur le site duLabFab une fois publi.

    Il est plein d'espoir pour 2013, surtout qu'il a obtenu la cration d'un poste temps plein pour l'anne. Et puis il y atellement de projets, et tellement d'expriences tenter.

    Le lendemain de notre entretien, je suis pass un atelier sur "Arduino connect", o j'en ai profit pour faire quelquesphotos. Il y avait quelque chose de magique voir autour de cette table toutes ces personnes : plusieurs tudiants, unvieux pp qui a fait de l'lectronique, un couple qui vient en apprendre plus, et tous avec des connaissances etcomptences trs varies.

    Si seulement j'avais un peu plus de temps En tout cas, je vous invite franchir les portes de ce FabLab, il y a pleinde bonnes choses.

    Ragissez sur cet article