Exemples de dibuix i animació vectorial SVG per fer circuit de Fórmula 1 amb robot seguidor de línies

Dibuix vectorial SVG: exemples

Línia Recta

        
            <path d="M50 50 L150 150" stroke="black" stroke-width="2" fill="transparent" />
        
    

Comanda "L" crea una línia recta des de (50, 50) fins a (150, 150).

Corba Quadràtica

        
            <path d="M50 50 Q100 150 150 50" stroke="black" stroke-width="2" fill="transparent" />
        
    

Comanda "Q" crea una corba quadràtica amb un punt de control (100, 150).

Arc

        
            <path d="M50 50 A50 50 0 1 0 150 50" stroke="black" stroke-width="2" fill="transparent" />
        
    

Comanda "A" crea un arc el·líptic amb radi (50, 50) i sentit horari.

Línia Horitzontal Relativa

        
            <path d="M50 50 h100" stroke="black" stroke-width="2" fill="transparent" />
        
    

Comanda "h" crea una línia horitzontal relativa de 100 píxels.

Tancar Camí

        
            <path d="M50 50 L150 150 Z" stroke="black" stroke-width="2" fill="transparent" />
        
    

La comanda "Z" tanca el camí, connectant el punt actual amb el primer punt del camí.

Exemple de Corba Bèzier Cúbica Suau (S)

        
            <path d="M50 50 C100 150 150 50 200 100 S250 150 300 100" stroke="black" stroke-width="2" fill="transparent" />
        
    

La comanda "C" crea una corba de Bèzier cúbica amb punts de control (100, 150) i (150, 50), i la comanda "S" crea una corba de Bèzier cúbica suau que utilitza el punt de control anterior (150, 50) i un nou punt de control (250, 150).

Explicació de Corbes de Bèzier en SVG

Les corbes de Bèzier són una classe de corbes matemàtiques que es fan servir comunament en gràfics vectorials per descriure trajectòries suaus i formes. En SVG (Scalable Vector Graphics), es fan servir principalment dos tipus de corbes de Bèzier: les corbes de Bèzier cúbiques i les corbes de Bèzier quadràtiques.

1. Corbes de Bèzier Cúbiques:
   • Les corbes de Bèzier cúbiques estan definides per quatre punts de control: el punt d'inici, dos punts de control i el punt final.
   • Es fan servir les comandes "C" o "c" en l'atribut "d" de l'etiqueta <path> en SVG per crear aquest tipus de corbes.
   • La comanda "C" crea una corba de Bèzier cúbica, mentre que la comanda "c" crea una corba cúbica suau relativa.
   • Aquests punts de control determinen la forma i la trajectòria de la corba, permetent crear corbes complexes.
2. Corbes de Bèzier Quadràtiques:
   • Les corbes de Bèzier quadràtiques utilitzen tres punts de control: el punt d'inici, un punt de control i el punt final.
   • Es fan servir les comandes "Q" o "q" en l'atribut "d" de l'etiqueta <path> en SVG per crear aquest tipus de corbes.
   • La comanda "Q" crea una corba de Bèzier quadràtica, mentre que la comanda "q" crea una corba quadràtica suau relativa.
   • Aquest tipus de corba és més simple que les corbes cúbiques i s'utilitza quan es necessita una trajectòria més senzilla.

Altres tipus de corbes que es poden utilitzar en SVG són les corbes el·líptiques (comanda "A" o "a"), que permeten crear arcs el·líptics o cercles, i les línies horitzontals (comanda "H" o "h") i verticals (comanda "V" o "v") per crear línies rectes sense la necessitat de definir punts de control. No obstant això, les corbes de Bèzier cúbiques i quadràtiques són les més utilitzades per la seva versatilitat i capacitat per descriure trajectòries i formes complexes en gràfics vectorials.

Utilitzar Inkscape per a SVG amb Corbes de Bèzier

1. Obre la Imatge en Inkscape:

   Inicia Inkscape i obre una nova pàgina en blanc.

2. Importa la Imatge PNG:

   Ves a "Arxiu" > "Importar" i selecciona la teva imatge PNG.

3. Vectoritza l'Imatge:

   Utilitza les eines de dibuix de Bezier (com l'eina "Bézier") per dibuixar el contorn del circuit sobre la imatge importada. Crearàs punts i segments de corba.

4. Edició de Trajectòries Bézier:

   Un cop hagis creat les trajectòries Bézier que defineixen el circuit, pots ajustar els punts de control per ajustar la forma de les corbes.

5. Exporta a SVG:

   Quan hagis vectoritzat tot el circuit, ves a "Arxiu" > "Desar com a..." i selecciona el format SVG com a format de sortida. Assegura't de guardar-ho com a fitxer SVG.

Això convertirà la imatge PNG amb les trajectòries Bézier que has creat a Inkscape en un fitxer SVG que inclourà els paràmetres <path d> per a les corbes Bézier. Aquest SVG podràs utilitzar-lo en llocs web o altres aplicacions que suportin aquest format vectorial.

Tingues en compte que el procés de vectorització pot ser una mica laboriós, especialment si el circuit és complex, ja que has de definir manualment les trajectòries de les corbes de Bézier.

Circuit exemple

        
            <!DOCTYPE html>
            <html lang="ca">
            <head>
                <meta charset="UTF-8">
                <title>Circuit de Fórmula 1</title>
            </head>
            <body>
                <svg width="800" height="600">
                    <!-- Carril del circuit de Fórmula 1 -->
                    <path id="circuit" d="M100 200 C100 100 300 100 300 200 C300 300 500 300 500 200 S700 100 700 200 L700 400 L100 400 Z" stroke="black" fill="transparent" stroke-width="10" />
                    
                    <!-- Bola groga que circula pel circuit -->
                    <circle id="bola" r="10" fill="yellow">
                        <animateMotion dur="5s" repeatCount="indefinite">
                            <mpath xlink:href="#circuit" />
                        </animateMotion>
                    </circle>
                </svg>
            </body>
            </html>
        
    

Aquest codi HTML crea un circuit de Fórmula 1 mitjançant SVG. Aquí tens una explicació detallada:

• S'ha definit un canvas SVG de 800x600 píxels.
• Dins del canvas, s'ha creat un camí <path> amb l'ID "circuit" que representa el trajecte del circuit. S'han utilitzat comandes de corba de Bèzier cúbiques (C) per definir les corbes i les línies rectes del circuit.
• El camí té un traç negre (stroke="black") amb un ample de 10 píxels (stroke-width="10") i és transparent a l'interior (fill="transparent").
• També s'ha afegit un cercle <circle> amb l'ID "bola" que representa una bola groga que circula pel circuit. Aquesta bola es mou seguint el trajecte del camí utilitzant l'etiqueta <animateMotion>.
• A sota del canvas SVG, es mostra el codi font complet amb una etiqueta <pre> i <code> per a una millor visualització.

CIRCUIT DE MONTMELÓ