HTML - Velocity Draw

Introduction à Velocity Draw

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du HTML et d'un petit outil pratique appelé Velocity Draw. En tant que votre enseignant de quartier bienveillant en informatique, je suis là pour vous guider à travers cette aventure, étape par étape. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous partons de zéro !

Qu'est-ce que Velocity Draw ?

Velocity Draw est une application de dessin simple mais puissante basée sur le canvas HTML5. Elle permet aux utilisateurs de créer des dessins en déplaçant la souris ou le doigt (sur les appareils tactiles) à l'écran. La partie cool ? Plus vous vous déplacez vite, plus la ligne devient fine !

Configuration de notre fichier HTML

Commençons par créer une structure HTML de base pour notre application Velocity Draw. Ouvrez votre éditeur de texte préféré et tapez le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// Nous mettrons notre code JavaScript ici
</script>
</body>
</html>

Cela met en place un document HTML de base avec un élément canvas où nous ferons notre dessin, et une balise script où nous écrirons notre code JavaScript.

Magie JavaScript : Rendre le Canvas Interactif

Maintenant, ajoutons un peu de JavaScript pour rendre notre canvas interactif. Nous le diviserons en petits morceaux digestes :

1. Configuration du canvas

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Ici, nous récupérons notre élément canvas, obtenons son contexte de rendu 2D (que nous utiliserons pour dessiner), et définissons sa taille pour qu'il remplisse toute la fenêtre.

2. Suivi du mouvement de la souris

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Nous configurons quelques variables pour suivre si nous sommes en train de dessiner, la dernière position de la souris, et la vélocité actuelle. Ensuite, nous ajoutons des gestionnaires d'événements pour les actions de la souris.

3. Implémentation des fonctions de dessin

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

Ces fonctions gèrent le dessin. La fonction draw est où la magie se produit - elle calcule la vélocité en fonction de la distance que la souris a parcourue et ajuste l'épaisseur de la ligne en conséquence.

Rassembler le tout

Maintenant que nous avons tous les éléments, combinons-les dans notre fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

function draw(e) {
if (!isDrawing) return;

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

Comment Ça Marche

Quand vous pressez le bouton de la souris, startDrawing est appelé, ce qui met isDrawing à true et enregistre la position de départ.
Quand vous déplacez la souris, draw est appelé plusieurs fois. Il dessine une ligne de la dernière position à la position actuelle.
La vélocité est calculée en fonction de la distance que la souris a parcourue depuis l'appel précédent.
L'épaisseur de la ligne est définie inversement proportionnelle à la vélocité - un déplacement plus rapide donne des lignes plus fines.
Quand vous relâchez le bouton de la souris ou le déplacez hors du canvas, stopDrawing est appelé, ce qui arrête le processus de dessin.

Conclusion

Félicitations ! Vous venez de créer votre propre application Velocity Draw. N'est-ce pas incroyable comment quelques lignes de code peuvent créer quelque chose d'aussi interactif et amusant ? Alors que vous jouez avec votre nouveau outil de dessin, réfléchissez à la manière dont vous pourriez l'étendre. Pourriez-vous ajouter des options de couleur ? Que diriez-vous de différents styles de pinceau ?

N'oubliez pas, la clé pour devenir un excellent programmeur est l'expérimentation et la pratique. Alors ne vous arrêtez pas ici - continuez à explorer, à coder, et surtout, continuez à vous amuser !

Méthode	Description
`getElementById`	Récupère un élément du DOM par son ID
`getContext`	Obtient le contexte de rendu pour le canvas
`addEventListener`	Attache un gestionnaire d'événement à un élément
`beginPath`	Commence un nouveau chemin dans le canvas
`moveTo`	Déplace le curseur de dessin à un point spécifié
`lineTo`	Dessine une ligne du point actuel à un point spécifié
`stroke`	Rend le chemin défini avec le style de trait actuel
`Math.sqrt`	Calcule la racine carrée d'un nombre
`Math.pow`	Eleve un nombre à une puissance spécifiée
`Math.max`	Retourne le plus grand des zéros ou plusieurs nombres

Credits: Image by storyset

Tutoriel précédent:

HTML - Bureau de diapositives Web

Tutoriel suivant:

HTML - Code QR