Następny artykuł
Poprzedni artykuł

O mnie

Nazywam się Mateusz Jachowicz, mam 18 lat i jestem uczniem Liceum Ogólnokształcącego im. Artura Grottgera w Grybowie na kierunku matematyczno-fizycznym. Już w szkole podstawowej zacząłem bawić się komputerem w nieco inny sposób. Podczas gdy moi rówieśnicy grali w gry, ja starałem się je tworzyć. Przez te wszystkie lata poznałem wiele narzędzi w których programowałem, modelowałem i teksturowałem, lecz do dziś moim ulubionym zajęciem jest tworzenie gier w silniku graficznym Unity. Podczas mojej przygody z programowaniem napotykałem wiele barier, które spowodowane były brakiem wiedzy, ponieważ uczyłem się na własną rękę w wolnym czasie. Mimo to jednak cały czas się rozwijałem, aż w końcu moje zamiłowanie do tworzenia gier przerodziło się również w tworzenie stron internetowych oraz aplikacji. Nigdy nie lubiłem używania gotowych rozwiązań (rozwiązywanie coraz to bardziej złożonych problemów dodawało mi wiedzy, doświadczenia i pewności siebie), ponieważ było to dla mnie pójściem na łatwiznę. Według niektórych tworzenie na nowo istniejących już rozwiązań jest jak wynalezienie koła od nowa. Usłyszałem kiedyś, że jeśli podczas tworzenia koła od nowa się czegoś nauczę, to powinienem to zrobić i taką wyznaję zasadę.

Cenne informacje

Strona była testowana na różnych przeglądarkach, jednak Opera była tą, na której pracowałem podczas jej tworzenia. Z tego powodu chciałbym zaznaczyć, że jeżeli coś nie chciałoby działać na innej, prosiłbym o próbę w Operze (ważne, aby przeglądarka w pełni wspierała technologię WebGL!). Ponadto strona nie była pisana z myślą o telefonach. Preferowana rodzielczość to FullHD (1920x1080), lub przynajmniej o proporcjach obrazu monitora wynoszących 16:9. Preferowany system operacyjny to Windows 10. Informacje na temat korzystania ze strony i narzędzi znajdują się w pierwszym artykule na stronie głównej. Nie wymagana jest łączność z internetem, jednak pewne rzeczy (np. odnośnik do filmu youtube) nie będą działać prawidłowo. Słowo 'preferowany/a' oznacza tutaj, że w w/w przypadkach prawdopodobieństwo wystąpienia jakiegokolwiek błędu jest najmniejsze. Nie wyklucza to jednak korzystania z innych przeglądarek bądź systemów operacyjnych.

O stronie

Chciałbym sekcję 'O stronie' podzielić na kilka elementów segregując je od najistotniejszych, do mniej, lecz wciąż istotnych. Zacznijmy od użytych programów. Wszystkie programy których używałem są darmowe i ogólnodostępne. Wszelkie grafiki widoczne na stronie są mojego autorstwa. Strona została zrobiona przeze mnie od podstaw (wykluczając darmową i ogólodostępną bibliotekę WebGL. Stworzenie własnej, przy i tak już dość napiętym czasie, mijało się z celem). Źródła są na bieżąco podawane pod każdą częścią kursu.



Użyte programy/biblioteki:
- Visual Studio Code (licencja) - tworzenie strony w języku HTML, JS i PHP
- Gimp (licencja) - tworzenie grafik/ikonek
- HitFilm Express (licencja) - montaż filmów i animacji gif
- Unity -> WebGL (licencja) - silnik graficzny, który pozwolił mi stworzyć program do wizualizacji
- Blender (licencja) - program w którym tworzyłem modele 3D użyte w w/w programie.
- Audacity (licencja) - stworzenie dźwięków potrzebnych do poradnika na temat programu do wizualizacji (intro)
- NVidia Shadow Play (licencja) - program, który umożliwił mi nagranie poradnika
- Xampp (licencja) - serwer Apache

Tworząc tę stronę moim głównym celem było napisanie jej od podstaw na czystym CSS'ie oraz JS (zero bootstrapa, JQuery i im podobnych). W skrócie - wszystko co było możliwe do napisania w danym mi czasie robiłem sam, od początku do końca. Chciałbym teraz przedstawić Państwu rozwiązania do jakich doszedłem pisząc tę stronę.

Artykuły (index.php/read.php)

Długo zastanawiałem się jak napisać system pozwalający mi w miarę wygodnie dodawać nową zawartość. Pisanie każdego artykułu w osobnym pliku php nie byłoby najwygodniejsze. Napisałem więc prosty algorytm, który dla każdego pliku tekstowego w folderze content/text generował artykuł. Plik tekstowy zawiera takie informacje jak:
- ID
- Odnośnik do miniaturki
- Tytuł
- Opis
- Zawartość
Dzięki temu nie musiałem dla każdego artykułu tworzyć nowego pliku php. Wystarczyło stworzyć nowy plik tekstowy. W read.php pobieram ID artykułu znajdujące się w linku strony (?id=x), a następnie szukam pliku tekstowego z odpowiednim ID, wyświetlając jego zawartość. Plik tekstowy traktowany jest jako HTML, więc bez problemu mogę tam dodawać grafiki czy znaczniki takie jak kolor, znaki (2, 2, °, ×, γ) i inne. Ponadto, zaczynając czytać książkę o trygonometrii sferycznej (bo aby uczyć trzeba rozumieć) zdałem sobie sprawę, że tworzenie rysunków 3D w gimpie zajmie mi bardzo dużo czasu. Oprócz tego nie oddawałyby dobrze perspektywy, co było niezmiernie ważne w odbiorze (sam czytając książkę o trygonometrii sferycznej, miałem problemy ze zrozumieniem rysunków przez niepoprawną perspektywę). Postanowiłem więc napisać program w Unity3D, pozwalający na generowanie owych wizualizacji (o czym więcej później).

O narzędziach

Pierwszym narzędziem, o którym pomyślałem decydując się na temat trygonometrii było rysowanie funkcji trygonometrycznych. Zdecydowałem, że najlepszym sposobem będzie wykorzystanie JS, a konkretniej mówięc canvas'a. Podstawa programu została napisana w jedną noc. Oczywiście nie obyło się bez pewnych trudności oraz błędów, które znacznie wydłużyły pracę. Po stworzeniu programu rysującego funkcje trygonometryczne, tak polubiłem używanie canvasa, iż postanowiłem stworzyć w nim jeszcze jeden program - obliczanie i wizualizację trójkąta prostokątnego. Spotkało się to z pewnymi problemami - obliczanie pozycji tekstu na podstawie 2 boków zajęło mi trochę czasu. Później jednak program działał lepiej niż oczekiwałem. Teraz chciałbym przytoczyć ciekawostkę - w planach miałem napisać grę opartą na canvasie (prototyp z systemem kolizji, poruszaniem i strzelaniem znajduje się na game.php (WSAD - poruszanie i skok, SHIFT - strzelanie)), jednak po pewnym czasie zdałem sobie sprawę z tego, iż mało w tej grze było trygonometrii - projekt został przerwany. Wracając do głównego tematu, chciałbym opisać jedyne narzędzie 3D. Zostało one stworzone, aby móc zwizualizować figury opisane w kuli,trójkąty sferyczne, odcinki, kąty i inne. Ponadto w każdym z artykułów znajdują się kody, dzięki którym bryły z rysunków można zobaczyć bezpośrednio w programie. Oprócz tego chciałem, aby inni mogli używać tego programu dla własnych potrzeb. Napisałem więc system zapisywania projektu do pliku tekstowego (zasady zakazywały używania baz danych, więc był to jedyny pomysł, który przyszedł mi do głowy). Dzięki temu np. nauczyciele mogą pokazywać swoim uczniom figury podczas lekcji. Wystarczy, że wcześniej przygotują daną rzecz w programie, zapiszą, a następnie tekst wkleją do programu podczas lekcji. Ostatnim już opisywanym narzędziem będzie program obliczający kąty i boki trójkąta sferycznego po podaniu 3 danych. Długo zastanawiałem się jak zrobić taki program i czy w ogóle jestem w stanie go napisać. Pomysł zrodził się, gdy przeglądałem wykłady dr hab. Leszka Smolarka. Wspomniał on tam o człowieku, który taki kalkulator stworzył. Przeszukałem internet w poszukiwaniu jakichkolwiek notatek, czy też informacji które pomogłyby mi zamienić pomysł w narzędzie, lecz nic nie znalazłem. Jedyny fakt który znałem był taki, że jest to możliwe (znalazłem w internecie kilka takich kalkulatorów). Postanowiłem rozłożyć problem na czynniki pierwsze. Pierwszy pomysł na jaki wpadłem to obliczanie przypadków. Ucieszyłem się, gdy obliczenia wskazały, że takich przypadków może być 20. Zdecydowałem, że pójdę w tym kierunku. Wszystkie przypadki rozpisywałem na papierze i zauważyłem, że całość ogranicza się do wzorów na sinus boku i cosinus boku, więc stworzyłem funkcje, które obliczały bok/kąt po podaniu reszty potrzebnych danych. Dążyłem do tego, aby każdy przypadek sprowadzić do znajomości 3 boków bądź 3 kątów. Przez to każdy przypadek rozwiązywało się schematycznie do czasu, gdy zauważyłem pewne nieprawidłowości podczas porównywania obliczeń na papierze wraz z tymi cyfrowymi. Postanowiłem ponownie zagłębić się w książkę o trygonometrii sferycznej N. Stiepanowa i spostrzegłem fakt, który mi wcześniej umknął. Mianowicie, dla wzorów na sinus boku/kąta trzeba rozpatrywać dwa przypadki. To całkowicie zrujnowało moją strukturę kodu, która przewidywała wyłącznie jeden przypadek. Po 2 dniach udało mi się przerobić cały algorytm tak, aby wspierał dwa przypadki obliczając sinus boku. Świadomość faktu, że to samo musiałbym zrobić dla wzorów na sinus kąta wzmożyła we mnie myślenie (nie chciałem marnować kolejnych 2 dni). Postanowiłem przerabiać każdy trójkąt wymagający użycia wzoru na sinus kąta, na jego trójkąt biegunowy, który używał już obliczonego wzoru na sinus boku. W ten sposób obliczenia były takie same, a jedynym wymogiem było odwrócenie otrzymanych wartości do trójkąta podstawowego. Gdy kalkulator działał, poczułem że to mi nie wystarcza. Postanowiłem, że program będzie odpowiadał na dany przypadek różnymi informacjami. M.in. jak przebiegały obliczenia danego trójkąta, czy taki trójkąt może istnieć, a jeśli nie to dlaczego itp. Większość odpowiedzi zawiera odnośniki do omawianych tematów, przez co program żyje w symbiozie ze stroną (zawartość strony jest uzupełniana przez program, a program odsyła do tematów na stronie).

Inne

Praca została przygotowana na potrzeby XII edycji konkursu Zobaczyć Matematykę. Trygonometria była tematem przewodnim. Zdecydowałem się rozszerzyć temat o trygonometrię sferyczną (wraz z geometrią sferyczną), bowiem brakuje w internecie jednego, solidnego źródła wiedzy o tym dziale. Wszystko oparte jest na przykładach, wyprowadzaniu wzorów i wizualizacjach tak, aby temat było można przyswoić jak najłatwiej. Pracę wykonywałem w wolnym czasie w domu.

Następny artykuł
Poprzedni artykuł