knuspermagier.de
Hallo. Ich bins! Philipp!

Gitarren

Letztens, als ich diesen Kurzeintrag über die Hagstrom Fantomen schrieb, dachte ich mir schon, dass es vielleicht passend wäre, diese Liste der Wunsch-Gitarren ins Wiki zu übernehmen, weil warum nicht.

Eine einfache Text-Liste war mir aber zu langweilig, irgendwelche Bilder aus dem Internet klauen mag ich aber auch nicht, also überlegte ich mir, dass ich sie wohl abmalen muss und die Idee verselbstständigte sich etwas. Was mache ich mit den Bildern? Wäre ja lustig, wenn die nebeneinander hängen würden, als hingen sie an einer Wand. Wenn sie nun so da hängen, wäre es ja aber auch noch witziges Easteregg, wenn man sie bewegen könnte… und natürlich müssten sie kaputt gehen, wenn man sie nicht vernünftig auf einen Wandhalter hängt.

knuspermagier.de_wiki_listen_gitarren.png

Leider machen mir die besonders sinnlosen Sachen am meisten Spaß. Anfangs dachte ich, ich male die Gitarren in einem Vektor-Programm, damit ich sie beim Aufprall schöner zerstören kann, also richtig den Hals rausbrechen. Nach fünf Minuten war es mir allerdings zu aufwändig, die Kurven ordentlich zu ziehen und ich verwarf die Idee. Eventuell habe ich auch einfach gar keine Ahnung von Vektorprogrammen und es wäre vielleichter gegangen, als einzelne Punkte zu setzen und dann die Bézierkurven zu ziehen bis es auf die Gitarrenrundung passt. Es kam mir aber auch ganz gelegen, denn irgendwie male ich auch einfach gerne in Procreate.

Um trotzdem einen kleinen Zerstörungseffekt hinzubekommen, kam mir die Idee, dass ich das Bild einfach in zwei Teile schneide und ein bisschen herumdrehe, dass es irgendwie durcheinander aussieht. Dazu nehme ich zwei <canvas>-Elemente und male in jedes eine Hälfte der Gitarre und ✨schwupps✨. Bisher hatte ich keine Gitarre, bei der das super dumm aussah, weil der Body mehr als die Hälfte des Gesamtbildes groß ist, oder so.

screenshot-2022-10-01-at-23.03.17.png

Das ganze Dragging wollte ich erst per Hand machen, also einfach mit .addEventListener('drag', […]), aber da stieß ich auch schnell an Grenzen, es ging schon damit los, dass ich das Ghost-Image, also das Bild, was der Browser halt anzeigt, wenn man einen Drag-Vorgang startet, nicht weg bekam und alle Stack Overflow-Tricks nicht funktionierten. Da ich eh schon vermutete, dass ich für die ein oder andere Animation GSAP einsetzen werde, schaute ich, ob die zufällig was dafür haben und fand das Draggable-Plugin, das ziemlich gut funktioniert. Super wäre noch das Intertia-Plugin, dann wäre das noch alles etwas physikalischer, aber das kostet leider Geld.

Am Anfang hatte ich ein paar Probleme mit den Koordinatensystemen, in denen sich die einzelnen Elemente befanden, und das Snapping funktionierte nicht so richtig, wie ich das wollte, aber nach genug Factorio spielen löste sich das auch auf, hatte ein position: relative auf dem richtigen Container vergessen.

Joa, ich wünschte, ich könnte noch mehr dazu berichten, aber im Großen und Ganzen sind es nur ein paar Zeilen Code und die größte Arbeit war es natürlich, die Gitarrenbilder herzustellen. Ich bin aber zufrieden. Es sieht witzig aus und irgendwie macht es Spaß die Gitarren herumzubewegen und fallen zu lassen. War ein Spaßiges kleines Ding und ich hab wenigstens wieder ein bisschen mehr mit GSAP gemacht. Der Code ist natürlich einfach komplett inline, das hier ist schließlich mein Blog, da kann ich machen, was ich will!


Wenn ich Lust habe, werde ich noch die Farin Urlaub Signature von Cyan Guitars hinzufügen.

Kommentare, Feedback und andere Anmerkungen?
Schreib mir eine E-Mail 🤓