contact@luc-mergault.fr

Cubin – Dessiner en HTML et JS

Je partage à travers ce blog mes projets et ma passion pour l'informatique en général.

Cubin – Dessiner en HTML et JS

5
(1)

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 ).


Informations
Début de réalisation : 18 Avril 2016
Fin de réalisation : 19 Mai 2016
Télécharger l’animation d’exemple : Mega

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 :

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 !

  • Bitcoin
  • Ethereum
  • Binance coin
  • MetaMask
Scan to Donate Bitcoin to bc1qrunuqqs7e8e5x7lctmgflvde8claupv44qa9fg

Soutenez moi en envoyant des Bitcoin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Bitcoin 😃

Scan to Donate Ethereum to 0x81D56c63Df07ef938425e53185984DC5670E206C

Soutenez moi en envoyant des Ethereum !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Ethereum 😃

Scan to Donate Binance coin to bnb18dy3mv3f6y7h4uems5d8emn8g7zgfq7vlslkpk

Soutenez moi en envoyant des Binance coin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Binance coin 😃

Donner avec MetaMask

Si vous utilisez Metamask, vous pouvez me soutenir très simplement en cliquant sur ce bouton !

Donnez une note à cet article 😉

Note moyenne 5 / 5. Nombre de vote : 1

Pas encore de note, soyez le premier à donner une note !

Merci ! Partage cet article !

Je suis désolé que cet article ne te plaise pas

Améliorons cet article !

Dis moi ce que je peux améliorer !

 

Aucun commentaire

Ajoutez votre commentaire