decomposition-composition.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a6876c80",
   "metadata": {},
   "source": [
    "# Fallstudie 2: Dekomposition und Komposition\n",
    "\n",
    "#### Andreas Morel-Forster, Marcel Lüthi</br>Departement Mathematik und Informatik, Universität Basel"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4f3d4773",
   "metadata": {},
   "source": [
    "In dieser Fallstudie besprechen wir zusammen, wie wir mit Hilfe von Funktionen ein Problem zerlegen und, auf flexible Art und Weise, wieder zusammenbauen können.\n",
    "Das konkrete Problem, an welchem wir die Strategie veranschaulichen, ist das Zeichnen einer Stadt. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "429f0715",
   "metadata": {},
   "source": [
    "### Problemstellung\n",
    "\n",
    "![city](images/city.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "566b6473",
   "metadata": {},
   "source": [
    "Unsere Aufgabe ist es, die obige Stadt zu zeichnen.\n",
    "Statt einfach nur genau die Stadt zu zeichnen, wollen wir nützliche Abstraktionen einführen.\n",
    "Diese sollen uns, nicht nur ermöglichen genau diese Stadt zu zeichnen, sondern auch andere Städte, Häuser und Hochhäuser.\n",
    "Vielleicht schaffen wir es sogar Abstraktionen zu schaffen, die für andere Anwendungen nützlich sind. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2e23163d",
   "metadata": {},
   "source": [
    "### Laden der Turtle Bibliothek"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "445f1527",
   "metadata": {},
   "source": [
    "Da wir Zeichnungen mit Turtlegrafik erstellen, müssen wir zuerst die Bibliothek laden und die Befehle zur Verfügung stellen.\n",
    "Dies machen wir mit den zwei folgenden Zellen, die sie noch nicht verstehen müssen. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d4e9c32a",
   "metadata": {},
   "outputs": [],
   "source": [
    "%mavenRepo shapemodelling-repo https://shapemodelling.cs.unibas.ch/repo/\n",
    "%maven ch.unibas.informatik:jturtle:0.7"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9879d3c4",
   "metadata": {},
   "outputs": [],
   "source": [
    "import static ch.unibas.informatik.jturtle.TurtleCommands.*;\n",
    "import java.awt.Color;"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5b8e27a2",
   "metadata": {},
   "source": [
    "### Strategie"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "85b4f233",
   "metadata": {},
   "source": [
    "Das Problem als Ganzes zu lösen ist schwierig.\n",
    "Wir überlegen uns stattdessen zuerst, wie wir dieses Problem in kleinere Teile zerlegen können.\n",
    "Jeden Teil implementieren wir dann als eine Methode.\n",
    "Unser Ziel ist es, die Methoden allgemein zu schreiben, so dass wir Sie in vielen unterschiedlichen Situationen einsetzen können."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cb339e12",
   "metadata": {},
   "source": [
    "#### Miniübungen \n",
    "\n",
    "* Welche kleineren Probleme würden Sie lösen?\n",
    "* Überlegen Sie sich, was geeignete Methoden wären um diese kleineren Probleme zu lösen. \n",
    "    * Was ist der Name der Methoden?\n",
    "    * Was ist der Rückgabewert der Methoden?"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e0dde09a",
   "metadata": {},
   "source": [
    "### Schritt 1: Zeichnen der geometrischen Figuren"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5547b891",
   "metadata": {},
   "source": [
    "Die einfachsten Elemente für unsere Zeichung sind die geometrischen Formen *Dreieck* und *Rechteck*.\n",
    "Eine einfache Implementation sieht wie folgt aus:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9a879a08",
   "metadata": {},
   "outputs": [],
   "source": [
    "class Shapes {\n",
    "\n",
    "    public static void drawRectangle() {\n",
    "        double height = 10;\n",
    "        double width = 20;\n",
    "        \n",
    "        reset(); // set turtle to origin and make it face upwards\n",
    "        penDown();\n",
    "        forward(height);\n",
    "        turnRight(90);\n",
    "        forward(width);\n",
    "        turnRight(90);\n",
    "        forward(height);\n",
    "        turnRight(90);\n",
    "        forward(width);        \n",
    "    }\n",
    "\n",
    "    public static void drawTriangle() {\n",
    "        double length = 20;\n",
    "        \n",
    "        reset();\n",
    "        penDown();        \n",
    "        turnRight(90);\n",
    "        forward(length);\n",
    "        turnLeft(120);\n",
    "        forward(length);\n",
    "        turnLeft(120);\n",
    "        forward(length);\n",
    "        turnLeft(120);        \n",
    "    }\n",
    "    \n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        reset();\n",
    "        drawRectangle();\n",
    "        drawTriangle();\n",
    "        display(drawing());\n",
    "    }\n",
    "}\n",
    "\n",
    "Shapes.main(new String[0]);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "537e881c",
   "metadata": {},
   "source": [
    "### Miniübungen\n",
    "\n",
    "* Passen Sie die Methoden `drawRectangle` und `drawTriangle` so an, dass diese die Höhe und Breite, respektive die Länge, als Parameter entgegennehmen. \n",
    "     * Passen Sie auch den Aufruf in der `main`-Methode entsprechend an. \n",
    "* Passen Sie die Methoden so an, dass diese auch die Anfangsposition als Parameter entgegennehmen. \n",
    "     * Nutzen Sie die Methode `goTo(x,y)` um die Turtle an die Position mit der Koordinate $(x, y)$ zu setzen. \n",
    "\n",
    "* Für ganz Schnelle: Können Sie die Felder mit einer Farbe ausfüllen?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "49ae389c",
   "metadata": {},
   "outputs": [],
   "source": [
    "class Shapes {\n",
    "\n",
    "    public static void drawRectangle() {\n",
    "        double height = 10;\n",
    "        double width = 20;\n",
    "        \n",
    "        reset(); // set turtle to origin and make it face upwards\n",
    "        penDown();\n",
    "        forward(height);\n",
    "        turnRight(90);\n",
    "        forward(width);\n",
    "        turnRight(90);\n",
    "        forward(height);\n",
    "        turnRight(90);\n",
    "        forward(width);        \n",
    "    }\n",
    "\n",
    "    public static void drawTriangle() {\n",
    "        double length = 20;\n",
    "        \n",
    "        reset();\n",
    "        penDown();        \n",
    "        turnRight(90);\n",
    "        forward(length);\n",
    "        turnLeft(120);\n",
    "        forward(length);\n",
    "        turnLeft(120);\n",
    "        forward(length);\n",
    "        turnLeft(120);        \n",
    "    }\n",
    "    \n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        reset();\n",
    "        drawRectangle();\n",
    "        drawTriangle();\n",
    "        display(drawing());\n",
    "    }\n",
    "}\n",
    "\n",
    "Shapes.main(new String[0]);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6cf3e11d",
   "metadata": {},
   "source": [
    "### Schritt 2: Zeichnen von Häusern und Wolkenkratzern"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1f9f9bbf",
   "metadata": {},
   "source": [
    "Wir gehen nun in der Abstraktion einen Grad höher.\n",
    "Aus einem Rechteck und einem Dreieck können wir ein Haus zeichnen. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2312e876",
   "metadata": {},
   "outputs": [],
   "source": [
    "class Houses {\n",
    "    \n",
    "    // Um das Haus zu zeichnen nutzen wir ein Rechteck und ein Dreieck\n",
    "    public static void drawHouse() {\n",
    "        \n",
    "    }\n",
    " \n",
    "    \n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        drawHouse();\n",
    "        display(drawing());\n",
    "    }\n",
    "        \n",
    "}\n",
    "Houses.main(new String[0]);\n",
    "          \n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f88d8c31",
   "metadata": {},
   "source": [
    "#### Miniübung \n",
    "\n",
    "* Implementieren Sie eine Methode, die einen 4-Stöckigen Häuserblock zeichnet.\n",
    "    Welche Parameter braucht Ihre Methode?\n",
    "* Implementieren Sie eine Methode, die mithilfe von 3 Häusern ein Reihenhaus macht. "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "df75cec1",
   "metadata": {},
   "source": [
    "### Kirchen und Flachdächer "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7b3c9ac1",
   "metadata": {},
   "source": [
    "Bisher sind unsere Häuser langweilig.\n",
    "Wir werden uns deshalb die Form der Dächer etwas genauer anschauen.\n",
    "Anstatt nur gleichseitige Dreiecke zuzulassen, erweitern wir unser Programm so, dass wir beliebige gleichschenklige Dreiecke zeichnen können.\n",
    "Dies erlaubt uns auch neue Abstraktionen wie Kirchen, etc. einzuführen.\n",
    "Gleichzeitig können wir damit zeigen, dass nicht nur void-Methoden, sondern auch Methoden mit Rückgabewert einen wichtigen Platz in der Programmierung einnehmen. \n",
    "\n",
    "Unser nächstes Ziel ist also ein Dreieck zeichnen zu können, bei dem die Basis und die Seitenlänge angegeben wird."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4dcabb6f",
   "metadata": {},
   "outputs": [],
   "source": [
    "class Church {\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        reset();\n",
    "        \n",
    "        display(drawing());\n",
    "    }\n",
    "}\n",
    "\n",
    "Church.main(new String[0]);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5f820208",
   "metadata": {},
   "source": [
    "### Endlösung"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "63b46f3b",
   "metadata": {},
   "source": [
    "Mit diesen Methoden können wir nun beliebig komplexe Städte zeichnen.\n",
    "Zeichnen Sie doch Ihre Stadt hier."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e9da0402",
   "metadata": {},
   "outputs": [],
   "source": [
    "class City {\n",
    "  \n",
    "    public static void main(String[] args) {\n",
    "        reset();\n",
    "        clear();\n",
    "        \n",
    "        // Ihr Zeichencode\n",
    "        \n",
    "        display(drawing());\n",
    "    }\n",
    "}\n",
    "City.main(new String[0]);"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
    "name": "conda-env-ijava-java",
    "display_name": "Java [conda env:ijava]",
    "language": "java"
  },
  "language_info": {
    "name": "Java",
    "version": "17.0.3-internal+0-adhoc..src",
    "mimetype": "text/x-java-source",
    "file_extension": ".jshell",
    "pygments_lexer": "java",
    "codemirror_mode": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}