03_theorie_filled.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "a6876c80",
   "metadata": {},
   "source": [
    "# Fallstudie 2: Dekomposition und Komposition\n",
    "\n",
    "#### Patrick Schnider, 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": {
    "tags": []
   },
   "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 = 20;\n",
    "        double width = 40;\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 = 40;\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(double xPos, double yPos, double height, double width) {\n",
    "        \n",
    "        reset(); // set turtle to origin and make it face upwards\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\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(double xPos, double yPos, double length) {       \n",
    "        reset();    \n",
    "        penUp();        \n",
    "        goTo(xPos, yPos);\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(0, 0, 20, 40);\n",
    "        drawTriangle(0, 20, 40);\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",
    " public static void drawRectangle(double xPos, double yPos, double height, double width) {\n",
    "        \n",
    "\n",
    "        reset(); // set turtle to origin and make it face upwards\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\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(double xPos, double yPos, double length) {       \n",
    "        reset();\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\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",
    "    \n",
    "    // Um das Haus zu zeichnen nutzen wir ein Rechteck und ein Dreieck\n",
    "    public static void drawHouse(double x, double y, double height, double width) {\n",
    "        drawRectangle(x, y, height, width);\n",
    "        drawTriangle(x, y + height, width);\n",
    "    }\n",
    " \n",
    "    \n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        drawHouse(10, 10, 20, 30);\n",
    "        \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": "code",
   "execution_count": null,
   "id": "6790c3ee-c803-400f-888f-eafe270dfe24",
   "metadata": {},
   "outputs": [],
   "source": [
    "class Houses {\n",
    "    \n",
    " public static void drawRectangle(double xPos, double yPos, double height, double width) {\n",
    "        \n",
    "\n",
    "        reset(); // set turtle to origin and make it face upwards\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\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(double xPos, double yPos, double length) {       \n",
    "        reset();\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\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",
    "    \n",
    "    // Um das Haus zu zeichnen nutzen wir ein Rechteck und ein Dreieck\n",
    "    public static void drawHouse(double x, double y, double height, double width) {\n",
    "        drawRectangle(x, y, height, width);\n",
    "        drawTriangle(x, y + height, width);\n",
    "    }\n",
    " \n",
    "    \n",
    "    // Für den 4-stöckigen Häuserblock brauchen wir 4 Rechtecke und ein Dreieck    \n",
    "    public static void draw4Block(double x, double y, double height, double width) {\n",
    "        drawRectangle(x, y, height, width);\n",
    "        drawRectangle(x, y + height, height, width);\n",
    "        drawRectangle(x, y + 2*height, height, width);\n",
    "        drawRectangle(x, y + 3*height, height, width);\n",
    "        drawTriangle(x, y + 4*height, width);\n",
    "    }\n",
    "    \n",
    "    // Für das Reihenhaus nutzen wir 3 Häuser\n",
    "    public static void drawRow(double x, double y, double height, double width) {\n",
    "        drawHouse(x, y, height, width);\n",
    "        drawHouse(x + width, y, height, width);\n",
    "        drawHouse(x + 2*width, y, height, width);\n",
    "    }\n",
    "    \n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        draw4Block(0, 0, 10, 20);\n",
    "        drawRow(30, 0, 20, 20);\n",
    "        display(drawing());\n",
    "    }\n",
    "        \n",
    "}\n",
    "Houses.main(new String[0]);\n",
    "          \n"
   ]
  },
  {
   "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 Triangle {\n",
    "\n",
    "    public static void drawTriangle(double xPos, double yPos, double lengthBase, double lengthLeg) {\n",
    "        reset();\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\n",
    "        penDown();        \n",
    "        \n",
    "        double baseAngle = computeBaseAngle(lengthBase, lengthLeg); // gamma is the isoceles angle\n",
    "        double vertexAngle = 180 - 2 * baseAngle;\n",
    "        penDown();\n",
    "        turnRight(90);\n",
    "        forward(lengthBase);\n",
    "        turnLeft(180 - baseAngle);\n",
    "        forward(lengthLeg);\n",
    "        turnLeft(180 - vertexAngle);\n",
    "        forward(lengthLeg);\n",
    "    }\n",
    "    \n",
    "    public static double computeBaseAngle(double lengthBase, double lengthLeg) {\n",
    "        return radToDegree(Math.acos(lengthBase / (2 * lengthLeg)));\n",
    "    }\n",
    "    \n",
    "    public static double radToDegree(double rad) { \n",
    "        return rad / (2 * Math.PI) * 360;\n",
    "    }\n",
    "\n",
    "    public static void main(String[] args) {\n",
    "        clear();\n",
    "        reset();\n",
    "        drawTriangle(20, 20, 20, 40);\n",
    "        drawTriangle(0, 0, 20, 20);\n",
    "        display(drawing());\n",
    "    }\n",
    "}\n",
    "\n",
    "Triangle.main(new String[0]);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5f820208",
   "metadata": {},
   "source": [
    "### Die fertige Stadt"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "63b46f3b",
   "metadata": {},
   "source": [
    "Mit diesen Methoden können wir nun beliebig komplexe Städte zeichnen.\n",
    "Eine mögliche Lösung ist nachfolgend gezeigt. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e9da0402",
   "metadata": {},
   "outputs": [],
   "source": [
    "class City {\n",
    "  \n",
    "    public static void drawTriangle(double xPos, double yPos, double lengthBase, double lengthLeg, Color color) {\n",
    "        reset();\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\n",
    "        penDown();        \n",
    "        penColor(color);\n",
    "        \n",
    "        double baseAngle = computeBaseAngle(lengthBase, lengthLeg);\n",
    "        double vertexAngle = 180 - 2 * baseAngle;\n",
    "        penDown();\n",
    "        turnRight(90);\n",
    "        forward(lengthBase);\n",
    "        turnLeft(180 - baseAngle);\n",
    "        forward(lengthLeg);\n",
    "        turnLeft(180 - vertexAngle);\n",
    "        forward(lengthLeg);\n",
    "        \n",
    "        // fill\n",
    "        penUp();\n",
    "        penColor(color);\n",
    "        turnLeft(180 - baseAngle / 2);\n",
    "        forward(lengthBase / 2);\n",
    "        fill();\n",
    "    }\n",
    "    \n",
    "    public static double computeBaseAngle(double lengthBase, double lengthLeg) {\n",
    "        return radToDegree(Math.acos(lengthBase / (2 * lengthLeg)));\n",
    "    }\n",
    "    \n",
    "    public static double radToDegree(double rad) { \n",
    "        return rad / (2 * Math.PI) * 360;\n",
    "    }\n",
    "\n",
    "    \n",
    "    public static void drawRectangle(double xPos, double yPos, double height, double width, Color color) {\n",
    "        reset(); // set turtle to origin and make it face upwards\n",
    "        penUp();\n",
    "        goTo(xPos, yPos);\n",
    "        penDown();\n",
    "        penColor(BLACK);\n",
    "        forward(height);\n",
    "        turnRight(90);\n",
    "        forward(width);\n",
    "        turnRight(90);\n",
    "        forward(height);\n",
    "        turnRight(90);\n",
    "        forward(width);        \n",
    "\n",
    "        // fill\n",
    "        penUp();\n",
    "        backward(width / 2);\n",
    "        turnRight(90);\n",
    "        forward(height / 2);\n",
    "        \n",
    "        penColor(color);\n",
    "        fill();\n",
    "\n",
    "    }    \n",
    "\n",
    "    \n",
    "    public static void drawHouse(double x, double y, double height, double width, double roofLength) {\n",
    "        drawTriangle(x, y + height, width, roofLength, RED);\n",
    "        drawRectangle(x, y, height, width, GREY);\n",
    "    }\n",
    "    \n",
    "    public static void drawChurch(double x, double y, double height, double width) {\n",
    "        drawRectangle(x, y, height / 3, width, GREY);\n",
    "        drawRectangle(x + width, y, height, width / 3, GREY);\n",
    "        drawTriangle(x + width, y + height, width / 3, height, BLACK);\n",
    "    }\n",
    "     \n",
    "    public static void draw4StoriesSkyscraper(double x, double y, double height, double width) {\n",
    "        \n",
    "        drawRectangle(x, y, height / 4, width, GREY);\n",
    "        drawRectangle(x, y + height / 4, height / 4, width, GREY);\n",
    "        drawRectangle(x, y + 2 * height / 4, height / 4, width, GREY);\n",
    "        drawRectangle(x, y + 3 * height / 4, height / 4, width, GREY);\n",
    "    }\n",
    "    \n",
    "       \n",
    "    public static void main(String[] args) {\n",
    "        reset();\n",
    "        clear();\n",
    "        drawChurch(-80, 0, 30, 20);\n",
    "        drawHouse(-30, 0, 10, 20, 15);\n",
    "        drawHouse(-10, 0, 15, 10, 10);\n",
    "        drawHouse(0, 0, 10, 20, 15);\n",
    "        draw4StoriesSkyscraper(25, 0, 40, 20);\n",
    "        draw4StoriesSkyscraper(45, 0, 60, 10);\n",
    "        draw4StoriesSkyscraper(55, 0, 30, 15);\n",
    "        \n",
    "        display(drawing());\n",
    "    }\n",
    "        \n",
    "}\n",
    "City.main(new String[0]);\n",
    "          \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2152495f",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Java [conda env:ijava]",
   "language": "java",
   "name": "conda-env-ijava-java"
  },
  "language_info": {
   "codemirror_mode": "java",
   "file_extension": ".jshell",
   "mimetype": "text/x-java-source",
   "name": "Java",
   "pygments_lexer": "java",
   "version": "17.0.3-internal+0-adhoc..src"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}