Recherche Aufgabe: Pixel- vs. Vektorgrafik

Beschäftigt euch mit dem Thema Computergrafik. Hier gibt es zwei wichtige Unterschiede: Pixel- und Vektorgrafik.

  • Was sind die Unterschiede?
  • Stelle die Vor- und Nachteile zusammen.
  • Stelle die wichtigsten Dateiformate (Dateiernamensweiterung, Hersteller, Produkt) zusammen.

Stelle die Informationen übersichtlich in einer Word-Datei zusammen.

Computergrafik – Einführung

Schau dir obiges Video an und beantworte folgende Fragen:

  1. Erkläre den Unterschied zwischen Pixel- und Vektorgrafik.
  2. Erkläre die zwei Hauptmerkmale einer Pixelgrafik: Bildauflösung und Farbtiefe.
  3. Nenne die wichtigsten Datentypen für Pixel- und Vektorgrafiken.

Sollte Du in dem Vortrag nicht fündig werden, muss Du wohl Google bemühen.

HTML-Grundgerüst

Das HTML-Grundgerüst wird in den meisten Fällen nur per Copy&Paste übernommen. Viele IDEs (integrierte Entwicklungsumgebung) bieten die Möglichkeit, ein Grundgerüst als Snippet (Codeschnipsel) schnell und einfach einzufügen.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>

Weitere Informationen zum HTML-Grundgerüst

Heute geht es aber darum, das Grundgerüst zu verstehen und die Struktur zu erkennen.

ElementBeschreibung
<!DOCTYPE html>Der Doctype informiert den Browser mit welcher HTML-Version das Dokument zu dekodieren ist. Die Angabe html steht für den Standard HTML5 (aktuelle HTML-Version) Doctype bei selfhtml
<html lang=“de“>…</html>Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Baum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht.
<head>…</head>Das Head-Element enthält Metainformationen zur jeweiligen HTML-Seite.
<title>…</title>Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Z. B. im Tab des Browsers. Ein Title-Element gehört zwingend zu einem validen HTML-Dokument.

Und damit sind wir schon mitten drin im HTML-Seiten erstellen. Doch damit wir unsere erste eigene Seite anlegen können, brauchen wir erst mal einen entsprechenden Editor.

Karel the robot

Ich möchte euch heute Karel den Roboter vorstellen. In den 1970er-Jahren kam Rich Pattis, ein Doktorand aus Stanford, zu dem Schluss, dass es einfacher sei, die Grundlagen des Programmierens zu vermitteln, wenn die Schüler die grundlegenden Ideen in einer einfachen Umgebung erlernen könnten, die frei von den Komplexitäten ist, die die meisten Programmiersprachen charakterisieren. Rich entwarf eine einführende Programmierumgebung, in der Schüler einem Roboter beibringen, einfache Probleme zu lösen. Dieser Roboter wurde Karel genannt, nach dem tschechischen Dramatiker Karel Čapek, dessen Stück R.U.R. aus dem Jahr 1923 erschien. (Rossums Universal Robots) gab der englischen Sprache das Wort Roboter.

Karel der Roboter war ein ziemlicher Erfolg. Deshalb setze auch ich ihn für meine Einführungskurse in Algorithmik und Programmieren einsetzen. Bisher habe ich meistens das Projekt von Fred Overflow genutzt, um mit Karel die Programmiergrundlagen zu vermitteln. Mit dem Stanford Projekt ist es endlich möglich, das Programmieren von Anfang an mit Python-Code zu realisieren.

Karels Welt

Karels Welt ist definiert durch horizontal (Ost-West) und vertikal (Nord-Süd) verlaufende Spalten. Der Schnittpunkt einer Zeile und einer Spalte wird als Ecke bezeichnet. Karel kann nur an Ecken positioniert werden und muss in eine der vier Standard-Himmelsrichtungen (Norden, Süden, Osten, Westen) zeigen. Unten sehen Sie ein Beispiel für eine Karel-Welt. Hier befindet sich Karel an der Ecke von 1. Reihe und 1. Spalte, nach Osten ausgerichtet.

n diesem Beispiel sind mehrere andere Bestandteile von Karels Welt zu sehen. Das Objekt vor Karel ist ein Piepser. Wie in Rich Pattis‘ Buch beschrieben, sind Piepser „Plastikkegel, die ein leises Piepgeräusch von sich geben“. Karel kann einen Piepser nur erkennen, wenn er sich an der gleichen Ecke befindet. Die durchgezogenen Linien im Diagramm sind Wände. Mauern dienen als Barrieren in Karels Welt. Karel kann nicht durch Wände gehen, sondern muss um sie herum gehen. Karels Welt ist immer von Wänden an den Rändern begrenzt, aber die Welt kann unterschiedliche Dimensionen haben, je nachdem, welches spezifische Problem Karel lösen muss.

Karels Befehle

Wenn Karel ab Werk ausgeliefert wird, reagiert es auf eine sehr kleine Anzahl von Befehlen. Probieren wir die Befehle aus. Verwenden Sie die Schaltflächen unten, um die „Welt“ mit dem „Ziel“ in Einklang zu bringen:

Die einzelnen Befehle bewirken Folgendes:

BefehlBeschreibung
move()Bittet Karel, einen Block vorwärts zu gehen. Karel kann nicht auf einen move()Befehl reagieren, wenn ihm eine Wand den Weg versperrt.
turn_left()Fordert Karel auf, sich um 90 Grad nach links (gegen den Uhrzeigersinn) zu drehen.
pick_beeper()Bittet Karel, einen Piepser aus einer Ecke aufzuheben und bewahrt den Piepser in seiner Piepsertasche auf, die eine unendliche Anzahl von Piepsern aufnehmen kann. Karel kann nicht auf einen pick_beeper()Befehl reagieren, es sei denn, es gibt einen Piepser an der aktuellen Ecke.
put_beeper()Bittet Karel, einen Piepser aus dem Beutel zu nehmen und ihn an der aktuellen Ecke abzulegen. Karel kann nicht auf einen put_beeper()Befehl reagieren, es sei denn, es befinden sich Piepser in seinem Piepserbeutel.

Das leere Klammerpaar, das in jedem dieser Befehle angezeigt wird, ist Teil der gemeinsamen Syntax von Karel und Python und wird verwendet, um den Aufruf des Befehls anzugeben. Letztendlich werden die Programme, die Sie schreiben, zusätzliche Informationen in den Klammern einfügen, aber solche Informationen sind nicht Teil der primitiven Welt der Karel. Diese Klammern sind daher in den Standard-Karel-Programmen leer, aber Sie müssen daran denken, sie trotzdem einzufügen.

Wenn Karel versucht, etwas Illegales zu tun, z. B. durch eine Wand zu gehen oder einen nicht vorhandenen Piepser aufzuheben, tritt eine Fehlerbedingung auf.

Karels Befehle werden nicht von selbst ausgeführt. Stattdessen müssen Sie sie in ein Karel-Programm integrieren. In Kapitel 2 haben Sie die Möglichkeit, ein paar einfache Karel-Programme zu sehen!

Karel programmieren

Aufgabe 1

vorher
nachher

Neue Funktionen definieren

Obwohl das obige FirstKarel-Programm zeigt, dass es möglich ist, die turn_right()Operation nur mit den in FirstKarel eingebauten Befehlen auszuführen, ist das resultierende Programm konzeptionell nicht besonders klar. In Ihrem mentalen Design des Programms dreht sich Karel nach rechts, wenn es die Spitze der Kante erreicht. Die Tatsache, dass Sie dafür drei turn_left()Befehle verwenden müssen, ist ärgerlich. Es wäre viel einfacher, wenn Sie einfach turn_right() sagen könnten und Karel diesen Befehl verstehen würde. Das resultierende Programm wäre nicht nur kürzer und einfacher zu schreiben, sondern auch deutlich besser zu lesen.

Glücklicherweise ermöglicht es die Programmiersprache Karel, neue Befehle einfach durch das Einfügen neuer Funktionsdefinitionen zu definieren. Wann immer Sie eine Sequenz von Karel-Befehlen haben, die eine nützliche Aufgabe ausführt, z. B. das Drehen nach rechts, können Sie eine neue Funktion definieren, die diese Befehlssequenz ausführt. Das Format zum Definieren einer neuen Karel-Funktion ähnelt weitgehend der Definition von main() in den vorherigen Beispielen, bei der es sich um eine eigenständige Funktionsdefinition handelt. Eine typische Funktionsdefinition sieht folgendermaßen aus:

def turn_right():
        turn_left()
        turn_left()
        turn_left()

Probleme zerlegen

Aufgabe2: Fülle das Schlagloch

Um mehr von der Macht zu veranschaulichen, die mit der Definition neuer Funktionen einhergeht, ist es nützlich, Karel etwas Praktischeres tun zu lassen, als einen Piepser von einem Ort zum anderen zu bewegen. Die Straßen scheinen oft reparaturbedürftig zu sein, und es könnte lustig sein zu sehen, ob Karel Schlaglöcher in seiner abstrakten Welt füllen kann. Stellen Sie sich zum Beispiel vor, dass Karel auf der „Straße“ steht, die in der linken Abbildung zu sehen ist, eine Ecke links von einem Schlagloch in der Straße. Karels Aufgabe ist es, das Loch mit einem Piepser zu füllen und zur nächsten Ecke zu gehen. Das Diagramm auf der rechten Seite zeigt, wie die Welt nach der Programmausführung aussehen sollte.

vorher
nachher
  1. Ermittle eine einfache Lösung für dieses Problem
  2. Versuche Funktionen zu definieren, die ein Programm in folgender Form ermöglichen:
def main():
    move()
    fill_pothole()
    move()

Schleifen

For-Schleife

Die For-Schleife hilft dir Sachen wiederholen. Die For-Schleife ist eine klassische Zählschleife. Das heißt, es steht von Anfang an fest, wie oft die Schleife durchlaufen wird. Die Schleife aus untenstehenden Beispiel wird 4-mal durchlaufen und i nimmt die Werte 0 bis < 4 (also 3) an.

for i in range(4):
    print(i)

Das Programm gibt also die Zahlen 0 bis 3 aus.

While-Schleife

Die While-Schleife wird stattdessen so oft durchlaufen, solange die Bedingung erfüllt ist. Man könnte mit einer While-Schleife auch eine klassische Zählschleife bauen, aber natürlich macht man das in der Praxis nicht.

i = 0
while i < 4:
    print(i)
    i= i + 1

Hier ist eine Liste mit allen Bedingungen, die Karel kennt

BedingungGegenteilErläuterung
front_is_clear()front_is_blocked()Gibt es vor Karel eine Wand?
beepers_present()no_beepers_present()Gibt es auf dem aktuellen Feld einen Beeper?
left_is_clear()left_is_blocked()Gibt es links von Karel eine Wand?
right_is_clear()right_is_blocked()Gibt es rechts von Karel eine Wand?
beepers_in_bag()no_beepers_in_bag()Hat Karel noch eine Beeper in seiner Tasche?
facing_north()not_facing_north()Schaut Karel nach Norden?
facing_south()not_facing_south()Schaut Karel nach Süden?
facing_east()not_facing_east()Schaut Karel nach Osten?
facing_west()not_facing_west()Schaut Karel nach Westen?
Hier ist eine Liste mit allen Bedingungen, die Karel kennt

Löse Aufgabe 3 mit For- und mit While-Schleife

Aufgabe zur Turtle Grafiken

  1. Erstelle auf dem Z-Laufwerk einen Ordner mit deinem Namen
  2. Erstelle eine Funktion für ein beliebiges Vieleck zeichnet
    ZeichneVieleck(kantenlaenge, AnzahlEcken, Farbe)
  3. Erstelle ein Python Programm, dass min. 2 Schleifen enthält und eine kreative geometrische Figur zeichnet. Eine neue Idee gibt besonders viele Punkte.
  4. Kopiere den in 1. erstellen Ordner auf den Abgabe-Laufwerk ‚L:\Informatik 8-3\Test 8-3-1‘