Bemerkung
Hallo und willkommen in der SunFounder Raspberry Pi & Arduino & ESP32 Enthusiasten-Gemeinschaft auf Facebook! Tauchen Sie tiefer ein in die Welt von Raspberry Pi, Arduino und ESP32 mit anderen Enthusiasten.
Warum beitreten?
Expertenunterstützung: Lösen Sie Nachverkaufsprobleme und technische Herausforderungen mit Hilfe unserer Gemeinschaft und unseres Teams.
Lernen & Teilen: Tauschen Sie Tipps und Anleitungen aus, um Ihre Fähigkeiten zu verbessern.
Exklusive Vorschauen: Erhalten Sie frühzeitigen Zugang zu neuen Produktankündigungen und exklusiven Einblicken.
Spezialrabatte: Genießen Sie exklusive Rabatte auf unsere neuesten Produkte.
Festliche Aktionen und Gewinnspiele: Nehmen Sie an Gewinnspielen und Feiertagsaktionen teil.
👉 Sind Sie bereit, mit uns zu erkunden und zu erschaffen? Klicken Sie auf [hier] und treten Sie heute bei!
Punkt auf der Schaukel¶
In diesem Projekt werden 3 Tasten verbunden: eine, um die Größe des Punktes zu ändern, eine, um die Position zu ändern und die letzte, um die Farbe zu ändern. Wenn Sie alle 3 Tasten gleichzeitig drücken, erhalten Sie einen schwingenden Punkt mit variabler Farbe.
Benötigte Komponenten
Für dieses Projekt benötigen wir die folgenden Komponenten.
Es ist definitiv praktisch, ein ganzes Set zu kaufen. Hier ist der Link:
Name |
ARTIKEL IN DIESEM KIT |
LINK |
|---|---|---|
Raphael Kit |
337 |
Sie können sie auch einzeln über die untenstehenden Links kaufen.
KOMPONENTENBESCHREIBUNG |
KAUF-LINK |
|---|---|
Verdrahtung
Skizze
import processing.io.*;
// Define an instance of the Dot object
Dot myDot;
// Define the pins that will be reading button presses
int[] pins = { 18, 23, 24 };
void setup() {
size(400, 400);
// Change the color mode of the sketch to HSB
colorMode(HSB, 360, 100, 100);
noStroke();
for (int i = 0; i < pins.length; i++) {
GPIO.pinMode(pins[i], GPIO.INPUT_PULLUP);
}
// Create a Dot in the middle of the screen
myDot = new Dot(width / 2, height / 2, 100, 255);
}
void draw() {
background(0);
// Modify attributes of the Dot depending on which buttons are pressed
if (GPIO.digitalRead(pins[0]) == GPIO.LOW) {myDot.setSize();}
if (GPIO.digitalRead(pins[1]) == GPIO.LOW) {myDot.setPosition();}
if (GPIO.digitalRead(pins[2]) == GPIO.LOW) {myDot.setColor();}
// Update the Dot state
myDot.update();
// And draw it to the screen
myDot.show();
}
class Dot {
float initX;
float initY;
float currentX;
float currentY;
int positionRange = 60;
float initSize;
float currentSize;
int sizeRange = 50;
int initColor;
int currentColor;
int ColorRange = 80;
float timer = 0.0;
float speed = 0.06;
Dot(float x, float y, float s, int c) {
initX = x;
initY = y;
currentX = x;
currentY = y;
initSize = s;
currentSize = s;
initColor = c;
currentColor = c;
}
void setSize() {
currentSize = initSize + sizeRange * sin( timer );
}
void setPosition() {
currentY = initY + positionRange * cos( timer *2);
}
void setColor() {
currentColor = int(initColor + ColorRange * sin( timer ));
}
void update() {
timer += speed;
}
void show() {
fill(currentColor, 100, 100);
ellipse(currentX, currentY, currentSize, currentSize);
}
}
Wie funktioniert das?
Anstatt den Punkt direkt zu zeichnen, erstellen wir hier eine Dot-Klasse.
Danach wird das Objekt (in diesem Fall myDot) deklariert.
Dies ist eine einfache Möglichkeit, Punkte mit mehreren identischen Eigenschaften zu zeichnen. Wenn wir beispielsweise in diesem Projekt dem Punkt drei Funktionen hinzufügen - Größe ändern, Position ändern und Farbe ändern - dann hat jeder von uns deklarierte Punkt dieselbe Funktion. Wir können denselben Knopf verwenden, um sie alle das Gleiche tun zu lassen, oder wir können verschiedene Tasten verwenden, um jeden Punkt separat zu steuern.
Die Verwendung von Klassen macht Ihren Skizzenentwurf schön, leistungsstark und flexibel.
Klasse (Programmierung) – Wikipedia
Schauen wir uns nun die Dot-Klasse genauer an.
Dot(float x, float y, float s, int c)
Bei der Deklaration müssen vier Parameter übergeben werden: der X- und der Y-Koordinatenwert der Position, die Größe und die Farbe (hier im HSB-Farbmodus eingestellt).
Jeder Parameter wird 2 Wertesätzen zugewiesen (Anfangswert und aktueller Wert).
float initX;
float initY;
float currentX;
float currentY;
int positionRange = 60;
float initSize;
float currentSize;
int sizeRange = 50;
int initColor;
int currentColor;
int ColorRange = 80;
Zusätzlich zum Anfangswert und zum aktuellen Wert gibt es auch einen Satz von Bereichswerten. Es ist nicht schwer zu verstehen, dass der Anfangswert dazu dient, den Anfangszustand des Punktes zu bestimmen (durch die eingehenden Parameter), während sich der aktuelle Wert innerhalb des Bereichs ändert, um den Punkt zu bewegen.
Daher werden, mit Ausnahme des X-Koordinatenwerts, die aktuellen Werte der anderen drei Parameter wie folgt berechnet:
void setSize() {
currentSize = initSize + sizeRange * sin( timer );
}
void setPosition() {
currentY = initY + positionRange * cos( timer *2);
}
void setColor() {
currentColor = int(initColor + ColorRange * sin( timer ));
}
Wenn Sie mit trigonometrischen Funktionen vertraut sind, sollte es nicht schwierig sein, Sinus und Kosinus zu verstehen, wodurch eine glatte periodische Änderung (von -1 bis 1) des aktuellen Wertes des Punktes erzeugt wird.
Wir müssen auch einen Ausgangswert, timer, für die periodische Variation hinzufügen. Er fügt den festen Wert in der Methode update() hinzu und wird in draw() aufgerufen.
void update() {
timer += speed;
}
Schließlich wird der Punkt gemäß dem aktuellen Wert mit der Methode show() angezeigt, die ebenfalls in draw() aufgerufen wird.
void show() {
fill(currentColor, 100, 100);
ellipse(currentX, currentY, currentSize, currentSize);
}
Was gibt es noch?
Wenn Sie den Einsatz von Klassen gemeistert haben, können Sie bereits mehrere Punkte mit den gleichen Eigenschaften zeichnen. Warum also nicht etwas Cooleres ausprobieren? Wie wäre es beispielsweise, ein stabiles Doppelsternsystem zu zeichnen oder ein „DUET“-Spiel zu erstellen?