0
TéléchargerLienCubin - Dessiner en HTML et JS

Type : Code - Posté le
Cubin - Dessiner en HTML et JS

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 ?
Et bien, l'idée était de créer un système du même genre pour dessiner 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 ).
Mais 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.

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

Note : Vous pouvez aussi importer une instance, pour cela, ne remplissez pas les deux champs du dessus, et choisissez le fichier .txt d'import, comme ceci :



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 !
La nouvelle interface :



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

Tester en plein écran :

- https://u.luwe.fr/2a9b3

Je pense en avoir terminé sur la présentation de Cubin.
Je vous mets en fin d'article un fichier .txt à installer, contenant une petite animation que je me suis amusé à réaliser.

- https://www.luluwebmaster.fr/creation-49/cubin-dessiner-en-html-et-js.htm?download=1

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 !

Merci à Seartic pour la correction du texte.

Poster un commentaire