Tworzenie wykresów z użyciem processingu

Processingjęzyk programowania oraz zintegrowane środowisko programistyczne (IDE) stworzone na potrzeby sztuki elektronicznej (wizualnej, interaktywnej, dźwiękowej) oraz projektowania graficznego. ~ Wikipedia.

Jak łatwo się domyśli technologię to możemy połączyć z arduino co w przyszłości, na różne sposoby będziemy mogli wykorzystać w naszych projektach, tworząc własne wykresy (o czym przeczytacie dzisiaj) czy inteligentny interfejs dla naszego programu.

Zaczynajmy. Po pierwsze konieczna będzie instalacja nowego IDE.
Odpowiednią wersję możemy pobrać ze strony: https://processing.org/download/
Zintegrowane środowisko w dużym stopniu przypomina arduino IDE działa także na podobnych zasadach.

Pierwszy program w Processingu.

background(0);
size(300,400);
fill(255,124,11);
ellipse(150,200,300,300);

W celu przetestowania naszego nowego IDE wystarczy tylko skopiować kilka linijek podanych wyżej oraz uruchomić program – wówczas powinno wyświetlić się nam takie dodatkowe okno z naszym rysunkiem:

Zanim przejdziemy do analizy kodu warto jeszcze wspomnieć o kilku sprawach. Projekt cały czas jest w fazie rozwoju, nie posiada on jeszcze określonego sposobu formatowania kodu czy schematu tworzenia programów. Nadal pojawić się także mogą problemy z działaniem kodu wówczas warto założyć post na forum projektu.

background(); – ustawiamy kolor tła z zakresu 0 do 255 (gdzie 0 = czarny, 255 = biały)
size(x,y); -ustalamy wielkość naszego okna
fill(r,g,b); – ustalamy kolor podając trzy wartości w standardzie rgb, (czerwony, zielony, niebieski).
ellipse(x,y, size_x, size_y); x,y są to współrzędne okręgu, natomiast size_x, size_y są to wymiary naszej ellipsy. 

Kilka uwag zarówno w przypadku fill() jak i background() możemy sterować kolorami na różne sposoby, podając trzy składowe rgb lub odcień czerni i bieli w przypadku kiedy podamy jedną wartość.

Uwaga ogólna, punkt o współrzędnych (0,0) domyślnie ustawiony jest w lewym górnym rogu, i to w odniesieniu do niego renderowane są elementy na scenie („grafika na ekranie”).

Wszystkie figury posiadają ustawiony środek, nie musimy więc ustawiać go ręcznie.

Więcej na temat składni języka: https://processing.org/reference/

Drugi program – komunikacja z Arduino pro mini.

Zanim jeszcze jednak zaczniemy musimy sprawdzić numer naszego portu na liście dostępnych portów.
Na początku podpinamy Arduino do komputer, następnie uruchamiamy program podany niżej.

import processing.serial.*;

println(Serial.list());

W konsoli pokażą nam się dostępne porty. Każdy port posiada swój numer (zobacz zdjęcie niżej) i to właśnie ten numer będzie nam potrzebny przy wybieraniu portu.

„Hello world”

Program w Processingu:

import processing.serial.*;

int lf = 10;  
String myString = null;
Serial myPort;  

void setup() 
{ 
  background(0);
  size(300,400);
  myPort = new Serial(this, Serial.list()[0], 9600);
  myPort.clear();
}

void draw() 
{
  while (myPort.available() > 0) 
  {
    myString = myPort.readStringUntil(lf);
    if (myString != null) 
    {
        println(myString);
    } 
  }
 myPort.clear();
} 

Kod w Arduino:

void setup()
{
	Serial.begin(9600);
}

void loop()
{
	Serial.println("Hellow world");
	delay(500); // tak wiem, bardzo zła praktyka
}

Odpowiedni program wgrywamy na płytkę, którą zostawiamy podłączoną do komputera. Następnie w Processingu uruchamiamy nasz program.

 Wysłany z Arduino tekst jest odbierany w naszej aplikacji i wyświetlany w konsoli nie w oknie aplikacji. O tym jak wyświetlić coś w oknie aplikacji dowiesz się z następnego przykładu, na  razie jednak zajmijmy się analizą kodu:

import processing.serial.*; – dodajemy bibliotekę 

int lf = 10;  – wartość char znaku feed line
String myString = null; – zmienna do której zapisujemy dane odebrane z portu
Serial myPort; – tworzymy nowy obiekt portu

void setup() – zmienna setup podobnie jak w arduino
myPort = new Serial(this, Serial.list()[0], 9600); – ustawiamy wartości w konstruktorze obiektu. 

this – wskaźnika (temat na inną okazję, na razie pozostawmy to domyślnie)
Serial.list()[x] – nr portu w miejsce x
9600 – szybkość transmisji

myPort.clear(); – czyścimy port
void draw()  – funkcja działająca podobni jak loop
while (myPort.available() > 0)  – sprawdzamy czy jest coś „pojawiło się na porcie”
myString = myPort.readStringUntil(lf); – zapisujemy do zmiennej odebrane dane 
if (myString != null) –  sprawdzamy czy udało się zapisać dane do zmiennej 
println(myString); – wyświetlamy odebrany tekst

Trzeci program – rysowanie wykresu.

Program w Processingu:

import processing.serial.*;

int lf = 10; 
String myString = null;
Serial myPort;  
float num, ax = 0, ay = 250;

void setup() 
{
  size(800,300);
  background(0);
  
  myPort = new Serial(this, Serial.list()[0], 9600);
  myPort.clear();
}

void draw() 
{
  while (myPort.available() > 0) 
  {
    myString = myPort.readStringUntil(lf);
    if (myString != null) 
    {
      num = float(myString); 
      println(num);
    }
      stroke(0,255,0);
      strokeWeight( 2 );
      line(ax, ay, ax + 5, 250 - (num * 50));
  
      ax = ax + 5;
      ay = 250 - (num * 50);
      
      if(ax >= 800)
      {
       background(0);
       ax = 0;
        
      }
  }
  
  myPort.clear();
  
} 

Program w Arduino:


void setup() 
{
	Serial.begin(9600);
}

void loop() {
	float val = analogRead(A0);

	int msg = map(val, 0, 1023, 0, 5);

	Serial.println(msg);
	delay(200);
}

Schemat połączenia:

 

Analiza kodu Processing:

float num, ax = 0, ay = 250; // zmienne wykorzystane do obliczeń
stroke(0,255,0); // kolor linii

strokeWeight( 2 ); // grubość linii
line(ax,ay,bx,by); // linia z punktu ax,ay do punktu bx,by

Analiza kodu Arduino:

int msg = map(val, 0, 1023, 0, 5); 

Funkcja map przyjmuje pięć parametrów i na ich podstawie oblicza wartość średnią. 

map(wartość_podana, minimum_zakresu, maksimum_zakresu, minimum_zwracane, maksimum zwracane);

Efekt działania programu:

Na dzisiaj to tyle, nowy projekt z wykorzystanie Arduino i Processingu już niedługo 🙂

Maciej Szostak

Create Account



Log In Your Account