Animacja kreski<\/h2>\n
Chc\u0119 doda\u0107 kresk\u0119 (od g\u00f3ry ekranu do do\u0142u, u mnie kolor \u017c\u00f3\u0142ty, linia bardzo cienka – na 1 pixel) przesuwaj\u0105c\u0105 si\u0119 z lewa do prawa podczas dzia\u0142ania naszego oscyloskopu. Przedstawia to sekwencja poni\u017cszych obrazk\u00f3w:<\/p>\n
![](\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/oscy3-1-300x190.png\")
![\"\"](\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/oscy3-2-300x190.png\")
![\"\"](\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/oscy3-3-300x190.png\")
<\/p>\n
Rozwi\u0105za\u0144 jest wiele, a my proponujemy nast\u0119puj\u0105ce:<\/p>\n
- \n
- kasujemy star\u0105 kresk\u0119 w pozycji xPos (czyli rysujemy j\u0105 kolorem t\u0142a),<\/li>\n
- rysujemy dalsz\u0105 cz\u0119\u015b\u0107 w\u0142a\u015bciwego wykresu, <\/li>\n
- rysujemy now\u0105 kresk\u0119 w pozycji xPos+skokX (naszym ulubionym kolorem).<\/li>\n<\/ol>\n
Te trzy kroki powoduj\u0105, \u017ce nie musimy „od\u015bwierza\u0107” ca\u0142ego ekranu dla ka\u017cdego kawa\u0142ka krzywej na oscyloskopie (tj. nie musimy rysowa\u0107 ca\u0142ego wykresu od pocz\u0105tku, bazuj\u0105c na wcze\u015bniej zapami\u0119tanych warto\u015bciach otrzymywanych z Arduino). To rozwi\u0105zanie jest proste i dzia\u0142a fajnie, dlatego je stosujemy.<\/p>\n
void draw(){\r\n int x=getValue(); \r\n print(\"z Arduino x=\",x);\r\n y=wspA*x;\r\n \r\n strokeWeight(1); \/\/grubo\u015b\u0107 kreski = 1 pixel\r\n stroke(0); \/\/kasowanie = kolor ekranu \r\n line(xPos, 0, xPos, height);\r\n\r\n strokeWeight(10);\/\/ grubo\u015b\u0107 kreski dla wykresu\r\n stroke(0,0,255); \/\/kolor wykresu\r\n line(xPos - skokX, poprzedniY, xPos, y);\r\n\r\n strokeWeight(1); \/\/ponownie grubo\u015b\u0107 kreski\r\n stroke(0,0,200);\/\/ moj ulubiony kolor\r\n line(xPos+skokX, 0, xPos+skokX, height);\r\n \r\n xPos=xPos+skokX;\r\n if (xPos>=width){\r\n xPos=0;\r\n background(0);\r\n }\r\n}\r\n<\/pre>\nNa uwag\u0119 zas\u0142uguje<\/p>\n
- \n
- ci\u0105g\u0142a „zabawa” z kolorami i grubo\u015bciami linii – oddzielnie dla kreski, oddzielnie dla tworzonego wykresu (no i kasowanie kreski musi mie\u0107 t\u0105 sam\u0105 grubo\u015b\u0107, co nasza pionowa kreska).<\/li>\n<\/ul>\n
Napisy<\/h2>\n
S\u0105 niezb\u0119dne, aby szybko orientowa\u0107 si\u0119 jakie warto\u015bci s\u0105 rysowane – mamy wszak mo\u017cliwo\u015b\u0107 skalowania osi y, czyli zaw\u0119\u017cania\/zwi\u0119kszanie widocznego zakresu. Dodatkowo, mo\u017cna (a nawet wypada) pisa\u0107 warto\u015b\u0107 aktualnie otrzyman\u0105 z Arduino. Modyfikujemy funkcj\u0119 setup()<\/strong> dodaj\u0105c (gdzie\u015b na koniec) nast\u0119puj\u0105ce linie<\/p>\n
PFont f;\r\nf = createFont(\"Arial\",16,true); \/\/ Arial, 16 point, anti-aliasing on\r\ntextFont(f,36);<\/pre>\n
W powy\u017cszym kodzie przygotowujemy processing do pisania teks\u00f3w – pos\u0142ugujemy si\u0119 pomocnicz\u0105 zmienn\u0105 f (bez wi\u0119kszego znaczenia). Aby pisa\u0107 napisy u\u017cywamy <\/p>\n
fill(0,0,100); \/\/zmieniamy kolor teksu, je\u015bli chcemy\r\ntextSize(36); \/\/zmieniamy rozmiar tekstu, je\u015bli chcemy\r\ntext(\"gawryl\", 10,100); \/\/piszemy tekst \"gawryl\" w pozycji x=10, y=100<\/pre>\n
Funkcja text()<\/strong> ma spore mo\u017cliwo\u015bci, dlatego warto zajrze\u0107 do jej instrukcji.<\/a> Mo\u017cna nawet u\u017cywa\u0107 jej w ten spos\u00f3b:<\/p>\n
int i=17;\r\ntext(i, 10,100); \/\/piszemy liczb\u0119 ca\u0142kowit\u0105 i\r\ntext(3.0*i, 10, 200); \/\/piszemy liczb\u0119 rzeczywist\u0105\r\nfloat f=3.14;\r\ntext(f, 10, 300);\/\/piszemy liczb\u0119 rzeczywist\u0105<\/pre>\n
Jak wida\u0107 konwersja typ\u00f3w na napisy nast\u0119puje automatycznie – to bardzo u\u0142atwia spraw\u0119 pisania tekst\u00f3w. Proponuj\u0119 testowa\u0107 poznane mo\u017cliwo\u015bci – ale szybko dojdziemy do etapu, gdzie napisy nachodz\u0105 na siebie, przekrywaj\u0105 si\u0119, s\u0105 nieczytelne i nale\u017cy je wyczy\u015bci\u0107<\/strong>.<\/p>\n
Czyszczenie napis\u00f3w<\/h2>\n
Post\u0119powanie podobne do metody z animowan\u0105 lini\u0105 (z pocz\u0105tku zaj\u0119\u0107) nie jest jednak zadawalaj\u0105ce. Chodzi o to, \u017ce skoro zdecydowali\u015bmy si\u0119 na wyeliminowanie czyszczenia ekranu do minimum i kasowanie poprzenich napis\u00f3w polega na pisanie ich ponownie kolerm t\u0142a – to jednak pozostaj\u0105 jakie\u015b pozosta\u0142o\u015bci. Dlatego… proponuj\u0119<\/strong> ograniczy\u0107 obszar wykresu tylko do cz\u0119\u015bci okna, a nie do ca\u0142ej dost\u0119pnej szeroko\u015bci<\/em> x wysoko\u015bci <\/em>okienka. Dzi\u0119ki temu zabiegowi b\u0119dziemy mogli bezkarnie czy\u015bci\u0107 obszar przeznaczony do napisy (zielony prostok\u0105t na rysunku), a pozostawia\u0107 w spokoju w\u0142a\u015bciwy wykres (obszar z czarnym t\u0142em). Aby to zobrazowa\u0107 popatrzmy na rysunek:<\/p>\n
![](\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/oscy33b-300x190.png\")
<\/p>\nProponuj\u0119 wi\u0119c, aby ka\u017cdorazowo funkcja draw()<\/strong> rysowa\u0142a prostok\u0105t (u mnie w kolorze zielonym) w okre\u015blonych pozycjach, kasuj\u0105c ca\u0142\u0105 zawarto\u015b\u0107 tam si\u0119 znajduj\u0105c\u0105. Nast\u0119pnie nowe napisy moga by\u0107 ju\u017c wypisywane wewn\u0105trz tego prostok\u0105tu, bez brzydkich artefakt\u00f3w z poprzedniej metody. Dalej nast\u0119puje rysowanie w\u0142a\u015bciwego wykresu i pionowej kreski, od kt\u00f3rej rozpocz\u0119li\u015bmy nasze zaj\u0119cia.<\/p>\n
Pomys\u0142 z zielonym obszarem oczywi\u015bcie wymaga zmiany wsp\u00f3\u0142czynnik\u00f3w skalowania wspA<\/strong> i wspB<\/strong> prostej dopasowuj\u0105cej wczytany x<\/strong> z Arduino na wsp\u00f3\u0142rz\u0119dn\u0105 y<\/strong> okienka processinga. Powodzenia!<\/p>\n
Historia wykresu<\/h2>\n
Chodzi o to, aby mo\u017cna by\u0142o zatrzyma\u0107 kre\u015blenie wykresu (to ju\u017c mamy obs\u0142ugiwane) a dodatkowo aby mo\u017cna by\u0142o lewym klawiszem myszy klikn\u0105\u0107 i sprawdzi\u0107 (wypisa\u0107 w zielonym obszarze) warto\u015b\u0107 wykresu. Musimy wi\u0119c pami\u0119ta\u0107 poprzednie pomiary – b\u0119dziemy je przechowywa\u0107 w pomocniczych tablicach. Dlatego wprowadzamy zmienne globalne<\/p>\n
int[] values;\r\nfloat[] times;\r\n\r\nvoid setup(){\r\n<\/pre>\nDeklaracj\u0119 tablic values<\/strong> oraz times<\/strong> umieszczamy gdzie\u015b na pocz\u0105tku kodu, aby zmienne te by\u0142y widoczne wewn\u0105trz wszystkich funkcji poni\u017cej – a wi\u0119c setup(), getValue() oraz draw(). Nast\u0119pnie modyfikujemy funkcj\u0119 setup() o utworzenie konkretnych rozmiar\u00f3w tych tablic:<\/p>\n
values = new int[width];\r\ntimes = new float[width];\r\n<\/pre>\n
Nie wnikaj\u0105c w zawi\u0142o\u015bci dynamicznego przydzielania pami\u0119ci – powy\u017csze linie tworz\u0105 teyle element\u00f3w tablicy values oraz times, jaka jest szeroko\u015b\u0107 naszego okienka z wykresem. Przy okazji wida\u0107, \u017ce skoro Arduino nadaje do nas liczby z zakresu 0..1023 to na ich przechowywanie przygotowa\u0142em tablic\u0119 liczb ca\u0142kowitch, natomiast druga tablica przechowuje liczby rzeczywiste. Ta druga tablica b\u0119dzie notowa\u0107 mi czas odebrania (w sekundach) przez processing konkretnej liczby – bardzo przydatne w p\u00f3\u017aniejszej pracy z oscyloskopem.<\/p>\n
Modyfikujemy funkcj\u0119 odbieraj\u0105c\u0105 dane z portu szeregowego o fragment wype\u0142niaj\u0105cy nasze tablice:<\/p>\n
int getValue(){\r\n int value = -1;\r\n while (port.available() >= 3){\r\n if (port.read() == 0xff){\r\n value = (port.read() <<8) | (port.read());\r\n values[xPos]=value;\r\n times[xPos]=millis()\/1000.0;\r\n }\/\/if\r\n }\/\/while\r\n return value;\r\n}\/\/getValue<\/pre>\nZdecydowa\u0142em si\u0119 na zapisywanie liczb do tablic z wykorzystaniem zmiennej xPos<\/strong> – takie rozwi\u0105zanie jest sprytne, ale b\u0119dzie poci\u0105ga\u0142o za sob\u0105 pewne nast\u0119pstwa. Przy okazji poznajemy now\u0105 funkcj\u0119 processinga millis()<\/a> – kt\u00f3ra, podobnie jak w Arduino, zwraca czas dzia\u0142ania programu w milisekundach – dzi\u0119ki temu zapisujemy czas „odebrania” danej nades\u0142anej z Arduino. Liczb\u0119 t\u0105 dziel\u0119 przez 1000.0 aby mie\u0107 warto\u015b\u0107 w sekundach (z przecinkiem – jak w Polsce lubimy).<\/p>\n
Obs\u0142uga myszy – historia<\/h2>\n
- ci\u0105g\u0142a „zabawa” z kolorami i grubo\u015bciami linii – oddzielnie dla kreski, oddzielnie dla tworzonego wykresu (no i kasowanie kreski musi mie\u0107 t\u0105 sam\u0105 grubo\u015b\u0107, co nasza pionowa kreska).<\/li>\n<\/ul>\n
![](\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/oscy3-7-300x190.png\")
<\/p>\n