• Teuflische Folge

      0 comments

    Soderle,

    dann werde ich mal den Grundlagen Bereich einweihen 🙂

    Wir fangen mal nicht ganz unten mit den Grundlagen an, sondern mit einem kleinen, aber feinen Algoritmus (keine Angst, Grundlagen zu Variabeln etc. kommen auch noch :))

    Wir betrachten heute mal die teuflische Zahlenfolge. Diese ist mathematisch in der folgenden Formel definiert:

    x_{n+1} =\left\{ \begin {array} {cc} x_n/2 & wenn x_n gerade \\ (3*x_n+1)/2 & wenn x_n ungerade \end {array} \right.

    Die Formel besagt, dass wir eine beliebige Zahl n

    • wenn sie gerade ist durch 2 teilen => n/2
    • wenn sie jedoch ungerade ist, wird auf n 1 addiert, also n+1.

    Wie bilden wir nun diese doch relativ einfache mathematische Formel nun in C++ ab?

    Dazu erstellt eine Source Datei. Diese Datei hat die Endung .cpp
    Ich habe meine Datei „folge.cpp“ genannt.

    Nun müssen wir noch eine Bibliothek unserem Sourcecode hinzufügen.
    Diese Bibliothek ist nur für die Ausgabe unserer berechneten Zahlenfolgen notwendig. Natürlich hat die Bibliothek noch andere Funktionen,
    aber auf diese gehen wir in einem anderen Beitrag ein.
    Die Bibliothek die wir für die Ausgabe benötigen heisst „iostream“. Folgendermaßen wird die Bibliothek in den Sourcecode eingefügt:

    #include <iostream>

    Mit dieser #include Anweisung können noch weitere Bibliotheken in euren Sourcecode eingebunden werden, ist hier aber nicht sinnvoll.

    Um nun ein Lauffähiges Programm zu haben, brauchen wir eine Funktion, die beim Starten der Anwendung immer aufgerufen wird. Das ist die „main()“ Funktion.

    Jedesmal wenn ihr ein Programm startet, wird diese Funktion als erstes ausgeführt.
    Der einfachheit halber habe ich den ganzen Algoritmus zur Berechnung der „Teuflischen Zahlenfolge“ in die Main Funktion gepackt.
    So sieht der Code im ganzen aus:

    #include "stdafx.h"
    #include  <iostream>
     
    using namespace std;
     
    int main(int argc, _TCHAR* argv[]) 
    {
       int n = 666; //Eine Teuflische Zahl für einen Teuflischen Algoritmus
       while (n != 1) 
       {
         if ((n % 2) == 0) 
         {
    	n = n / 2;
         } 
         else 
         {
    	n = (n * 3 + 1) / 2;
         }
         cout << n << endl;
       }
       cin >> n;
       return 0;
    }

    In diesem Code haben wir verschiedene Bedingte Anweisungen und Schleifen.
    Zum einen haben wir die „while“ Schleife. Diese wiederholt den Code, der innerhalb des Schleifenrumpes steht solange, bist die Bedingung erfüllt ist,
    die im Schleifenkopf angegeben ist.
    In dem Fall durchläuft die Schleife den Schleifenrumpf, solange „n != 1“ (gesprochen: n ist ungleich 1) ist.

    Innerhalb der Schleife haben wir die Bedingte Anweisung (oder auch If-Statement genannt).
    Mit ihr können wir eine True-False Bedingung abfragen.
    Im Sourcecode steht

    if ((n % 2) == 0)

    Hier wird der Modulo von n zur Zahl 2 berechnet. Es wird also nichts anderes gemacht, als den Rest der Division von n durch 2 zu ermitteln.
    Ist das Ergebnis der Berechnung 0, ist die Zahl gerade.
    Ist das Ergebnis der Berechnung ungleich 0, ist die Zahl ungerade.
    Wers mir nicht glaubt, kanns ja selber mal nachrechnen 😉

    Nun ist es so, falls das Ergebnis der Berechnung gerade, also 0 (oder true) ist , wird der obere Teil des If-Statements „betreten“ und auch nur dieser ausgeführt.
    Somit wird die Berechnung n=n/2 ausgeführt.
    Ist das Ergebnis der Berechnung ungerade, also ungleich 0 (oder eben false), wird der „else“ Teil des If-Statements „betreten“ und ebenfalls nur dieser ausgeführt.
    Es wird praktisch der obere Teil des If-Statements übersprungen.

    Als letzes haben wir noch eine Einfache Ausgabe für die berechneten Zahlen.
    Dies wird mittels std::cout bewerkstelligt.

    Ich hoffe Ihr habt nun viel Spass mit den Teuflischen Zahlen.

    P.S.: Wer mehr erfahren will, kann auch mal nach dem „Collatz-Problem“ suchen. Das ist im Grunde genau dieses Problem hier.

  • Erste Schritte mit unserer libRocket

      0 comments

    Wie letztes Mal schon angekündigt, wollen wir uns nun mit einem kleinen Projekt beschäftigen, das uns erlaubt ein bisschen mit libRocket herum zu spielen. Das Visual Studio Projekt könnt ihr hier downloaden.

    Die Solution besteht aus 2 Projekten: „rocketTemplate“ und „Shell“. „Shell“ stammt aus den Samples von libRocket und stellt uns alles nötige zur Verfügung, um direkt mit libRocket loslegen zu können. Wir bekommen ein Fenster zur Darstellung, in das libRocket rendert und alle Eingabe werden an libRocket weitergeleitet.
    „rocketTemplate“ ist unser eigentliches Projekt. Es besteht nur aus der „main.cpp“ und einer Klasse namens „SystemInterface“, dazu später mehr. Dazu kommen noch einige wichtige Dateien. Der Ordner „lib“ enthält die Bibliotheken von libRocket und in den Ordnern „Release“ bzw. „Debug“ findet man die zugehörigen Dlls.
    Als Letztes benötigen wir noch den Ordner „assets“. Darin befinden sich ein paar HTML/CSS Dateien und Fonts.

    Schauen wir uns die „main.cpp“ im Detail an.

    #include <Rocket/Core.h>
    #include <Rocket/Debugger.h>
    #include <Input.h>
    #include <Shell.h>
    #include "SystemInterface.h"

    Die „Core.h“ benötigen wir immer, damit haben wir Zugriff auf libRocket. Der Debugger ist optional. Er kann nützlich sein, wenn man komplexere Dokumente erstellt. Mehr dazu findet man in der libRocket Doku.
    „Input.h“ und „Shell.h“ stammen von unserem „Shell“ Projekt. Wir benötigen die Funktionen daraus für die Ein/Ausgabe.

    Rocket::Core::Context* context = NULL;
     
    void GameLoop()
    {
    	glClear(GL_COLOR_BUFFER_BIT);
     
    	context->Update();
    	context->Render();
     
    	Shell::FlipBuffers();
    }

    Dies ist die Hauptschleife unseres Programmes. Sie wird von der „Shell“ jedes Frame aufgerufen. Erst wird der Inhalt unseres Fensters gelöscht, dann wird „Update“ von libRocket aufgerufen, was die Eingaben verarbeitet und die GUI-Elemente entsprechend anpasst und dann lassen wir libRocket die GUI rendern. Zum Schluss wird das aktuelle Bild noch angezeigt. In einem Spiel würde man die Aufrufe einfach in die Hauptschleife integrieren.

    Als nächstes folgt die Main-Methode, welche beim Start unseres Programmes aufgerufen wird.

    if (!Shell::Initialise("../assets/") ||
    	!Shell::OpenWindow("Rocket Template", true))
    {
    	Shell::Shutdown();
    	return -1;
    }

    Mit Hilfe der „Shell“ legen wir den Ordner „assets“ als aktuelles Verzeichnis fest und öffnen ein Fenster für unser Programm. Geht etwas schief, dann beenden wir alles korrekt.

    ShellRenderInterfaceOpenGL opengl_renderer;
    Rocket::Core::SetRenderInterface(&opengl_renderer);

    Wir sagen libRocket, dass wir das OpenGL RenderInterface der Shell zur Darstellung verwenden wollen.

    SystemInterface system_interface;
    Rocket::Core::SetSystemInterface(&system_interface);

    Und übergeben unser eigenes SystemInterface. Diese Klasse muss vor allem eine Methode implementieren.

    float SystemInterface::GetElapsedTime()
    {
    	return Shell::GetElapsedTime();
    }

    Diese Methode soll die Zeit zurückgeben, die seit Start unseres Programmes vergangen ist. Benutzt wird dies für Animationen und andere zeitabhängige Dinge in libRocket. Wir leiten hier einfach auf die Funktion der Shell weiter.

    Rocket::Core::Initialise();

    Damit initialisieren wir libRocket. Dies muss unbedingt geschehen, allerdings erst nachdem ein RenderInterface und ein SystemInterface übergeben wurden.

    context = Rocket::Core::CreateContext("main",
        Rocket::Core::Vector2i(1024, 768));

    Damit erstellen wir einen libRocket context. Dieser wird benötigt, um unsere GUI darzustellen, außerdem bestimmen wir so die virtuellen Ausmaße unseres Fensters.

    Rocket::Debugger::Initialise(context);
    Input::SetContext(context);
     
    Shell::LoadFonts("../assets/");

    Der Debugger ist, wie schon gesagt, völlig optional, kann aber nützlich sein. Danach binden wir die Inputs, welche uns die Shell zur Verfügung stellt, an unseren Context. Alle Tastatur- und Mauseingaben werden also an die Objekte in unserem Context weitergeleitet. Und dann laden wir noch unsere Fonts, die in unserer Beispiel-GUI verwendet werden.

    Rocket::Core::ElementDocument* document = 
        context->LoadDocument("../assets/main.rml");
    if (document != NULL)
    {
    	document->Show();
    	document->RemoveReference();
    }

    Nun laden wir unser Dokument, unsere HTML-Datei, die unsere GUI beschreibt und stellen sie dar.

    Shell::EventLoop(GameLoop);

    Nun starten wie unsere Hauptschleife. Diese läuft nun bis wir das Programm schließen.

    context->RemoveReference();
    Rocket::Core::Shutdown();
     
    Shell::CloseWindow();
    Shell::Shutdown();
     
    return 0;

    Danach beenden wir noch alles wieder und sind auch schon fertig.

    Bleiben noch die HTML/CSS Dateien. Diese stellen ein ganz einfaches (hässliches) Fenster dar. Es hat einen Titel und einen Text als Inhalt. Man kann an dem Beispiel aber auch schon einige Besonderheiten von libRocket sehen.

    <handle move_target="#document">

    Dies finden wir in der „window.rml“ Datei. Und mehr ist nicht nötig, um unser Fenster verschiebbar zu machen. Man kann also das Fenster im Bereich mit dem Text „Titel“ einfach anklicken und so unser Fenster (Dokument) herum bewegen. Wir müssen dazu nicht eine Zeile Code schreiben.
    Und so lässt sich einiges in den HTML Dateien ausdrucken. Dadurch kann jeder an der GUI basteln, ohne dass er programmieren können muss. Vom Programmierer wird nur das Gerüst zur Verfügung gestellt und ein Grafiker kann dann nach belieben am Design der GUI schrauben. Dies war z.B. mit MFC früher nicht wirklich machbar.

    Dies soll es für heute gewesen sein, danke für’s lesen!
    NicoB

  • 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-&gt;MoveTo(xStart, yStart);
    	pDC-&gt;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;
    }