• Mit der libRocket zum perfekten GUI

      0 comments

    Hier wollen wir uns mit verschiedensten Themen aus dem Bereich C++, C# oder ähnliches beschäftigen. Den Anfang macht das Thema libRocket.
    Im Zuge der Programmierherausforderung zum Pythagorasbaum habe ich mich nach Frameworks für die grafische Oberfläche (GUI) im Bereich ISO C++ umgesehen. Damals haben wir uns für das gute alte MFC entschieden, da es einfach zu benutzen ist und auch relativ leicht zu erlernen. Aber es ist auch etwas angestaubt und kommt nicht an modernere GUIs heran wie z.B. WPF (welches allerdings bisher nur sinnvoll unter C# zu beenutzen ist und wir werden uns wohl später hier damit mal beschäftigen).
    Bei der Suche nach Alternativen bin ich über libRocket gestolpert bzw. wurde es mir empfohlen. Dabei handelt es sich um eine plattformunabhängige user interface middleware in ISO C++. Sie eignet sich speziell für Spiele und wird auch schon in einigen Projekten ( für Android, IOS) eingesetzt. Die Benutzung ist kostenlos und genaue Bedingungen können der libRocket Homepage entnommen werden.
    Was macht nun libRocket so besonders? Zum definieren der GUI wird HTML und CSS verwendet. Benutzer, die sich im Erstellen von Webseiten heimisch fühlen, sollten also schnell damit zurecht kommen und alle anderen finden Unmengen an Tutorials im Internet. Außerdem gibt es auf der libRocket Seite eine sehr ausführliche Doku.
    Nun müssen wir noch klären, was mit „middleware“ gemeint ist. libRocket selbst enthält selbst keinen Code zur Ein/Ausgabe. Dieser Teil wird von uns zur Verfügung gestellt. Im Bereich Eingabe übergeben wir daher die Aktionen der Maus (Position und Tasten) und der Tastatur an libRocket und die GUI reagiert dann entsprechend. Dadurch kann man es auf vielen Systemen einsetzen und auf dem Smartphone z.B. per Touch steuern, aber auf dem PC per Maus. Zur Eingabe zählt auch das Dateisystem, welches libRocket braucht, um auf die HTML und CSS Dateien zugreifen können, sowie auf Font-Dateien. Dies müssen wir aber nicht unbedingt zur Verfügung stellen, da ansonsten einfach das normale Dateisystem des jeweiligen Systems verwendet wird. Hat man aber in seinem Spiel z.B. ein eigenes Dateisystem, bei dem die Daten vielleicht in komprimierten Zip-Archiven stecken, dann kann man dies einfach in libRocket einbinden, wenn man möchte.
    Bleibt also noch das Thema Ausgabe. Hier produziert libRocket für uns einfach Dreiecksdaten (vertices) und eventuell dazu Texturen. Da es vor allem für Spiele gedacht ist, ist das natürlich praktisch, da dort in der Regel sowieso Dreiecke gerendert werden. libRocket in die bestehende Renderloop zu hängen sollte also nicht schwer sein. Damit können wir zur Darstellung z.B. einfach OpenGL oder DirectX verwenden.
    Wir füttern also libRocket mit Inputs, beschreiben unsere GUI mittels HTML und CSS Dateien und libRocket spuckt Dreiecke und Texturen aus, die wir einfach rendern. Klingt nicht ganz einfach? Ok kann ich verstehen und fordert normal auch etwas mehr Ahnung, aber wenn man sich libRocket herunter lädt, erhält man auch einige Demo-Projekte. Diese enthalten ein kleines Projekt, welches uns einen Großteil der Arbeit abnimmt (Eingabe und Ausgabe per OpenGL). Alles was wir dann noch tun müssen, ist der Aufruf einiger Initialisierungsfunktionen, das Laden der Fonts und schließlich die Darstellung unserer GUI aus unseren HTML/CSS Dateien.
    Daraus habe ich nun ein kleines Projekt erstellt, was man leicht benutzen kann, um mit libRocket herumzuspielen. Dieses Projekt werde ich dann im nächsten Artikel im Detail vorstellen. Dann sehen wir auch endlich wieder etwas Code 🙂
    Bis dahin frohes coden wünscht euch NicoB!

  • TurtleGrafik – der teuflische Weg in langsamen kleinen Schritten zum Fraktal

      1 comment

    Ok nachdem der Engel nun ihre Version zur Turtlegrafik vorgelegt hat, kommt nun meine… natürlich viel… nativere Version 😉 die ISO Version.

    Der Konstruktor oder soll ich sagen die Konstruktoren?? Diese Version der TurtleGrafik besitzt neben dem Standardkontruktor noch einen überladenen Konstruktor, der eine Startkoordinate der Turtle entgegennimmt

    Turtle::Turtle() : mXPos(0), mYPos(0), mAngle(0)
    {
     
    }
     
    Turtle::Turtle(int x, int y) : mXPos(x), mYPos(y), mAngle(0)
    {
     
    }

    Besonderheit an den Konstruktoren ist die verkürzte Schreibweise zur Initialisierung der Klassenvariablen.
    Durch den überladenen Konstruktor wird in dieser Version auf die Methode SetXY verzichtet, da sie für den Pythagorasbaum nur einmal genutzt werden würde, um den Startpunkt des Baumes zu definieren. Für andere Fraktale, wo ein versetzen der Turtle notwendig ist müsste die Funktion trotz des überladenen Konstruktors der Turtle – Klasse hinzugefügt werden, aber wie gesagt für den Pythagorasbaum ist sie nicht notwendig.
    Und die Turtle rennt los mit ihrem Stift …. naja ihrem Grafikobjekt

    void Turtle::forward(int n, CDC* pDC)
    {
    	int xStart = mXPos;
    	int yStart = mYPos;
    	double rad = (M_PI * (mAngle - 90)) / 180;
    	mXPos += (int)floor(n * cos(rad) + 0.5);
    	mYPos += (int)floor(n * sin(rad) + 0.5);
     
    	pDC->MoveTo(xStart, yStart);
    	pDC->LineTo(mXPos, mYPos);
    }

    Schnell die Startposition gesichert und mittels Bogenmaß und Trigonometrie unsere Zielkoordinate berechnet. Wer zum Bogenmaß ne Erläuterung brauch, so schaue er doch bitte gen Himmel der Engel hat das gut erklärt. Jedoch gibts da zum Vergleich zur managed Version eine kleine Besonderheit – das Runden. Leider verfügt die Nativität des ISOs nicht über eine so schöne Rundungsfunktion wie in der managed Version – Oder ich bin blind und hab sie nicht gefunden so bitte da unten kurz ein Kommentar reintippeln vielleicht gibt es dann eine zweite Version.
    Nun wie runden wir hier nun korrekt. Alles was unter 0.5 ist wollen wir normal abrunden alles was über 0.5 ist soll aufgerundet werden – so richtig mathematisch korrekt. Mit floor runden wir wie es der Name schon sagt alles ab. Also floor(0.9)=0.0, damit wir nun richtig, runden bedienen wir uns einem kleinem Trick. Wir addieren zu dem Wert, der gerundert werden soll, einfach ein 0.5 hinzu. Was passiert da in unserem Beispiel floor(0.9+0.5)? Durch die Addition überschreiten wir sozusagen die Rundungsgrenze, d.h. wir überschreiten den Wert 1. Dadurch, dass wir alles abrunden haben wir nun richtig mathematisch gerundet, denn floor(0.9+0.5)=1.0 clever oder? 😉
    Da auf einem Grafikelement das Fraktal gezeichnet wird (für die Gui hab ich mich für das gute alte MFC – Framework entschieden) müssen wir nun die kleine teuflische Schildkröte nur noch dazu bringen ein Strich zu unsere Zielkoordinate zu malen. Mit der Memberfunktion Moveto setzen wir den „Stift“ sozusagen auf unseren Startpunkt ab und Lineto bewegt unsere Turtle samt Stift an unsere Zielkoordinate.

    Und zu guter Letzt – dreh dich Turtle dreh dich

    void Turtle::turn(int a)
    {
    	mAngle = (mAngle + a) % 360;
    }

    Die Methode unterscheidet sich nicht zu der der managed Version.

    Et Voíla – natives Schildkrötchen vollendet.

  • Strich für Strich zum Fraktal – die Turtlegrafik

      1 comment

    Turtle-, Igel- oder Froschgrafik – viele Ausdrücke für eine doch recht einfache Bildbeschreibungsgrafik, genutzt bei Stiftplottern oder der vielleicht doch bekannten Programmierprache LOGO.

    Für die Programmierherausforderung wird die Turtlegrafik genutzt, um das eigentliche Fraktal zu zeichnen. Weil im gesamten Programmverlauf mehr als ein Turtle – Objekt genutzt wird, wird die Turtlegrafik als eigenstädige Klasse implementiert.

    Neben den 4 erlaubten Methoden beinhaltet die Turtle-Klasse einen Konstruktor, in dem alle wichtigen Variablen initialisiert werden.

    TurtleGrafic( Color color)
    {
         Winkel=0;
         xPos=0;
         yPos=0;
         redPen = gcnew Pen(color);
         redPen->Width=1.0F;
    }

    Neben der Initialisierung der Variablen, wird auch ein Pen – Objekt mit der vom User ausgewählten Farbe initialisiert. Dazu bekommt es noch die Strichstärke von 1. Der Pen wird genutzt, um auf unserem Graphics – Element später zu zeichnen.

    Die wichtigste Methode ist wohl neben dem Konstruktor die forward – Methode. Diese berechnet die neuen Koordinaten, zu der die Turtle “laufen” und dabei einen ganz normalen Strich zeichnen soll.

    void forward(Graphics ^gr,Int32 n)
    {
      Int32 xStart, yStart;
      xStart=xPos;
      yStart=yPos;
      g=gr;
      Double pi=System::Math::PI;
      Double rad = (pi * (Winkel-90))/180;
      xPos+= Convert::ToInt32(
    	          System::Math::Round(
    		      Convert::ToDouble(n*System::Math::Cos(rad))));
      yPos+= Convert::ToInt32(
    		  System::Math::Round(
    		      Convert::ToDouble(n*System::Math::Sin(rad))));
      g->DrawLine(redPen,xStart,yStart,xPos,yPos);
    }

    Die Berechnung des Punktes, zu dem unsere Turtle laufen soll, erfolgt in zwei bzw. drei (wenn man die Berechnung für den x und y Wert getrennt betracht) Schritten.
    Schritt 1:
    Umwandlung des gegebenen Winkels ins Bogenmaß. In der Schule wird dazu die Gleichung gelehrt
    Bogenmaß = Grad * Pi/180. Fast die gleiche benutzt die Turtle auch, nur mit dem Unterschied, dass aufgrund der Tatsache, dass der Koordinatenursprung links oben in der Ecke liegt, die Turtel noch einmal um 90° nach links gedreht wird.
    Schritt 2:
    Mithilfe des eben berechneteten Bogenmaßes wird die neue Koordinate berechnet. Um den neuen y-Wert zu berechnen, wird der sin(winkel) gezogen. Der X-Wert aus dem cos(Winkel). Da die Grundlänge einen Wert n hat und nicht dem Einheitskreis entspricht, wird die Grundlänge n noch dazu multipliziert.
    Mit den neuen Koordinaten kann die Turtle schlußendlich ihre Linie zeichnen.
    Als Dritte wichtige Methode ist noch die turn Methode zu erwähnen.

    void turn(Int32 a)
    {
        Winkel =(Winkel+a)% 360;
    }

    Die kleine Methode dreht den Blickwinkel unserer Turtle um den Winkel den wir angeben.
    Je nach Vorzeichen dreht sie sich nach links oder nach rechts.

    Um die Turtel an einer bestimmten Koordinate zu platzieren, wird die Methode SetXY genutzt.

    void setXY(Int32 x, Int32 y)
    {
        Winkel=0;
        xPos=x;
        yPos=y;
    }