Luke J. Li

W poprzedniej części omówiliśmy, jak narysować poruszający się prostokąt. Okej, a co jeśli mielibyśmy więcej takich prostokątów? Jak zwykle w pytaniu programistycznym "co jeśli chcę więcej rzeczy mieć i robić coś z nimi?" odpowiedzią jest tablica + pętle. Każdy prostokąt może być reprezentowany przez jakiś obiekt. Np. może mieć współrzędną x oraz y, czy inne parametry (np. prędkość, kolor). To od nas zależy. Rysując będziemy pobierali te parametry oraz uaktualniali pozycję wg prędkości, następnie będziemy to rysować. Zacznijmy od zdefiniowania tablicy z obiektami: const objects = [ { x : 100 , y : 100 , vx : 1 , vy : 0 , color : 'purple' } , { x : 100 , y : 50 , vx : 0 , vy : 0.5 , color : 'red' } , ] ; Mamy tu 2 obiekty. Pierwszy jest fioletowy ma współrzędne (100, 100) i prędkość (1, 0), czyli jedzie w prawo. Drugi jest czerwony i ma współrzędne (100, 50) i prędkość (0, 0.5), czyli jedzie w dół. Wyświet

Canvas (ang. płótno) to takie coś, po czym możesz rysować, wyświetlać różne figury, obrazki itp. Stwórzmy element Canvas i dodajmy go do dokumentu: const canvas = document.createElement('canvas'); canvas.style.border = '1px solid red'; // możesz usunąć tę linijkę canvas.width = 500; canvas.height = 500; document.body.append(canvas); No dobra, ale co z tym dalej robić? Mamy obiekt Canvas, jaką jego metodę mamy wywołać, żeby coś narysować? Żadną XD Obiekt canvas reprezentuje samo płótno (element DOM), ale nie ma w nim metod do rysowania. Żeby coś narysować, trzeba pobrać specjalny obiekt kontekstu i to dopiero kontekst będzie rysował: const ctx = canvas.getContext('2d'); ctx.fillStyle = 'purple'; ctx.fillRect(100, 100, 40, 40); Oto narysowaliśmy na pozycji 100x100 fioletowy prostokąt o wymiarach 40x40. Oczywiście na canvas można rysować wiele różnych bardziej złożonych kształtów, prostokąt to nie szczyt możliwości, odsyłam do dokumentac

Wbrew pozorom ekosystem JavaScriptu wyjątkowo powoli się rozwija. Pamiętacie, jak tworzyłem "alternatywę dla Reduxa"? W zasadzie kilka takich projektów miałem, a to chciałem zrobić alternatywę dla Reduxa, a to dodatek do Reduxa. A to całkowicie niezależną bibliotekę do reaktywności, nawet edytor wizualny zrobiłem, gdzie dało się połączyć boksy strzałkami, żeby zaznaczyć flow danych (tzw. node editor - trochę jak edytor shaderów w Blender czy edytor blueprintów w Unreal Engine). Na potrzeby tego wizualnego edytora zrobiłem bibliotekę do reaktywnych grafów. Inspirowałem się też takimi bibliotekami jak Mobx czy Rx.js. I cóż, robiłem to gdzieś między 2017 a 2019. Od tego czasu trochę się znudziłem tematem, plus uznałem, że w zasadzie problem "zarządzania stanem" jest już rozwiązany w środowisku JSowców lepiej lub gorzej i że może zbyt się zafiksowałem w ambicjach i rozwiązania małego problemu, a zatraciłem szerszy kontekst tworzenia oprogramowania. Słuchajcie, bo te c