[Playlisten] [Impressum und Datenschutzerklärung]

03H.1 Matrizen in HTML (SVG)


CC-BY-NC-SA 3.0

Tempo:

Anklickbares Transkript:

Matrizen kommen auch z.b.Ganz normal im Webbrowser vor in HTML oder was ich jetzt zeigen werde in einer von SVG die Vektorgrafik Formatganz banale Webseite,sie werden gemerkt haben, man kann sich bei Webseiten ja auch den Quelltextangucken, was steht da eigentlich dahinter,ist vom Server angekommenund der Browser hat's dann eben wieder gegeben, also das hier ist was vom Server ankommt der Quelltext dahinter und der Browser macht dann diehübsche webseite draus, wir bauen jetzt ein bisschen bis rum mit Matrizen und mach mal zusehen, wie denn das alles zusammen Spiel,wir wäre jetzt also was bisher auf dieser Webseiteist diese HTML Seite drauf normalerText, was ich haben will, ist jetzt nicht normaler Text,könnte man auch schon mit Matrizen rumspielen oder sogar sehr viel schon mit Matrizen rumspielen sogar perspektivisch.weiß, nur wie es einfach halten am einfachsten ist, wenn man sich das in Vektorgrafikanguckt, was passiert,auf der Webseite Vektorgrafiken hat SVG heißen diekönnen Sie Rechteckeund Ellipsen undvor allen Dingen ganz wilde Kurven haben auchText haben, ich hatte mal mit Textinhaltvon SVG steht jetzt eine Vektorgrafikundich verwende diese Grafik einfach nur um Text anzuzeigen. Dasreicht ein bisschen komisch ist, aber man kann dem Text dann einigesdas gucken, was soll ich an was können Matrizen mit unserem Text veranstaltendieserText so einfach nur heißen, dies ist einText, weil ich so einfallslosElement sollte ich auch noch sagen, wie breit ist denn sein solluns das nicht irgendwie abgeschnitten wird. Ich sage 1000/3000hoch sienur ein dir erklären, was heißt eigentlich tausend nehmen wir das 1000 vielleicht als Pixelnicht ganz wahr, aber fürden erstenund sie ist 1000 x 1000 Pixel so groß soll jetzt meine Illustration auf diesersein. Nebenbei sehen Siebrauchst besteht die webseite es ist hat die Milz da oben fängt es an da unten hört es auf es gibt einen Kopf Herz Teil des Kopfes istTitel ganzen Matrix habe ich das jetzt genannt und der Body ist das was wirklich dann angezeigt wird in der großen Fläche desKörper, der war die da ist jetzt eben nur eine einzige SVG Grafik drin, diese einzigeGrafik hat einen Text, das ist der Text.ich dir mal vor was passiert, wenn wir es jetzt anzeigen, also speichernund inden Browser unddann sehen Sie hier. Ja,der oben ist anscheinend wasfür ein über den Rand cooktopsist also schon irgendwas unterstellenwir jetzt ein mit Hilfe einer Matrix.zwar können wir jetzt obendrein den Text noch sagen, du hast eine Transformationschon zweidie ist Transformation soll bitte sein eine Matrixes gibt man das total komisch 6 Zahlen anwozu diese sechs Zahlen, da sindPest mal welche und dann erkläre ich wozu, die da sind,uns jetzt sechs Zahlen die hatten wahrscheinlich vier Zahlen erwartet 2 x 2 Matrix, das sind jetzt sechs Zahlen und wasdas Ergebnis an.gespeichert einmal neu laden,steht der Textsie an ist vielleicht schon eher steht 50linken Rand100oberen Rand bisjetzt gemacht. Habe 50-100,das hat offensichtlich was mit der Verschiebung zu tun, alsojetzt die Bedeutung von diesemZahlen, die da drinnen stehen.da passiert ist folgendes, ichkriege eine neueich kriege eine neue y-Koordinate,hatten eben Matrixmalaltex-Koordinatealte y-Koordinateich eine feste Matrix ABCDhat und dass sie das jetzt so rum schreibe undwas du noch zukommt sind jetztweitere h&fVerschiebung.nicht nur dieser erste Teil.Das nennt sichTransformationlineare Abbildung, sondern wir haben doch eindas nennt sich affinediese 6 Zahlen werden da angegeben. Da steht da drin in Matrixhabe.1001das ist die Einheitsmatrix diealles so wiss wie es war, 50-100ist der Verschiebungsvektoristder Verschiebungsvektor,ich liebe das ganzeund um 100 vertikal, jetzt müsst ihn schon was auffallen und hat vertikalzurück zuderSeiteBüttners erwarten, dass es nach oben verschoben wird. Wenn Sie 100 drauf war, Diana Pupse, ich will nach unten verschoben. Traditionellerweisebei den Grafiksystem die y-Koordinate nach unten, um sie zu verwirren, es gibt Ausnahmen, aberdie y-Koordinate nach bunten, das ist unsere Epson Koordinate, das ist unser x-Koordinateunser Text steht, dass sie dich hier.An dieser Stelle so genau auf der x-Achse, dies ist ein Text.So steht unser Text da.Und ich schiebe jetzt diesen Text 50 nach rechts und lustigerweise100nach unten, weil die Y-Achsenach unten geht. Traditionellerweisekönnte man mal ein bisschen rumspielen.Siebauen mal eine Matrix die folgendes kann,die dieses macht, dies ist ein Text möchtevielleicht meine Y-Achse beschriften.kriegen sie das Handy wählen Sie abcdeF, sodass die SchriftY-Achsesteht.wir gucken unsEinenan,mit dem alten nächstes alte X wird das neueStrichXpassiert mit dem alten y?Das alte - y, wenn sich hier die Höhe z.b. Nehmen diese Höhe, das wäre - yyaxis läuft falsch rum das alte - ydas neueStrich = -y das alte - 17 wird das neue X1man sagen was hier stehen mussa0.Ich strich hat null mal X drinnen ich strich hat nur mal nichts trennen, das B hierunten, was ist denn Y Strich von X drinnen?Strich hat einiges drin, das B = 1eine 1 das C, wie viel hat X Strich von Y drinnen Lidstrichhat 1 - y, also ist das C = -1dasis.deunten rechts, wie viel hat Y Strich von Y drin gar nichtsliegen lassen, da passiert nichts 00. Probiere es mal aus 01 -1 und dann 30m möge das Gelingen.1030und ladenda ist also wenn Sie ein hübscher Achse beschriften wollendasArtdas jetzt aber noch mal sagen, es gibt auch vorgefertigte Befehle, sie können auch direkt rotateundandere Schweinereien dazwischen schreiben, wollenwir uns allgemein haben will ist mit der Matrix am bestenkann man machen, was manwill machen muss.wardie eine hat jetztwir das malfies andersrum,ist wenn Sie dieandersrumbeschriften wollenunten nach oben beschriften wollen,soll das da jetzt stehen, dies ist ein Text.Was muss man jetzt alles machen? Das geht wahrscheinlich ist nicht ganz so sauber gucken Sie maldas muss erstmaldie Drehung sein. Genau andersrum, weilsie eben war wir drehen um90° und haben dann hier dies ist ein Text dernoch an der falschen Stelle steht, aber richtigist dies ist einsteht da danndann kann man schon mal ABCDneue negativey-Koordinateso das ist die negative y-Koordinatedie neue negativey-Koordinate- Y Strich istdie alte x-Koordinate,also Y Strich = -negativedas ist - ich hier ist die alte negative y-Koordinate,ist -X = Yoder sie vertauschen einfach die Vorzeichen von dem was wir gerade eben hatten.Strich =und das heißtist 0ich Index Strich.wieviel hübscher Lon brauche ich in Y Strich keines soverloren gegangen?G&fsie jetzt schätzen müssten, e&fwürden Sie sagen?sagen sie in der Größenordnungirgendwas,siehtdas Ganze nach rechts rüber, ich muss ein Stückchen nach rechts rüberdas F. Steht das Ganze nach unten bei die Rucksack nach unten läuft das ergibt das ganze Hund und ich muss eindeutige Stückchen nach unten, also deutlich größer als E beide positiv Heftdeutlich größer als E probierenwarkann tatsächlich SVGfragen, ob wir können ein bisschen JavaScript dazu schreiben die Programmiersprachefür Web kann so ein bisschen JavaScript dazu, dann können Sie das hier dich wie groß ist dieses Rechteck und da muss ich ihm die Höhe von den Rechteck noch nach rechts und die Breite von diesem Rechteckunten. Dann haben wir's exakt hier und ist mir gerade zu Fuß.- 110 20-100probiere ich1020100guckendas wäre nicht offizielle liegt offizielle weg. Wäre das abzufragen, wie groß ist das Rechteck,zu weit nach rechts aber noch ein Stückchen weiter runterso weit nach rechts immer feucht durch 15.Stückchen weiter runter Nummer 130und neu laden,steht es andersrumdie waren die braucht man doch diesen Verschiebungsvektor.Man kann nicht alles nur mit dem Matrizen erledigen, wenn sie nur mit dem Matrizen arbeiten wirkte Ursprung immer da, wo er mal war, dassind die linearen AbbildungenAbbildung, der Hund bleibt liegen 90 eingesetzt mal die Matrix vonlinks bleibtvon dem schwarzen Tee bei den Grünen.brauchen jetzt was ist ein Verschiebungsvektor, umetwas Brauchbares zu veranstalten?den noch auf dieser Diagonalenhätte ich gerne groß.diesistauf der 45 Grad diagonal tragensie Anzahlen ein.machen erstmal nur die Drehung, das fand ich klug, das sehr viele von ihnen erstmal gesagt, dann wir machen nur die Drehung und dann können wir die Skalierung immer noch einbauenDrehung alleine.dann bau war noch die Skalierungman sich angucken ist, was wirddem altenStandard basisvektorwas wird aus dem alten 10.ich keine Skalierung drinnen habe, wird dasdem altenIch kriegeein Gemischin Richtung X soundsoviel in Richtung YBTag was mit muss gelten habenwir eben auch sie brauchen 1 durch Wurzel 2 in beide Richtungenwird. also abgebildetden neuen 1 durch Wurzel 2 1 durch Wurzel 2.Dieserhier wirdist ja X Standard Basis vector, jetzt gucken wir uns den yStandard Basisvektoren,denjetzt in den Garten dann System noch unten zeigt.ja notfalls hier auch bei dem Tee wieder, also den verschieben.Und nach der Drehungeben soalsoso.Mit anderen Worten dieser 01. Saarwirth zuhat er die negativenAnteil in x-Richtung -1durch Wurzel 2 undbei dem positiven Antalya hin,Richtung 1 durch Wurzel 2.ich die beiden habe,ich die matrix hinschreiben,funktioniert das?es reicht zu wissen, was aus diesen beiden wird, wenn ihr 10 steht 10sie wollenWurzel 21 durch Wurzel 2 rausbekommen,sie was an sein muss als durch Wurzel 2 x 1 + 10 x 0 und sie wissen was B sein muss, als du mich holst du zweimal 10sie kennen A&B, also, ich würde 2 1 durch Wurzel 2.bei der zweiten hier 01.weiß was bei 01 rauskommt - 1 durch Wurzel 2 als durch Wurzel 2. Dannweiß ich, dass ich hier1 durch Wurzel 2 stehen mussmal 0 plus minus 1 durch Wurzel 2 x 1 und ich weiß, dass hier unten 1 durch Wurzel 2 stehen. Mussmal 0 plus 1 durch Wurzel 2 x 1,heißt wenn ich weiß,ausund 01 wird diesenVektor unddiesen Vektorich weiß den beiden wird.ich fertig,kann ich die matrix hinschreiben, also das A =1 durch Wurzel 2.BRsgucken,was steht da auch 1 durch Wurzel 2immer ohne die Skalierung das C ist -1durch Wurzel 2 untersteist 1 durch Wurzel 2,ich keine Skalierung drinnen habe,ich jetzt noch die Skalierung haben will,es einfach dazu mit Skalierung.möchte ichVektor rauskriegen, sondern dasDreifache rauskriegendurch Wurzel 2 3durch Wurzel 2 und bei dem dann auch das Dreifache überall z.b. Das Dreifache rauskriegen. Harder steht da überallnoch dabeiverschiebenmal gar nicht.die wird jetzt gleich aus dem Bildschirm raus tragen, dann könnte doch ein bisschen verschieben, aber eigentlich müssen wir gar nicht verschieben. Das Verschieben noch ein bisschen irgendwie 20/20,keine Ahnung,fürStück geht. So können Sie das Aussehen, jetztbin ich zu faul, das auszurechnen1 - 2, 12, 1200müssteden erwünschtenhaben.2,1natürlich 2.17.Spiel -ich dein Vorzeichen falsch in dieses geht nach oben weg, welchesVorzeichen habe ich falsch natürlich auch vorzeichentestja plus plus minus plusplus, alsonächster Versuch.das ist die Triumph um 45°in die andere Richtung gewesen,sieht das aus. Jetzt haben sie einen großen Text in 45 Grad abwärts.letztes Experimenterstmal eine Matrix sehen und dann überlegen wir uns wie das.sieht ja spannend aus.wem er das ist jetztwiemachen wir das jetzt kursivkursiv, es ist nicht wirklich kursives heißt offiziell dann schräg gestellt, die sehen oder geht was man kann,gewisse Verformungen schon anstellen,schreiben Sie jetzt damit derschräg gestellt ist, dass er nicht so schräg gestellt ist, wie er da steht gerademit dieser Matrix ist er falsch schräg gestellt.den Text gernedie Strecke ich direkt, dass er nachist, was müssen Sie tun unddie können Sie das Einstellen überhaupt, wie stark er geneigtist?gesagt, das hätte ich jetzt gerne richtig rum künstlichschräg gestelltdie richtige Richtung nach rechts,würde ich auch wieder machen, indem ich mir die Standard Basisvektorenangucke,ich mir auf eine neue Seite hier.isteinText steht hierauf der x-Achse drauf, hier ist der Ursprung Y Achse läuft nach untenjetzt hätte ich gernedieseinText schräg gestellt.können sich wieder angucken was ausziehen X und Y Standard Basisvektorenwird dieser hierStandard basisvektor,bleibt,10dertransformiertzu 10.Andem ändert sich nichts und damit kenne ich sofort, was in der Matrix undanderestandardbasisVektor.Standard basisvektor in y-Richtung die jetzt nach unten ist, das ist hier als entlang von demStrich von DZBvon ENT,jetzt schräg.01wird abgebildet aufungefähr, wenn Sie den hier in Zahlen ungefähr angeben müssten,ist das?von -0,5 I also er hat die Höhe 14 sozusagen und geht um 0,5 zur Seite.-0,5da hinten nehmen oder da vorne nehmen,er behält die Höhe 1.Aberjetzt nach linkskenne ich meine Matrix.matrix Meyerso spaltenweise in diesemABCD,die matrix muss also so sein.der ersten Spalte10 raus, wenn Sie hier mit 10 multiplizieren ABS10 und die zweite Spalte muss sein - 0,51,trage ich ein-ein Versatzdas nochzu schieben.eins ist, der spannende. Geweseneinen0.5 natürlichund schieben das ganz nach unten.kennensie das, also, falls sie sich wundern, wie diese pseudo Kursivschrift entsteht, das ist einfachMatrix, die dadrüber genudelt Hirt.jemandder Vorbereitung mitgenommen, wie heißt diese Art von geometrische Transformation reines Faktenwissen, wie heißt die Satan Geometrie TransformationScherung kommtsonst selten davormit dem Matrizen kriegen sie eben Drehungen und Schädigungen und Spiegelungenund Skalierungenhin undist er hinten noch eine Verschiebung dran gedacht hatder Sie um einen beliebigen Punkt dreheneinem beliebigen Punkt aus skalieren können undalles durcheinander machen gleichzeitig Scheren skalieren spiegeln drehen alleszusammenbauen.das matrizenprodukt sie musizieren, innere Matrizen kriegeneine neue Matrix raus. Da fahren. Sie behind so kommt das vor, dass es eingebaut in die ganzen üblichen Systeme,ob das mit Grace ist oder Windows oder Android oder hier HTMLCSSSVGfinden Sie diese Matrizen und Verschiebungsvektorender Mathematik daneben affine Abbildungen genannt.