function setup() {
// Unsere "Zeichenfläche" (Canvas = Leinwand)
createCanvas(450, 300)
// Wir malen auf schwarzem Hintergrund. Der Weltraum ist
nachher auch schwarz :)
background("grey")}

function draw() {
        // So werden Formen ohne Rand gezeichnet
        noStroke()

        // Ein rotes Rechteck (rectangle)
        // rect(x, y, w, [h])
        fill("red")
        rect(0,0,100,50)

        // ohne Höhe wird das Rechteck zum Quadrat [h]ist optional
        fill("blue")
        rect(110,0,50)
}

// Ein gelber Kreis
// circle(x, y, d)
// d - Durchmesser
fill("yellow")
circle(170,0,50)
//ups, hier ist x,y der Mittelpunkt
// Also 25 nach unten und 25 nach rechts (Koordinatesystem üben ;) )
circle(195,25,50)
//jetzt könnte man den oberen Kreis auch auskommentieren,
    oder man ändert die Koordinaten gleich im ersten Circle.
// Jetzt ein Rechteck in einer
// https://htmlcolorcodes.com/color-picker/
// Dort kann man mit copy&paste den RGB Wert kopieren
// Alternativ: "colorpicker" googeln
fill(32, 196, 194)
rect(230, 0, 100,50)

// Ein oranges Dreieck
// triangle(x1, y1, x2, y2, x3, y3)
fill("orange")
triangle(0,50,25,0,50,50)
// Vielleicht ein bisschen spitzer, dann sieht es so aus
wie ein wendiges Raumschiff
fill(192)
triangle(0,100,15,50,30,100)

// noStroke() sorgte dafür, dass keine "Ränder" um die Formen
gezeichnet werden. Lässt man noStroke() weg, dann tut p5.js so,
als wenn man stroke(0) oder stroke("black") angibt.
//Wollen wir uns mal rote Ränder angucken um das zu visualisieren.
stroke("red")
fill("blue")
rect(60,0,50)
// Oder mal die "Standardeinstellung" in schwarz und mal versetzt
über dem vorherigen Quadrat, damit man das auch sieht.
stroke(0)
fill("DARKORCHID")
rect(100,20,50)
// Auch die Dicke des Randes hat einen Standard, der ist 1 und
bedeutet 1 pixel aussen und 1 pixel innen
// Jetzt doppelt so dick machen
strokeWeight(2)
stroke("white")
fill(128,192,64)
rect(180,0,50)

/* Durch den Rand werden die Formen größer. Es werden bei
strokeWeight(1) ein Pixel Innen und einer Außen gezeichnet, also
insgesamt ist der Rand 2 Pixel stark. */
// strokeWeight() ist auch die Linienstärke für Punkte und Linien.
// Ein gelber Punkt oben links beim blauen Quadrat
stroke("yellow")
//strokeWeight - Strichstärke
strokeWeight(1)
point(60,0)
//Punkte können auch zu Kreisen werden. Auch hier ist die
Koordinate der Mittelpunkt
stroke("yellow")
strokeWeight(50)
point(325,25)
// Linien haben einen Anfangs- und Endpunkt
// line(x1, y1, x2, y2)
stroke("magenta")
strokeWeight(1)
line(0,150,450,150)
//oder Dicker (Wenn keine neue Farbe angegeben wirde, wird
weiter mit Magenta gemacht)
strokeWeight(5)
line(0,160,450,160)
// Es gibt die Variablen height und width, die Euch p5.js
anhand der Canvas-Größe gibt :)
stroke("cyan")
strokeWeight(1)
// minus Eins weil die Koordinaten ja bei 0 anfangen.
line(0,0, width-1, height-1)
// Und ein Punkt in der Mitte kann man dann mit width/2
und height/2 darstellen. (Anmerkung: height oder width
ungerade sind, dann ist ja die Hälfte irgendwas.5 . Dann
schneidet point() einfach die Nachkommastelle ab )
stroke("white")
strokeWeight(3)
point(width/2, height/2)

// mit let werden Variablen erzeugt
// (1) man kann auch erstmal für x_rand und y_rand konkrete
Zahlen einsetzen.
// (2) mit random(von, bis) wird eine zufällige Zahl erzeugt.
Die Zahl "von" kann dabei sein, die Zahl "bis" ist aber nie dabei.
// Info: Genaugenommen wird eine Zahl mit Nachkommastellen
erzeugt. Die werden aber einfach abgeschnitten, wenn man sie
als Farbwerte oder Koordinaten einsetzt :)
let x_rand = random(0,width)
let y_rand = random(0,height)
// (3) Auch zufällige Farben sind möglich
let r_rand = random(0,256)// 256 ist nicht dabei!
let g_rand = random(0,256)
let b_rand = random(0,256)
//let farbe_rand = color(r_rand, g_rand, b_rand)

// (4) wollt Ihr nur aus ein paar Farben auswählen, geht das auch so:
//Achtet auf die eckigen Klammern []
let farbname_rand = random(["gold", "silver"])
//let farbe_rand = color(farbname_rand)
// Mit stroke("white") wird ein Sternenhimmel erzeugt.
(Leider können wir den nicht als Hintergrund nehmen,
weil das zu nachher zu kompliziert wird)
// Hier 2 für den Sternenhimmel und 10 für die bunte Punktewolke
strokeWeight(2)
// (1)(2)
stroke("white")
//(3)(4)
//stroke(farbe_rand)
point(x_rand,y_rand)

/*
Die Funktion draw() wird dauernd (mehrmals pro Sekunde) ausgeführt.
So können wie später ein Spiel programmieren
*/
function draw() {
        // (1) immer wieder das Canvas "löschen"
        background("black")
        noStroke()


        fill(255)
        circle(meteor.X, meteor.Y, 20)
        // man kann auch + 2 oder + 3 machen um den meteor schneller
        zu machen.
        meteor.Y = meteor.Y + 1
        //print(meteor.Y)
}

// (2) ups wo ist er hin?
//print(meteor)
//(3)(1) ohne +10
//(3)(2) Man sollte dann auch  height +10 (also plus
Durchmesser_vom_Meteor/2 vergleichen damit der Meteor
unten auch verschwindet)
// false && ist einfacher als auskommentieren
if(meteor.Y > height + 10){
        //(3)(1) un (3)(2)
        print(meteor.Y)
        //noLoop()
        // Wenn er also verschwunden ist, dann erscheint ein neuer
        Meteorit oben. Ja, ist eigentlich der alte, aber Pssst! 😆
        meteor.Y = 0
        //(3)(3)
        // Und jetzt kommt der Zufall ins Spiel:
        meteor.X = random(0,width)
        //print(meteor.X)
        //Damit wir das alles besser lesen können, schneiden wir
        selber die Nachkommastellen mit int() ab. (Wurde ja
        schon erwähnt)
        meteor.X = int(meteor.X)
        //print(meteor.X)
}
//noLoop()

// Oben haben wir schon meteors definiert, das soll eine
Auflistung aller Meteoriten sein
// Und einzelne Meteoriten sehen dann so aus
let meteor1 = {X: 10, Y:0}
let meteor2 = {X: 65, Y:0}
let meteor3 = {X: 180, Y:0}
let meteor4 = {X: 200, Y:0}
let meteor5 = {X: 400, Y:0}
// mit push() werden die dann in Auflistung aller Meteoriten
(ein Array) angefügt.
meteors.push(meteor1)
meteors.push(meteor2)
meteors.push(meteor3)
meteors.push(meteor4)
meteors.push(meteor5)
// Tipp: meteor1, meteor2 sind nur Hilfsvariablen gewesen.
Mann kann auch direkt auf das Array pushen:
// meteors.push({X: 10, Y:0}) usw.

// So sieht die Datenstruktur dann aus (Achtung,
//print("Datenstruktur:\n",meteors)
// Zugegriffen wir dann mit eckigen Klammern und zwar wird hier
von 0 an gezählt:
print("\nUnd die Meteoriten sehen wie im Code aus:")
print(meteors[0])
print(meteors[1])
print(meteors[2])
print(meteors[3])
print(meteors[4])
// Das klingt erstmal komliziert, ist aber gewöhnungssache.
Arrays sind flexibler als wenn man meteor1, meteor2 usw.
als Variablen hat

function draw() {
        background("black")
        noStroke()
        fill(255)
        // meteors.length ist die Länge des Arrays
        // Mit dieser Schleife wird in der variablen i gezählt
        und zwar von 0 bis 2, also 0,1,2
        for (let i = 0; i < meteors.length; i  = i + 1){
                // Hier definieren wir mit current_meteor, den
                aktuellen Meteor in diesen Schleifendurchlauf
                let current_meteor = meteors[i]

                // Der Meteor wird gezeichnet
                circle(current_meteor.X, current_meteor.Y, 20)
                // Und lassen ihn nach unten wandern indem wir
                die y-koordinate um eins nach oben zählen.
                current_meteor.Y = current_meteor.Y + 1

                // Warum =10 und -10? Einfach mal "P" im richtigen
                Moment drücken :)
                if(current_meteor.Y > height + 10){//Warum +10

                        current_meteor.Y = - 10 //Warum -10?
                        current_meteor.X = random(0,width)
                        // int() schneidet die Nachkommastellen ab,
                        die random() liefert.
                        current_meteor.X = int(current_meteor.X)
                }
        }
}

let ship = {}
// Die Funktion setup() wird einmalig am Anfang des Programms ausgeführt
function setup() {
        createCanvas(450, 300)
        // Wir machen die Bewegungen erstmal langsam
        // framerate bedeutet "Wiederholungen pro Sekunde"
        // (0) Hier erstmal 30 oder so einsetzen
        frameRate(60)
        background("black")

        //erst hier ist width definiert
        // Und so kann ship initialisiert werden
        ship = { X: width/2 }
}

function draw() {
        background("black")
        noStroke()

        // *** Schiffscode ANFANG ***
        fill(255)
        // Keycodes kann man hier ausprobieren:
        // https://keycode.info/

        // '<-' pressed
        if (keyIsDown(37)) {
                if (ship.X > 0) {
                // wenn man hier 2 anstatt 1 wird"s schneller
                ship.X = ship.X - 1
                }
        }

        // '->' pressed
        if (keyIsDown(39)) {
                if (ship.X < width + 1) {
                // auch hier natürlich 2 anstatt 1 ändern
                ship.X = ship.X + 1
                }
        }

        drawShip()
        // *** Schiffscode ENDE***
}
function drawShip(){
        // Die 295 kommt daher, dass 5 pixel Luft unter dem
        Raumschiff natürlicher wirken. (Bei 299 wäre es ja
        direkt unten am Rand kleben!)
        triangle(ship.X-8, 294, ship.X, 269, ship.X+8, 294)
        // Kannst Du die Geometrie des Raumschiffs erklären?
        Tipp: ship.X ist die x-Koordinate dees Raumschiffs,
        gemeint ist hier die Spitze.
}