Cubin – Dessiner en HTML et JS

Cubin est un projet Web visant à tester et améliorer mes compétences en développement HTML / JavaScript.

Cet article est une archive du 5 Juin 2016 ( En savoir plus ).

Hello tout le monde !

Aujourd’hui, je vais vous présenter un nouveau projet que j’ai réalisé pour le fun, et pour mettre en pratique mes compétences.

Je l’ai nommé « Cubin« , le principe est simple, vous connaissez tous Paint ?

L’idée était de créer un système du même genre pour dessiner, mais en HTML et JavaScript.

Évidement, on est très loin de Paint ou d’un tout autre logiciel de dessin ( C’est une version extrêmement simplifiée ).

L’objectif n’était en aucun cas de récréer Paint, simplement de créer la base du système.

Je préfère prévenir, le code étant assez lourd et pas très bien optimisé, si vous avez une petite config PC, il se peut que vous rencontriez des ralentissements, voir même une impossibilité d’utiliser le système.

Fonctionnement de Cubin !

Sans plus attendre, je vais maintenant vous expliquer comment cela fonctionne.

Pour commencer, vous allez arriver sur cette interface :

Vous pouvez déjà remarquer plusieurs éléments.

• Le cadre sur lequel vous allez dessiner
• Un sélectionneur de couleurs
• Et différents paramètres que je vais détailler plus bas

Tout d’abord, il va falloir créer ce que je vais appeler une « instance« , en remplissant ces deux champs :

Pour le premier champ ( Nouveau ), vous devez entrer un nom ( Ex : Test ).

Et pour le deuxième, ( Nb pixel X ), vous devez entrer le nombre de pixels voulu sur votre cadre, sur l’axe X ( Plus la valeur est grande, plus vous aurez un risque de ralentissement ). Le maximum étant 100.

A noter que vous pouvez aussi importer une instance, pour cela, ne remplissez pas les deux champs du dessus, et choisissez le fichier .txt d’import.

Une fois ces deux champs remplis ( Ou le fichier .txt sélectionné ), il vous suffit de cliquer sur le bouton « Ajouter« .

Quand vous aurez créé votre première instance, vous allez vous rendre compte que de nouveaux boutons sont venus s’ajouter.

Pas de panique, je vous explique tout !

Premiers dessins avec Cubin !

Pour le moment, ne vous préoccupez pas de la nouvelle interface, faites votre premier dessin !

Une fois que vous pensez avoir terminés, vous allez pouvoir sauvegarder via le bouton « Save« .

Ou si vous souhaitez recommencer, vous pouvez clear le cadre.

Une fois le cadre sauvegardé, vous allez voir qu’une Frame s’est ajoutée.

Vous allez pouvoir créer des petites animations Frame par Frame.

Pour cela, il vous suffit de sauvegarder plusieurs cadres à la suite ( Ou frames ), une fois fini, il ne vous reste plus qu’à appuyer sur le bouton « Play« .

Là, votre animation se lance.

En option, vous pouvez changer la vitesse avec ce curseur :

Si vous voulez stopper la lecture de l’animation, bouton « pause« .

Et les boutons restant ?

« Renommer » permet tout simplement de renommer votre instance présente.

« Edit » permet d’éditer la frame sélectionnée, et « Delete » permet de la supprimer.

Et le bouton « Download » permet de partager votre instance actuelle.

Je vous laisse tester de vous-même 😄

Petite précision, le projet est aussi disponible sur GitGub :

• https://github.com/luluwebmaster/Cubin

Je pense en avoir terminé sur la présentation de Cubin.

A noter que vous pouvez trouver une animation d’exemple à télécharger en début de cette article !

Si vous créez des animations, n’hésitez pas à les partager, ça me ferait plaisir de voir ce que l’on peut faire avec Cubin.

Dans tous les cas, merci d’avoir lu,

Bon dessin si vous souhaitez tester Cubin,

Et sur ce, je vous souhaite une bonne continuation !