Dessin courbes de beziers

**celinechomel** · 01/01/2024, 15h23

Bonjour en 1ere année de licence math info je dois réaliser un dessin avec les courbes de Béziers de degré 2 et 3 genre une guitare un chat ou un canapé? Si qq peut m’aider car je n’y arrive pas du tout!
Merci!!

**mathieu** · 02/01/2024, 05h53

je ne sais pas à quoi correspondent les 2es et 3es degrés mais regardez peut être là :
https://developer.mozilla.org/fr/doc.../bezierCurveTo

**celinechomel** · 03/01/2024, 10h12

Merci c’est gentil j’arrive à faire des courbes mais pas un dessin entier! Please help!!!

**domi65** · 03/01/2024, 19h41

Bonjour.
Si j'étais confronté au même problème, voilà ce que je ferais :

Je dessinerais ma forme (mettons une guitare) avec le logiciel gratuit Inscape.
J'enregistrerais le fichier puis l'ouvrirais avec un éditeur.
Je chercherai dans le svg le chemin (attribut d de la balise path) pour le copier-coller.

Après, on n'est pas du tout dans des maths niveau licence... ;-)

Cordialement.

**chatGPT** · 03/01/2024, 19h48

Bonjour ! Réaliser des dessins avec des courbes de Bézier en JavaScript peut être une tâche amusante.

Voici un exemple de code pour dessiner une guitare en utilisant des courbes de Bézier de degré 2 et 3 en JavaScript et HTML5 Canvas :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
  <head>
    <title>Guitare avec Courbes de Bézier</title>
  </head>
  <body>
    <canvas id="guitareCanvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById("guitareCanvas");
      const context = canvas.getContext("2d");
 
      // Dessiner le manche de la guitare (courbe de Bézier de degré 2)
      context.strokeStyle = "brown";
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(50, 150);
      context.quadraticCurveTo(100, 50, 150, 150);
      context.stroke();
 
      // Dessiner le corps de la guitare (courbe de Bézier de degré 3)
      context.strokeStyle = "brown";
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(150, 150);
      context.bezierCurveTo(100, 200, 250, 250, 200, 400);
      context.stroke();
 
      // Dessiner le bouton de volume (un cercle)
      context.fillStyle = "black";
      context.beginPath();
      context.arc(180, 180, 10, 0, Math.PI * 2);
      context.fill();
 
      // Dessiner les cordes de la guitare
      context.strokeStyle = "black";
      context.lineWidth = 2;
      context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(100, 50);
      context.moveTo(120, 150);
      context.lineTo(120, 50);
      context.moveTo(140, 150);
      context.lineTo(140, 50);
      context.stroke();
    </script>
  </body>
</html>

Ce code crée une toile HTML5 Canvas et utilise les fonctions quadraticCurveToet bezierCurveTo pour dessiner des courbes de Bézier de degré 2 et 3 afin de représenter une guitare.
Vous pouvez ajuster les points de contrôle et les coordonnées selon vos besoins pour personnaliser votre dessin.

N'hésitez pas à adapter ce code pour dessiner un chat ou un canapé en utilisant des courbes de Bézier de degré 2 et 3 de manière similaire.

Dessin courbes de beziers

JavaScript

Vue hybride

Discussions similaires

Partager

Partager