{"id":1501,"date":"2019-01-11T22:20:09","date_gmt":"2019-01-11T22:20:09","guid":{"rendered":"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/?p=1501"},"modified":"2019-01-28T12:27:40","modified_gmt":"2019-01-28T12:27:40","slug":"sterowanie-serwem-za-pomoca-joysticka-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-3-4","status":"publish","type":"post","link":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/?p=1501","title":{"rendered":"Nokia 5510 – wizualizacja 3D"},"content":{"rendered":"

Czy mo\u017cna zmusi\u0107 Arduino do wy\u015bwietlania grafiki 3D? Wiadomo, \u017ce do grania w gry potrzebujemy pot\u0119\u017cnych akcelerator\u00f3w graficznych (karty nVidii lub ATI) lub dla mniej wymagaj\u0105cej grafiki mocnego CPU. Arduino mo\u017ce i nie ma wielkich zasob\u00f3w mocy obliczeniowej, ale przy u\u017cyciu prostego wy\u015bwietlacza i lekkiej imitacji biblioteki 3d mo\u017cemy uzyska\u0107 interesuj\u0105ce efekty. Stworz\u0119 \u201csilnik 3D\u201d – kt\u00f3ry w zasadzie jest tylko prostym rzutowaniem punkt\u00f3w na ekran. Pomimo ograniczonej funkcjonalno\u015bci, mo\u017cemy uzyska\u0107 ciekawe efekty takie jak obracaj\u0105ca si\u0119 przestrzenna siatka sze\u015bcianu.<\/p>\n

\"\"<\/p>\n

Ca\u0142a sztuczka uzyskania wra\u017cenia 3D polega na dobrym rzutowaniu punk\u00f3w w przestrzeni na piksele ekranu. Wiadomo, \u017ce obiekty dalsze s\u0105 mniejsze, a te bli\u017csze – s\u0105 wi\u0119ksze (perspektywa!). Ta obserwacja prowadzi mnie do banalnego pomys\u0142u – nie b\u0119d\u0119 rzutowa\u0107 tr\u00f3jwymiarowych punkt\u00f3w (x,y,z) na ekranik wy\u015bwietlacza (x,y), uwzgl\u0119dniaj\u0105c pozycj\u0119 kamery w przestrzeni a jedynie… b\u0119d\u0119 zmniejsza\u0107\/zwi\u0119ksza\u0107 obiekty w zale\u017cno\u015bci od ich odleg\u0142o\u015bci! Do oddania efektu g\u0142\u0119bi u\u017cyj\u0119 funkcji wyk\u0142adniczej a nie liniowej – to kolejna obserwacja, z kt\u00f3r\u0105 trudno si\u0119 nie zgodzi\u0107 (obiekt dwa razy dalej nie jest wcale dwa razy mniejszy!). Dzi\u0119ki temu obiekty znajduj\u0105ce si\u0119 bli\u017cej b\u0119d\u0105 powi\u0119kszane, a te dalej pomniejszane.<\/p>\n

\"\"<\/p>\n

Daje nam to wra\u017cenie, \u017ce obiekty znajduj\u0105ce si\u0119 dalej zbli\u017caj\u0105 lub oddalaj\u0105 si\u0119 wolniej, a natomiast te bli\u017cej – szybciej. Oddalaj\u0105ce si\u0119 punkty powinny si\u0119 zbiega\u0107 do \u015brodka ekranu aby otrzyma\u0107 efekt perspektywy punktowej.<\/p>\n

\"\"<\/p>\n

Jako przyk\u0142ad u\u017cyjemy wy\u015bwietlacza Nokii 5110 oraz bibliotek Adafruit_PCD8544.h oraz Adafruit_GFX.h. Biblioteki pos\u0142u\u017c\u0105 nam do kontrolowania ekranem i wy\u015bwietlania linii.<\/p>\n

Na pocz\u0105tku musimy zaimplementowa\u0107 rzutowanie:<\/p>\n

struct point2D{\r\n int x,y;\r\n};\r\n\r\nstruct point3D{\r\n float x,y,z;\r\n point2D CastTo2D(){\r\n   point2D ret;\r\n   ret.x = szerokosc_ekranu\/2 + (x * X_SCALE *  pow(Z_SCALE, z));\r\n   ret.y = wysokosc_ekranu\/2 - (y * Y_SCALE * pow(Z_SCALE, z));\r\n   return ret;\r\n }\r\n};\r\n\r\n<\/pre>\n
Tworz\u0119 w ten spos\u00f3b dwie struktury oraz metod\u0119 do p\u00f3\u017aniejszego rzutowania na ekran. X_SCALE, Y_SCALE to wsp\u00f3\u0142czynnki skalowania na poszczeg\u00f3lnych osiach ekranu (bardzo przydatne w przypadku gdy piksele wy\u015bwietlacza nie s\u0105 kwadratowe). Z_SCALE natomiast to wsp\u00f3\u0142czynnik skalowania g\u0142\u0119bi.<\/p>\n
Po pod\u0142\u0105czeniu ekranu do Arduino u\u017cywamy bibliotek, \u017ceby co\u015b wy\u015bwietli\u0107:<\/p>\n
#include <SPI.h>\r\n#include <Adafruit_GFX.h>\r\n#include <Adafruit_PCD8544.h>\r\nAdafruit_PCD8544 disp = Adafruit_PCD8544(5, 4, 3);\r\n\r\nvoid setup() {\r\n    disp.begin();\r\n    disp.display(); \/\/ wyswietlanie buffera\r\n}\r\n<\/pre>\n
Ten kr\u00f3tki kawa\u0142ek kodu powinien wy\u015bwietli\u0107 logo Adafruit na ekranie. Mo\u017cna po\u015bwi\u0119ci\u0107 chwil\u0119 na przyjrzenie si\u0119 bli\u017cej bibliotece i postara\u0107 si\u0119 stworzy\u0107 w\u0142asne logo, np. takie:<\/p>\n
\"\"<\/p>\n
Gdy ju\u017c wszystko nam dzia\u0142a mo\u017cemy przej\u015b\u0107 do wy\u015bwietlenia czego\u015b przestrzennego. Pomocna b\u0119dzie funkcja rysuj\u0105ca lini\u0119 na ekranie pomi\u0119dzy punktami w przestrzeni:<\/p>\n
void draw3DLine(point3D a, point3D b){\r\n disp.drawLine(a.CastTo2D().x, a.CastTo2D().y, b.CastTo2D().x, b.CastTo2D().y, BLACK);\r\n}<\/pre>\n
Musimy jednak mie\u0107 na uwadze w jaki spos\u00f3b punkty przestrzenne s\u0105 konwertowane na piksele ekranu. Punkt (0,0,0) znajduje si\u0119 na \u015brodku ekranu, a sk\u0142adowa Z okre\u015bla powi\u0119kszenie (Z>0) lub pomniejszenie (Z<0) obiektu. Dla Z=0 rozmiar obiektu nie zostanie zmodyfikowany. Znaczenie ma r\u00f3wnie\u017c skala (X_SCALE, Y_SCALE), gdy\u017c to w\u0142a\u015bnie przez te warto\u015bci mno\u017cymy po\u0142o\u017cenie punktu (dla ma\u0142ej skali musimy poda\u0107 wi\u0119ksze wsp\u00f3\u0142rz\u0119dne, bo nasz obiekt na ekranie mo\u017ce okaza\u0107 si\u0119 jedynie ma\u0142\u0105 kropk\u0105).<\/span><\/p>\n
Wy\u015bwietlenie siatki sze\u015bcianu to odpowiednie po\u0142\u0105czenie o\u015bmiu punkt\u00f3w – dosy\u0107 proste. Ale jak sprawi\u0107, \u017ceby ten sze\u015bcian si\u0119 obraca\u0142? W tym celu si\u0119gamy po par\u0119 funkcji trygonometrycznych, a mianowicie sinus i cosinus.<\/span><\/p>\n
\"\"<\/p>\n
Zamiast podawa\u0107 konkretne wsp\u00f3\u0142rz\u0119dne x i y, mo\u017cemy u\u017cy\u0107 k\u0105ta i odleg\u0142o\u015bci od \u015brodka. Punkt (r*cos(a), r*sin(a)), niezale\u017cnie od k\u0105ta a, jest zawsze oddalony o odleg\u0142o\u015b\u0107 r od punktu(0,0). Zwi\u0119kszaj\u0105c ten k\u0105t, punkt b\u0119dzie \u201cw\u0119drowa\u0107\u201d po okr\u0119gu. Mo\u017cemy to wykorzysta\u0107 w\u0142a\u015bnie do obracania sze\u015bcianem.<\/span><\/p>\n
Teraz mo\u017cemy okre\u015bli\u0107 pionow\u0105 par\u0119 punkt\u00f3w wsp\u00f3\u0142rz\u0119dnymi:<\/span><\/p>\n
(cos(a)*R, y, sin(a)*R) i (cos(a)*R, -y, sin(a)*R), <\/span><\/p>\n
gdzie R to promie\u0144 okr\u0119gu, po kt\u00f3rym b\u0119d\u0105 porusza\u0107 si\u0119 punkty i jednocze\u015bnie po\u0142owa przek\u0105tnej sze\u015bcianu. Aby uzyska\u0107 nast\u0119pn\u0105 par\u0119 punkt\u00f3w musimy je obr\u00f3ci\u0107 o 90 stopni, czyli do poprzedniego k\u0105ta dodajemy \u213c\/2:<\/span><\/p>\n
(cos(a+PI\/2)*R, y, sin(a+PI\/2)*R) i (cos(a+PI\/2)*R, -y, sin(a+PI\/2)*R).<\/span><\/p>\n
W podobny spos\u00f3b uzyskujemy pozosta\u0142e pary punkt\u00f3w dodaj\u0105c odpowiednio wielokrotno\u015b\u0107 k\u0105ta \u213c\/2 (dla trzeciej pary: 2*PI\/2 i czwartej: 3*PI\/2).<\/span><\/p>\n
Kiedy ju\u017c zapisali\u015bmy pozycje punkt\u00f3w w tej postaci, mo\u017cemy zwi\u0119ksza\u0107 k\u0105t a (lub zmniejsza\u0107 co spowoduje obr\u00f3t w przeciwnym kierunku). Warto pami\u0119ta\u0107, \u017ce jest to k\u0105t w radianach i nale\u017cy go zwi\u0119ksza\u0107 o stosunkowo ma\u0142e warto\u015bci.<\/span><\/p>\n
Efekt jest nast\u0119puj\u0105cy:<\/span><\/p>\n