¶ Willkommen
Hier ist der magische Ort, an dem wir alles Wissen sammeln 
.
¶ Geschichte der Rechentechnik
Bevor wir wir Profis werden und lernen, wie man aktuelle Computer programmiert, werfen wir einen Blick in die Geschichte und sehen uns historische Maschinen an. Viele Ideen hinter diesen Maschinen finden sind in aktuellen Computern wieder.
¶ Einführung Programmierung
Für die grafische Programmierung nutzen wir Strive (eine Python-Version von p5js)
https://strivemath.org/ide
Hier dürft ihr spicken:
Aufgabe
Lest euch das Strive-CheatSheet oben durch. Markiert euch nach jeder folgenden Übung Befehle, die ihr kennengelernt habt.
¶ Grundstrukturen der Programmierung
Bei der imperativen/prozeduralen Programmierung werden wir folgende Grundstrukturen verwenden
| Grundstruktur | Beschreibung | Beispiel (Python) |
|---|---|---|
| Sequenz | Anweisungen werden der Reihe nach von oben nach unten ausgeführt. | a = 5b = 3c = a + b |
| Bedingung | Führt Anweisungen nur aus, wenn eine Bedingung erfüllt ist. | if a > b:c = a |
| Schleife | Wiederholt Anweisungen, solange eine Bedingung wahr ist. | while a > 0:a -= 1 oder for i in range(5):print(i) |
¶ Dokumentation
Bei Strive findet ihr links am Rand die Dokumentation. Dort findet ihr alles wichtige.
¶ Erste Objekte
Aufgabe (hatten wir bereits im Unterricht erledigt):
Schaut in die Dokumentation unter Shapes > 2D nach den Grundfiguren.
Zeichnet jede Grundfigur.
Zusatz: Nutzt die Positionen der Maus für eigene Experimente. mouseX bzw. mouseY geben euch die Koordinaten der Maus.
def setup():
# Erstellt Zeichnfläche mit Bildbreite(windowWidth) und Bildhöhe(windowHeight)
createCanvas(windowWidth,windowHeight)
def draw():
# überzeichne alles in weiß
background("white")
# Grundfiguren
point(25,25)
line(50,50,100,100)
rect(150,50,100)
square(200,200,30)
triangle(300,50,250,250,300,300)
circle(50,200,50)
ellipse(50,280,80,40)
#usw.
# Maus Experiment
line(400,400,mouseX,mouseY)
¶ Übung Flaggen
Aufgabe
Findet heraus, welche Grafiken folgende Codes erzeugen.
a) durch nachdenken
b) durch ausprobieren
¶ Aufgabe 1
def setup():
createCanvas(360, 240)
# Zeichne Figuren ohne Rand
noStroke()
def draw():
background(255)
fill(0, 85, 164)
rect(0, 0, 120, 240)
fill(255)
rect(120, 0, 120, 240)
fill(239, 65, 53)
rect(240, 0, 120, 240)
noLoop()
¶ Aufgabe 2
def setup():
createCanvas(300, 200)
noStroke()
background(255)
def draw():
fill(200, 0, 0)
ellipse(width/2, height/2, 120, 120)
noFill()
stroke(10)
rect(0,0,300,200)
noLoop()
¶ Aufgabe 3
def setup():
createCanvas(300, 200)
noStroke()
def draw():
fill(255, 204, 0)
rect(0, 0, width, height/3)
fill(204, 0, 0)
rect(0, height/3, width, height/3)
fill(0,0,0)
rect(0, 2*height/3, width, height/3)
¶ Aufgabe 4:
Aufgabe
Zeichnet eine eigene Flagge mit Strive.
Kopiert euren Code und gebt ihn im LernPlan ab: https://www.lernsax.de/l.php?learning_plan|fachklasse-8pin1ip-20252026%40gts.lernsax.de|Eigene Flagge|/
¶ Aufgabe 5: Zusatz
farben = ['blue','black','red','yellow','green']
pos_x = [250,450,650,350,550]
pos_y = [400,400,400,330,330]
def setup():
createCanvas(windowWidth,windowHeight)
# Zeichne dicken Rand
strokeWeight(10)
# Durchsichtige Füllung
fill('rgba(0,0,0,0)')
def draw():
# generiere den Index für jedes Element der Liste
for i in range(len(farben)):
# setzt Farbe des Rands
stroke('red')
stroke(farben[i])
circle(pos_x[i],pos_y[i],150)
noLoop()
¶ Zustand
Jede Anwendung und App hat einen Zustand.
Zustand: Die gesamte Menge aller relevanten Informationen eines Systems zu einem bestimmten Zeitpunkt. Er beschreibt also, wie das System „im Moment“ aussieht.
Wenn wir programmieren, fragen wir uns, welchen Zustand unsere App hat und legen für alle relevanten Informationen eine Variable an.
Beispiel: Ein Ball, der sich in einem 2D-Koordinatensystem bewegt, benötigt folgende Variablen
- position_x
- position_y
- geschwindigkeit_x
- geschwindigkeit_y
¶ Erste Beispiel / Abprallender Ball
# Zustand
pos_x = 0
pos_y = 0
bewegung_x = 30
bewegung_y = 15
def setup():
createCanvas(windowWidth,windowHeight)
def draw():
# wenn Zustand geändert wird, muss er importiert werden
global pos_x, pos_y, bewegung_y, bewegung_x, bewegung_y
# alles löschen
# background("white")
# Zeichnen
circle(pos_x,pos_y,100)
# Bewegung
pos_x = pos_x + bewegung_x
pos_y = pos_y + bewegung_y
# Abprallen oben und unten
if pos_y > windowHeight:
bewegung_y = bewegung_y * -1
elif pos_y < 0:
bewegung_y = bewegung_y * -1
# Abprallen rechts und links
if pos_x > windowWidth:
bewegung_x = bewegung_x * -1
elif pos_x < 0:
bewegung_x = bewegung_x * -1
¶ Funktion
ToDO
¶ Beispiel random
Mit der random-Funktion können Zufallszahlen erzeugt werden.
# random(n) mit 1 Parameter liefert eine zufällige Zahl zwischen 0 und n (inklusive)
zahl1 = random(5) # Wert zwischen 0 und 5
print(zahl1)
# random(a,b) mit 2 Parametern liefert eine zufällige Zahl zwischen a und b (inklusive)
zahl2 = random(-3,1) # Wert zwischen -3 und 1
print(zahl2)
¶ 10 zufällige Kreise
def setup():
createCanvas(windowWidth,windowHeight)
def draw():
background("white")
#drawTickAxes()
for x in range(10):
fill(random(255))
circle(random(windowWidth),random(windowHeight), random(50,150))
# halte an (draw wird nicht weiter aufgerufen)
noLoop()
¶ Spiel: Fange den Mauszeiger
# Zustand
pos_x = random(windowWidth)
pos_y = random(windowHeight)
durchmesser = 50
def setup():
createCanvas(windowWidth,windowHeight)
def draw():
# immer nötig: wenn der Wert einer Zustandsvariable geändert wird
global pos_x, pos_y
background("white")
# Zeichne den Kreis und Linie
circle(pos_x,pos_y,durchmesser)
line(pos_x,pos_y, mouseX,mouseY)
# Wenn Mauszeiger in Kreis -> spring zu neuer Postion
abstand = dist(pos_x,pos_y,mouseX,mouseY)
if abstand < durchmesser / 2:
pos_x = random(windowWidth)
pos_y = random(windowHeight)
¶ Spiel: Erweiterung "Fange den Mauszeiger" mit Zeit und Farbe
# Zustand
pos_x = random(windowWidth)
pos_y = random(windowHeight)
durchmesser = 50
punkte = 0
# zähler für Frame
z = 0
def setup():
createCanvas(windowWidth,windowHeight)
def draw():
# immer nötig: wenn der Wert einer Zustandsvariable geändert wird
global pos_x, pos_y, punkte, z, durchmesser
background("white")
# Zeichne den Kreis und Linie
circle(pos_x,pos_y,durchmesser)
line(pos_x,pos_y, mouseX,mouseY)
# Wenn Mauszeiger in Kreis -> spring zu neuer Postion
abstand = dist(pos_x,pos_y,mouseX,mouseY)
fill(abstand,0,0)
if abstand < durchmesser / 2:
pos_x = random(windowWidth)
pos_y = random(windowHeight)
punkte = punkte + 1
durchmesser = durchmesser - 10
if durchmesser < 5:
durchmesser = random(100,300)
# Minuspunkt, wenn lange nicht getroffen
if z > 300:
punkte = punkte - 1
z = 0
text("Punkte: " + str(punkte),10, 10)
# Erhöhe Framecounter
z = z + 1