Bestioles en Javascript

. lecture : 2 minutes

J'essaye de me mettre à dessiner en javascript, grâce à l'élément <canvas>. Pour le moment, je tâtonne : j'ai trouvé comment dessiner des cercles, des traits… Le site Dive Into HTML5 est une bonne introduction.

Mais après avoir essayé de dessiner une petite bestiole en 2D, je me suis retrouvé avec deux cercles, et quelques traits pour le corps et les bras.

premier essai javascript et canvas

En clair, ça soûle rapidement. J'ai donc commencé à chercher des librairies javascript pour rendre le dessin plus facile à réaliser, et j'ai trouvé Raphaël.

Raphaël propose de nombreuses fonctions de dessin et d'animation; les traits peuvent être définis comme dans un fichier SVG, par exemple M 100 100 L 300 100 L 200 300 z pour dessiner un triangle :

  1. Move to (aller au point) 100,100
  2. Line to (tracer jusqu'au point) 300,100
  3. Line to 200,300
  4. et "z" pour fermer la figure (c.à.d retourner au point 100,100)

Prochaine étape donc, utiliser Raphël pour dessiner une bestiole, par exemple un moustique (vu de haut). Ensuite, je tenterai de l'animer.

Si j'arrive à compléter le projet que j'ai en tête, j'espère que javascript sera assez rapide pour rendre les animations fluides.

Commentaires

1. le 28 juin 2011 (11 h 51), par Fabien :

Autre possibilité: utiliser une couche d'abstraction du type "Dojo GFX"

http://dojotoolkit.org/reference-guide/dojox/gfx.html

Ca permet d'avoir une API unique, et de choisir son implémentation ensuite, voir meme de choisir automatiquement l'implementation selon les possibilités offertes par le client (Silverlight sur IE, HTML5 sous chrome/firefox par exemple)

Tres pratique, et en plus on peut beneficier du modele objet pour creer des formes héritant d'autres, assez utile par exemple pour créer des schemas (eg: "rounded box" hérite de "box" en ajoutant simplment des coins arrondis)

Réponse de Manu

Cool, merci pour le lien !

2.Commentaire de l'auteur, le 28 juin 2011 (13 h 59) :

Paper.js aussi à l'air prometteur !

L'ajout de commentaires est désactivé.


Manu·e

La personne qui a créé Épinards & Caramel. ☕🤔🐙

Étiquettes

In English Copié de l'ancien site Machinima Maths Épinards et Caramel Juste un lien Livre PHP Galerie d'images Connerie WoW 3615 Ma vie Conseil Actualités Film Jeux vidéos symfony 1.4 Hack DEFCON javascript Vidéos TED & TEDx Musique Piratage Réflexions IBM IA (Intelligence artificielle) Zombi Logiciel Télé Science Site internet Style Google Pentesting Code Boulot Religion Twitter Facebook Design Économie Ubuntu C'était mieux avant Symfony2 Comédie Musicale WebGL Europe Android Argent Bitcoin Sécurité informatique Cryptographie Robots Linguistique Wikileaks USA Haïti Open world game Apple Cloud HADOPI Loi Internet Minecraft Plugin Tracking Publicité Visualisation de données Last.fm Python Canvas Serious game Humour Podcast Techno-thriller Espace Norvège Nutrition Informatique Linux Firefox Jquery Science Fiction Windows Bricolage Pieuvres Wikipedia In Italiano Italie CSS Dwarf Fortress Canal+ Hardware User experience design Lego France Grèce Allemagne Photographie Censure de l'Internet Chine Écologie Vie privée Islam Maroc Violence physique Sex XIXe siècle Histoire Brésil Portugal Échecs Logique Microsoft Steam Opera Graphisme Finance Sondage Food Traduction Paris Canada Surveillance de l'Internet Horreur Algorithmique Unicode & Emoji Physique Santé Tribute MMORPG Finlande Russie XXe siècle Seconde Guerre Mondiale Langage Star Wars Impression 3D Death Framework Politique Typographie NASA Polémique Mars Féminisme Violence sexuelle Libertés fondamentales Corée du Sud Suisse Japon Toys Concurrence Droit d'auteur Éducation Estonie UK Égypte Indonésie Théâtre ONU Peine de mort Abeilles Prix Nobel En español Cannabis Aléatoire Censure Applications mobiles Course Homosexualité Danse Adobe NPR Mozilla Guitare Homophobie Mariage TWiT Settings Français DARPA Boston Dynamics Nerdfighteria Cancer Traitement de l'image Armes Secte de Scientologie The Onion Tumblr ADHD Drugs Scandale Césars Paradis fiscaux Copyright Documentaire Yahoo BDSM Post-apocalyptic Sword & Laser Virtual reality Spam Mali Timbuktu Manuscripts Crowdfunding indiegogo RSS Feedly Free Youtube Magie Meta Puzzle Tetris Grève Vocabulaire Bateaux Système métrique Vision artificielle Apprentissage automatique Traduction automatique Traitement du langage naturel Alan Turing meme Pixar Psychologie Debate Éclipse Ciel & Espace Organisation Google Analytics D3.js Vexillologie Oracle Juridique Saisons Astronomie Comète Rosetta ESA Pokémon Go Critiques, tests Programmes Élections Scrutin Météo Changement Climatique Tractors PUBG Capitalisme Changement d’heure Anarchisme Écriture Inclusive Bisexualité Game Jeux de société Toulouse Évènement