¶ 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:
¶ 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
if pos_y > windowHeight:
bewegung_y = bewegung_y * -1
elif pos_y < 0:
bewegung_y = bewegung_y * -1
if pos_x > windowWidth:
bewegung_x = bewegung_x * -1
elif pos_x < 0:
bewegung_x = bewegung_x * -1
¶ Funktion
ToDO
¶ Beispiel random
ToDo
¶ 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