[Playlisten] [Impressum und Datenschutzerklärung]
03H.1 Matrizen in HTML (SVG)
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 Format – ganz banale Webseite, – sie werden gemerkt haben, man kann sich bei Webseiten ja auch den Quelltext – angucken, was steht da eigentlich dahinter, – ist vom Server angekommen – und der Browser hat's dann eben wieder gegeben, also das hier ist was vom Server ankommt der Quelltext dahinter und der Browser macht dann die – hü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 Webseite – ist diese HTML Seite drauf normaler – Text, 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 Vektorgrafik – anguckt, was passiert, – auf der Webseite Vektorgrafiken hat SVG heißen die – können Sie Rechtecke – und Ellipsen und – vor allen Dingen ganz wilde Kurven haben auch – Text haben, ich hatte mal mit Textinhalt – von SVG steht jetzt eine Vektorgrafik – und – ich verwende diese Grafik einfach nur um Text anzuzeigen. Das – reicht ein bisschen komisch ist, aber man kann dem Text dann einiges – das gucken, was soll ich an was können Matrizen mit unserem Text veranstalten – dieser – Text so einfach nur heißen, dies ist ein – Text, weil ich so einfallslos – Element sollte ich auch noch sagen, wie breit ist denn sein soll – uns das nicht irgendwie abgeschnitten wird. Ich sage 1000/3000 – hoch sie – nur ein dir erklären, was heißt eigentlich tausend nehmen wir das 1000 vielleicht als Pixel – nicht ganz wahr, aber für – den ersten – und sie ist 1000 x 1000 Pixel so groß soll jetzt meine Illustration auf dieser – sein. Nebenbei sehen Sie – brauchst 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 ist – Titel ganzen Matrix habe ich das jetzt genannt und der Body ist das was wirklich dann angezeigt wird in der großen Fläche des – Körper, der war die da ist jetzt eben nur eine einzige SVG Grafik drin, diese einzige – Grafik hat einen Text, das ist der Text. – ich dir mal vor was passiert, wenn wir es jetzt anzeigen, also speichern – und in – den Browser und – dann sehen Sie hier. Ja, – der oben ist anscheinend was – für ein über den Rand cooktops – ist also schon irgendwas unterstellen – wir jetzt ein mit Hilfe einer Matrix. – zwar können wir jetzt obendrein den Text noch sagen, du hast eine Transformation – schon zwei – die ist Transformation soll bitte sein eine Matrix – es gibt man das total komisch 6 Zahlen an – wozu diese sechs Zahlen, da sind – Pest 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 was – das Ergebnis an. – gespeichert einmal neu laden, – steht der Text – sie an ist vielleicht schon eher steht 50 – linken Rand – 100 – oberen Rand bis – jetzt gemacht. Habe 50-100, – das hat offensichtlich was mit der Verschiebung zu tun, also – jetzt die Bedeutung von diesem – Zahlen, die da drinnen stehen. – da passiert ist folgendes, ich – kriege eine neue – ich kriege eine neue y-Koordinate, – hatten eben Matrix – mal – alte – x-Koordinate – alte y-Koordinate – ich eine feste Matrix ABCD – hat und dass sie das jetzt so rum schreibe und – was du noch zukommt sind jetzt – weitere h&f – Verschiebung. – nicht nur dieser erste Teil. – Das nennt sich – Transformation – lineare Abbildung, sondern wir haben doch ein – das nennt sich affine – diese 6 Zahlen werden da angegeben. Da steht da drin in Matrix – habe. – 1001 – das ist die Einheitsmatrix die – alles so wiss wie es war, 50-100 – ist der Verschiebungsvektor – ist – der Verschiebungsvektor, – ich liebe das ganze – und um 100 vertikal, jetzt müsst ihn schon was auffallen und hat vertikal – zurück zu – der – Seite ✂ Büttners erwarten, dass es nach oben verschoben wird. Wenn Sie 100 drauf war, Diana Pupse, ich will nach unten verschoben. Traditionellerweise – bei den Grafiksystem die y-Koordinate nach unten, um sie zu verwirren, es gibt Ausnahmen, aber – die y-Koordinate nach bunten, das ist unsere Epson Koordinate, das ist unser x-Koordinate – unser 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 lustigerweise – 100 – nach unten, weil die Y-Achse – nach unten geht. Traditionellerweise – könnte man mal ein bisschen rumspielen. – Sie – bauen mal eine Matrix die folgendes kann, – die dieses macht, dies ist ein Text möchte – vielleicht meine Y-Achse beschriften. – kriegen sie das Handy wählen Sie abcde – F, sodass die Schrift – Y-Achse – steht. ✂ wir gucken uns – Einen – an, – mit dem alten nächstes alte X wird das neue – Strich – X – passiert 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 - y – das neue – Strich = - – y das alte - 17 wird das neue X1 – man sagen was hier stehen muss – a – 0. – Ich strich hat null mal X drinnen ich strich hat nur mal nichts trennen, das B hier – unten, was ist denn Y Strich von X drinnen? – Strich hat einiges drin, das B = 1 – eine 1 das C, wie viel hat X Strich von Y drinnen Lidstrich – hat 1 - y, also ist das C = -1 – dasis.de – unten rechts, wie viel hat Y Strich von Y drin gar nichts – liegen lassen, da passiert nichts 00. Probiere es mal aus 0 – 1 -1 und dann 30 – m möge das Gelingen. – 1030 – und laden – da ist also wenn Sie ein hübscher Achse beschriften wollen – das – Art – das jetzt aber noch mal sagen, es gibt auch vorgefertigte Befehle, sie können auch direkt rotate – und – andere Schweinereien dazwischen schreiben, wollen – wir uns allgemein haben will ist mit der Matrix am besten – kann man machen, was man – will machen muss. – war – die eine hat jetzt – wir das mal – fies andersrum, – ist wenn Sie die – andersrum – beschriften wollen – unten 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 mal ✂ das muss erstmal – die Drehung sein. Genau andersrum, weil – sie eben war wir drehen um – 90° und haben dann hier dies ist ein Text der – noch an der falschen Stelle steht, aber richtig – ist dies ist ein – steht da dann – dann kann man schon mal ABCD – neue negative – y-Koordinate – so das ist die negative y-Koordinate – die neue negative – y-Koordinate – - Y Strich ist – die alte x-Koordinate, – also Y Strich = - – negative – das ist - ich hier ist die alte negative y-Koordinate, – ist - – X = Y – oder sie vertauschen einfach die Vorzeichen von dem was wir gerade eben hatten. – Strich = – und das heißt – ist 0 – ich Index Strich. – wie – viel hübscher Lon brauche ich in Y Strich keines so – verloren gegangen? – G&f – sie jetzt schätzen müssten, e&f – würden Sie sagen? ✂ sagen sie in der Größenordnung – irgendwas, – sieht – das Ganze nach rechts rüber, ich muss ein Stückchen nach rechts rüber – das 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 Heft – deutlich größer als E probieren – war – kann tatsächlich SVG – fragen, ob wir können ein bisschen JavaScript dazu schreiben die Programmiersprache – fü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 Rechteck – unten. Dann haben wir's exakt hier und ist mir gerade zu Fuß. – - 110 20-100 – probiere ich – 10 – 20 – 100 – gucken – das 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 runter – so weit nach rechts immer feucht durch 15. – Stückchen weiter runter Nummer 130 – und neu laden, – steht es andersrum – die 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, das – sind die linearen Abbildungen – Abbildung, der Hund bleibt liegen 90 eingesetzt mal die Matrix von – links bleibt – von dem schwarzen Tee bei den Grünen. – brauchen jetzt was ist ein Verschiebungsvektor, um – etwas Brauchbares zu veranstalten? – den noch auf dieser Diagonalen – hätte ich gerne groß. – dies – ist – auf der 45 Grad diagonal tragen – sie 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 einbauen – Drehung alleine. – dann bau war noch die Skalierung – man sich angucken ist, was wird – dem alten – Standard basisvektor – was wird aus dem alten 10. – ich keine Skalierung drinnen habe, wird das – dem alten – Ich kriege – ein Gemisch – in Richtung X soundsoviel in Richtung YB – Tag was mit muss gelten haben – wir eben auch sie brauchen 1 durch Wurzel 2 in beide Richtungen – wird. also abgebildet – den neuen 1 durch Wurzel 2 1 durch Wurzel 2. – Dieser – hier wird – ist ja X Standard Basis vector, jetzt gucken wir uns den y – Standard Basisvektoren, – den – jetzt in den Garten dann System noch unten zeigt. – ja notfalls hier auch bei dem Tee wieder, also den verschieben. – Und nach der Drehung – eben so – also – so. – Mit anderen Worten dieser 01. Saarwirth zu – hat er die negativen – Anteil in x-Richtung -1 – durch Wurzel 2 und – bei 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 10 – sie wollen – Wurzel 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 10 – sie 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. Dann – weiß ich, dass ich hier – 1 durch Wurzel 2 stehen muss – mal 0 plus minus 1 durch Wurzel 2 x 1 und ich weiß, dass hier unten 1 durch Wurzel 2 stehen. Muss – mal 0 plus 1 durch Wurzel 2 x 1, – heißt wenn ich weiß, – aus – und 01 wird diesen – Vektor und – diesen Vektor – ich weiß den beiden wird. – ich fertig, – kann ich die matrix hinschreiben, also das A = – 1 durch Wurzel 2. – BRs – gucken, – was steht da auch 1 durch Wurzel 2 – immer ohne die Skalierung das C ist -1 – durch Wurzel 2 unterste – ist 1 durch Wurzel 2, – ich keine Skalierung drinnen habe, – ich jetzt noch die Skalierung haben will, – es einfach dazu mit Skalierung. – möchte ich – Vektor rauskriegen, sondern das – Dreifache rauskriegen – durch Wurzel 2 3 – durch Wurzel 2 und bei dem dann auch das Dreifache überall z.b. Das Dreifache rauskriegen. Harder steht da überall – noch dabei – verschieben – mal 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ür – Stück geht. So können Sie das Aussehen, jetzt – bin ich zu faul, das auszurechnen – 1 - 2, 12, 1200 – müsste – den erwünschten – haben. – 2,1 – natürlich 2.17. – Spiel - – ich dein Vorzeichen falsch in dieses geht nach oben weg, welches – Vorzeichen habe ich falsch natürlich auch vorzeichentest – ja plus plus minus plus – plus, also – nä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 Experiment – erstmal eine Matrix sehen und dann überlegen wir uns wie das. – sieht ja spannend aus. – wem er das ist jetzt – wie – machen wir das jetzt kursiv – kursiv, 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 der – schräg gestellt ist, dass er nicht so schräg gestellt ist, wie er da steht gerade – mit dieser Matrix ist er falsch schräg gestellt. – den Text gerne – die Strecke ich direkt, dass er nach – ist, was müssen Sie tun und – die können Sie das Einstellen überhaupt, wie stark er geneigt – ist? ✂ gesagt, das hätte ich jetzt gerne richtig rum künstlich – schräg gestellt – die richtige Richtung nach rechts, – würde ich auch wieder machen, indem ich mir die Standard Basisvektoren – angucke, – ich mir auf eine neue Seite hier. – ist – ein – Text steht hier – auf der x-Achse drauf, hier ist der Ursprung Y Achse läuft nach unten – jetzt hätte ich gerne – dies – ein – Text schräg gestellt. – können sich wieder angucken was ausziehen X und Y Standard Basisvektoren – wird dieser hier – Standard basisvektor, – bleibt, – 10 – der – transformiert – zu 10. – An – dem ändert sich nichts und damit kenne ich sofort, was in der Matrix und – andere – standardbasis – Vektor. – Standard basisvektor in y-Richtung die jetzt nach unten ist, das ist hier als entlang von dem – Strich von DZB – von ENT, – jetzt schräg. – 01 – wird abgebildet auf – ungefä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,5 – da hinten nehmen oder da vorne nehmen, – er behält die Höhe 1. – Aber – jetzt nach links – kenne ich meine Matrix. – matrix Meyer – so spaltenweise in diesem – ABCD, – die matrix muss also so sein. – der ersten Spalte – 10 raus, wenn Sie hier mit 10 multiplizieren ABS – 10 und die zweite Spalte muss sein - 0,51, – trage ich ein – - – ein Versatz – das noch – zu schieben. – eins ist, der spannende. Gewesen – einen – 0.5 natürlich – und schieben das ganz nach unten. – kennen – sie das, also, falls sie sich wundern, wie diese pseudo Kursivschrift entsteht, das ist einfach – Matrix, die dadrüber genudelt Hirt. – jemand – der Vorbereitung mitgenommen, wie heißt diese Art von geometrische Transformation reines Faktenwissen, wie heißt die Satan Geometrie Transformation ✂ Scherung kommt – sonst selten davor – mit dem Matrizen kriegen sie eben Drehungen und Schädigungen und Spiegelungen – und Skalierungen – hin und – ist er hinten noch eine Verschiebung dran gedacht hat – der Sie um einen beliebigen Punkt drehen – einem beliebigen Punkt aus skalieren können und – alles durcheinander machen gleichzeitig Scheren skalieren spiegeln drehen alles – zusammenbauen. – das matrizenprodukt sie musizieren, innere Matrizen kriegen – eine 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 HTML – CSS – SVG – finden Sie diese Matrizen und Verschiebungsvektoren – der Mathematik daneben affine Abbildungen genannt.