xxxxxxxxxx132
/*Global Variablen (stehen außerhalb von Funktionen)können von allen Funktionen verwendet werden*/let temp; // Variable für die Temperatur der SenseBoxlet name; // Variable für den Namen der SenseBoxfunction setup() { /* Setup() wird zu beginn einmal ausgeführt. Hier kommen alle Parameter, die nur einmal gesetzt werden müssen. */ createCanvas(400, 800); /* createCanvas(400, 800); Mit diesem Befehl wird ein Zeichenbereich mit der Breite 400 Pixel und der Höhe 800 Pixel festgelegt. Innerhalb dieses Zeichenbereichs können wir jetzt Objekte platzieren. */ checkAPI(); // Ruft einmal die Funktion checkAPI auf setInterval(checkAPI, 300000); /* setInterval(checkAPI, 300000); Setzt einen Timer, der die Funktion checkAPI alle 5 Minuten aufruft, um die Sensordaten immer aktuell zu halten. setInterval misst die Zeit in Milisekunden 300000 Milisekunden = 5 Minuten */ frameRate(24); // Wiederholrate (24 Bilder die Sekunde) für die Zeichenfläche}function checkAPI() { loadJSON("https://api.opensensemap.org/boxes/58d82cf2b69fac0011215087", SenseBoxData); /* loadJSON läd die Daten von einer bestimmten SenseBox, jede SenseBox hat ihre eigene ID in unserem Fall lautet die ID: 58d82cf2b69fac0011215087, nachdem die Daten geladen wurden übergibt die Funktion die Daten der Funktion SenseBoxData, die die Daten dann weiter verarbeiten kann. */}function SenseBoxData(data) { console.log(data); /* console.log(data) schreibt in die Konsole die empfangenen Daten der Sensebox */ temp = data.sensors[0].lastMeasurement.value; name = data.name; /* Hier übergeben wir die Werte von der SenseBox den einzelen Variablen. */}function draw() { /*Die Funktion draw() führt kontinuierlich die in ihrem Block enthaltenen Codezeilen aus, bis das Programm angehalten oder noLoop() aufgerufen wird.*/ background(130, 30, 255); /* background(r,g,b); Die Farbe wir mit 3 Farbenwerten innerhalb der Klammern bestimmt, den sogenannten RGB-Werten, dabei steht R für Rot, G für Grün und B für Blau. Diese Farbe werden additiv zusammen gemischt. Jede Farbe kann ein Wertebereich von 0 bis 255 annehmen, 0 für keine Farbe und 255 für 100% Farbe. Wenn background(); am Anfang von draw() steht, wird die Zeichenfläche mit der Farbe, die bei background(); in Klammern steht übermalt. Die Zeichenfläche wird damit also gelöscht. Steht background(); aber in setup(), wird die Zeichenfläche nur am Anfang des Programms einmal gelöscht und danach werden alle Elemente übereinandergezeichnet. */ if (temp && name) { /* Mit if(temp && name) überpfüfen wir, ob die Vaiablen Werte beinhalten, also ob die Funktion checkAPI schon Daten von der SenseBox an die Variablen temp und name ubersant hat, wenn nicht, können wir auch nicht einen Namen oder die Temperatur zeichnen. */ fill(200,20,20); /* Mit fill() werden alle danach aufgerufene Elemente eingafärbt. Wenn ich mehrere Kreise beispielsweise unterschiedlich färben wollen würde, muss ich auch immer vor jedem neuen Kreis einen neuen fill() befehl anführen. */ noStroke(); /* Mit noStroke() wird keine umrandung gezeichnet */ ellipse(width/2, height/2, 20*temp, 20*temp); /* mit der Funktion ellipse() zeichen wir den Roten Kreis. Die Funktion erwartet vier Werte, die mit Kommas getrennt werden. Die ersten beiden Werte geben die Position des Kreises an, der dritte und vierte Wert die größe des Kreises. Sobald der dritte und vierte Wert nicht identisch sind, wird eine Ellipse gezeichnet. Bei der Position des Kreises sind auch Variablen angegeben: width und height. Diese Variablen sind in p5js vorprogrammierte Variablen, die die Breite und Höhe der Zeichenfläche abgespeichert haben. Mit width/2 und height/2 setzen wir die Position auf die Mitte der Zeichenfläche. */ } fill(20) /* mit fill() färben wir den Text mit einen dunklen grau, dabei ist es dir überlassen, ob du immer alle RGB-Wert angibst oder bei Graustufen nur einen Wert. fill(20) ist das gleiche wie fill(20,20,20) */ textSize(16); /* textSize() setzt die Schriftgröße, pobier gerne unterschiedliche Werte aus! */ text(temp + "°C", width/2, height/2+10); text(name, width/2, height/2+30); /* mit der Funktion text() erwartet drei Werte. Der erste Wert ist der Text, der geschrieben werden soll. der zweite und dritte Wert ist für die Position. text("dein Text oder eine Vaiable", x-Position, y-Position); */ }