Hier könnt ihr zusehen wie ich die Grafik und Animation mit Hilfe von ChatGPT schrittweise erstellt habe.
Zeichne ein Haus.
Kirche
Bitte erstelle Blumen vor den Fenstern.
Die blumen etwas kleiner und mehrere.
ok. füge bitte eine Tür hinzu.
Sehr gut. Das ist eine schöne szene. Jetzt erstelle bitte ein auto für diese szene. Das Auto bitte detailliert,mit Fenster, Räder, Antenne. das Auto seitlich darstellen.
Gut. javascript auto (“Bild_005”) vor dem haus (“Bild_004”). nun eine animation: das Auto fährt immer bis zum Bildrand und kehrt dann um. Endlos. Bitte das svg und das script komplett in einer Datei. Danke. Bitte nur svg und script. Das auto sollte mit seinen Einzelteilen gruppiert sein. Zeichne das Auto zuletzt, da es VOR dem Haus fahren soll.
Der gelieferte Code:
<svg id="Bild_004" width="200" height="200" style="background-color: lightgray">
<rect x="20" y="50" width="160" height="100" fill="white" stroke="black" stroke-width="3"></rect>
<rect x="35" y="70" width="30" height="30" fill="black"></rect>
<rect x="125" y="70" width="30" height="30" fill="black"></rect>
<polygon points="70,50 95,25 120,50 95,75" fill="grey" stroke="black" stroke-width="3"></polygon>
<circle cx="47" cy="95" r="10" fill="red"></circle>
<circle cx="57" cy="85" r="10" fill="red"></circle>
<circle cx="67" cy="95" r="10" fill="red"></circle>
<circle cx="137" cy="95" r="10" fill="yellow"></circle>
<circle cx="147" cy="85" r="10" fill="yellow"></circle>
<circle cx="157" cy="95" r="10" fill="yellow"></circle>
<rect x="80" y="90" width="40" height="60" fill="brown" stroke="black" stroke-width="3"></rect>
<g id="car">
<rect x="50" y="120" width="100" height="40" fill="silver" stroke="black" stroke-width="3"></rect>
<circle cx="70" cy="150" r="20" fill="white" stroke="black" stroke-width="3"></circle>
<circle cx="130" cy="150" r="20" fill="white" stroke="black" stroke-width="3"></circle>
<rect x="60" y="100" width="80" height="20" fill="silver" stroke="black" stroke-width="3"></rect>
<polygon points="70,80 100,70 130,80 130,100" fill="silver" stroke="black" stroke-width="3"></polygon>
</g>
</svg>
<script>
var car = document.getElementById("car");
var pos = 0;
var dir = 1.2;
function animate() {
pos += dir;
car.setAttribute("transform", "translate(" + pos + ",0)");
if (pos > 180 || pos < -100) {
dir = -dir;
}
requestAnimationFrame(animate);
}
animate();
</script>