Programowanie (HTML5 canvas 2d)

HTML5 Canvas '2d’ – (cz. 1)

1. Znacznik HTML5 <canvas>
   1. Co to jest HTML5 <canvas>?
   2. Przegląd elementu HTMLCanvasElement
   3. Umieszczanie <canvas> na stronie
   4. Znacznik HTML5 <script>
   5. Pozycja skryptu JavaScript względem <canvas> (1)
   6. Pozycja skryptu JavaScript względem <canvas> (2)
   7. Pobieranie znacznika <canvas> w kodzie
2. Ustawianie wymiarów <canvas>
3. Kontekst '2d’
   1. Pobieranie kontekstu '2d’
   2. interface CanvasRenderingContext2D – przegląd
4. Linie proste
   1. Rysowanie linii
   2. Szerokość linii
   3. Kolor linii
   4. Zakończenia linii
   5. Złączenia linii
5. Linia przerywana
6. Ścieżki
   1. Rysowanie na ścieżce domyślnej
   2. Otwieranie nowej ścieżki
   3. Zamykanie ścieżki
   4. Winding rule
7. Gotowe kształty
   1. Łuk koła i wycinek koła (1)
   2. Łuk koła i wycinek koła (2)
   3. Okrąg
      1. Okrąg
      2. Koło
      3. Okrąg i koło
   4. Elipsa
   5. Prostokąt
      1. Kontur
      2. Wypełnienie
      3. Kontur + wypełnienie (1)
      4. Kontur + wypełnienie (2)
      5. Czyszczenie canvas
      6. Zaokrąglanie rogów prostokąta
         1. Zaokrąglanie rogów prostokąta
         2. Zaokrąglanie rogów prostokąta – tworzenie funkcji
8. Transformacje
   1. Macierz przekształceń
   2. Zerowanie macierzy
   3. Translacja
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
   4. Skalowanie
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
      4. Zmniejszenie
      5. Zwiększenie
      6. Elipsa
      7. Lustro w poziomie
      8. Lustro w pionie
      9. Lustro w pionie i poziomie
   5. Odbicie względem prostej przechodzącej przez punkt (0,0)
   6. Obrót
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
      4. Obrót iterowany
   7. Przekrzywienie
      1. Sposób 1
      2. Sposób 2
   8. Składanie przekształceń
      1. Obrót wokół dowolnego punktu
      2. Obrót w miejscu
      3. Skalowanie w miejscu
      4. Przekrzywienie w miejscu
      5. Odbicie względem prostej nie przechodzącej przez punkt (0,0)
         1. Prosta równoległa do osi Y
         2. Inna prosta
9. Krzywe Béziera
   1. Krzywa Béziera kwadratowa
   2. Krzywa Béziera sześcienna
   3. Transformacja krzywych Béziera
10. Kolory CSS
    1. Model RGB
    2. Model RGBA
    3. Model HSL i HSLA
    4. Model HWB
    5. Palety kolorów HTML
       1. Paleta 16 kolorów nazwanych
       2. Paleta 216 kolorów (Web Safe Colors)
       3. Rozszerzona paleta kolorów nazwanych
       4. Paleta kolorów z polskimi nazwami
       5. Paleta nazwanych kolorów HSL
       6. Paleta kolorów HSL
11. Składanie (kompozycja) kolorów
    1. Kompozycja kolorów w przeglądarkach
    2. Kompozycja kolorów na canvas
    3. Kolor wynikowy przy składaniu kolorów
12. Obrazy
    1. Pobieranie obrazów z serwera
    2. Pobieranie obrazów ze strony
    3. Skalowanie obrazów
    4. Wymiarowanie obrazów
13. Operacje na pikselach obrazu
    1. Macierz obrazu
    2. Pobieranie danych obrazu
    3. Iteracja po danych obrazu
    4. Pobranie danych wskazanego piksela
    5. Iteracja po pikselach
    6. Filtrowanie obrazów
       1. Negatyw
       2. Skala szarości
       3. Sepia
       4. Szum
       5. Kontrast
       6. Ściemnienie
       7. Rozjaśnienie
14. Transformacje obrazów
15. Zapamiętywanie obrazów
    1. dataURL
       1. Zapisanie canvas jako dataURL
       2. dataURL na stronie jako źródło obrazka
       3. Uwagi do toDataURL
    2. BLOB
       1. Zapisanie canvas jako blob (png)
       2. Zapisanie canvas jako blob (jpg)
       3. Uwagi do toBlob()
16. Wypełnienia i cienie
    1. Desenie (tekstury)
       1. Deseń 'repeat’
       2. Deseń 'repeat-x’
       3. Deseń 'repeat-y’
       4. Deseń 'no-repeat’
    2. Gradienty
       1. Gradient liniowy
          1. Gradient liniowy poziomy
          2. Gradient liniowy pionowy
          3. Gradient liniowy ukośny
          4. Gradient liniowy wielokolorowy
       2. Gradient radialny (kołowy)
          1. gradient radialny (1)
          2. gradient radialny (2)
          3. gradient radialny (3)
          4. gradient radialny (4)
    3. Cienie
17. Przycinanie i maskowanie
18. Teksty
    1. Ustawienia czcionki
       1. Styl czcionki
       2. Wariant czcionki
       3. Grubość czcionki
       4. Wielkość czcionki
       5. Rodzina czcionek
    2. Kolor tekstu
    3. Kontur i wypełnienie tekstu
    4. Deseń tekstu
    5. Gradient tekstu
    6. Wyrównywanie tekstu
    7. Metryka tekstu
    8. Linia tekstu
    9. Zawijanie tekstu
    10. Transformacje tekstów
    11. Encje
19. Właściwości i funkcje rzadko używane lub eksperymentalne
    1. direction
    2. imageSmoothing
    3. isPointInPath
    4. isPointInStroke
20. Proste narzędzie do testowania kodu
21. O książce

HTML5 Canvas '2d’ (cz. 2)

Rysowanie krzywych parametrycznych

1. Asteroida (1)
2. Asteroida (2)
3. Rozeta czterolistna
4. Rozety Grandiego
5. Spirala Archimedesa
6. Kardioida
7. Krzywe Lissajous
8. Epicykloida
9. Hipocykloida
10. Elipsa

Rysowanie figur geometrycznych

1. Klasa Figure
2. Klasa Point
   1. Rysowanie punktu
   2. Odległość między punktami
   3. Klonowanie głębokie punktu
   4. Rysowanie wielu punktów
3. Klasa Segment
   1. Rysowanie odcinka
4. Klasa Triangle
   1. Rysowanie trójkąta
5. Klasa Rectangle
   1. Rysowanie prostokąta
6. Klasa IrregPolygon
   1. Rysowanie wielokąta nieregularnego
   2. Rysowanie wielokąta nieregularnego (2)
   3. Obliczanie punktu ciężkości wielokąta nieregularnego
7. Klasa RegPolygon
   1. Rysowanie wielokąta regularnego
8. Klasa StarPolygon
   1. Rysowanie wielokąta gwiaździstego
   2. Rysowanie pentagramu
9. Klasa Star
   1. Rysowanie gwiazdy
10. Klasa Oval
    1. Rysowanie figur wypełnionych
    2. Rysowanie konturów figur
    3. Rysowanie figur wypełnionych z konturem

Rysowanie wybranych kształtów

1. Arrow – strzałka
2. Jin-Jang
3. Szachownica
4. Spirala kwadratowa
5. Kwadraty wpisane w kwadrat
6. Spirala (logarytmiczna) Pascala
7. Złota spirala
8. Kwadraty i spirala Fibonacciego

Automaty komórkowe

1. Automat 1d nr 90
2. Automaty 1d – program
3. Gra 'Life’ Conwaya
   1. glider
   2. glider gun
4. Mrówka Langtona
   1. Mrówka 'zwykła’
   2. Mrówka 'z przeszkodami’
5. Ruch drogowy Nagela – Schreckenberga

Fraktale

Algorytmy standardowe

1. Zbiór Cantora
2. Krzywa Kocha
3. Smok Heighwaya
4. Supersmok
5. Trójkąt Sierpińskiego
6. Trójkąt Sierpińskiego metodą losową
7. Paproć Barnsleya
8. Fraktal Mandelbrota
9. Fraktal Julii
10. Fraktal 'Płonący statek’
11. Atraktor Lorenza

L-System (System Lindemeyera)

1. Zbiór Cantora
2. Krzywa Kocha
3. Płatek Kocha
4. Trójkąt Sierpińskiego
5. Gałązka
6. Krzywa Hilberta
7. Smok Levy’ego
8. Modyfikacja krzywej Kocha
9. Pentadendryt
10. Gałązka 2
11. Kółeczka

Chaos

1. Równanie Malthusa
2. Analogowe równanie logistyczne (1)
3. Analogowe równanie logistyczne (2)
4. Drzewo Feigenbauma
5. Fraktale Lapunowa (1)
6. Fraktale Lapunowa (2)
7. Fraktale Lapunowa (3)
8. Fraktale Lapunowa (4)

Kalendarze i zegary

1. Zegar analogowy
2. Zegar cyfrowy
3. Zegar binarny
4. Zegar odliczający czas od zdarzenia
5. Kalendarz miesięczny

Obsługa dźwięku

1. Link do pliku audio
2. Element <audio> w HTML5

Obsługa filmów

1. Element <video> w HTML5
2. Element <video> na HTML5 canvas
   1. Wyświetlenie wideo
   2. Dodanie kontrolek
   3. Pobieranie klatek (migawki)

Animacje

Animacje HTML

1. Animowany GIF
2. Funkcje JavaScript
   1. requestAnimationFrame()
   2. setTimeout()
      1. Sygnalizator drogowy
      2. Ruch obrazka w poziomie
      3. Animacja poklatkowa: 'Paląca się świeca’
   3. setInterval()

Animacje canvas

1. Oscylacja pozioma
2. Ruch chaotyczny: rój owadów
3. Ruch po okręgu: koniunkcje dolne Wenus (Gwiazda Izydy)
4. Ruch obrotowy: obracanie symbolu Jin-Jang
5. Sito Eratostenesa
6. Animacja poklatkowa

Współpraca z myszą

1. Canvas
   1. Położenie wskaźnika myszy (1)
   2. Położenie wskaźnika myszy (2)
   3. Położenie wskaźnika myszy (3)
2. Obrazy
   1. Położenie wskaźnika myszy w obrazie
   2. Zdarzenia myszy związane z obrazem
   3. Przeciąganie i upuszczanie obrazów
3. Kształty
   1. Położenie wskaźnika myszy w kształcie
   2. Zdarzenia myszy związane z kształtem
   3. Przeciąganie i upuszczanie kształtów

Współpraca z klawiaturą

1. Plansza aksonometryczna

HTML5 Canvas '2d’ (3)

Techniki specjalne

Filtry splotowe

1. Splot i jądro splotu
2. Iteracja po pikselach (do zrobienia)
3. Rozmycie (do zrobienia)
4. Wyostrzenie (do zrobienia)
5. Wykrywanie krawędzi (do zrobienia)
6. Płaskorzeźba (do zrobienia)
7. Rozmycie Gaussa (do zrobienia)
8. Szum Perlina (do zrobienia)

Obsługa kolizji

1. Obsługa kolizji
   1. addHitRegion(options)
   2. removeHitRegion(id)
   3. clearHitRegions()

Współpraca z Java SE

1. ImageSlicer – cięcie obrazków na potrzeby HTML

Współpraca z JavaFX

1. JavaFX i JSObject

Współpraca z Java EE

Serwer Tomcat

1. dataURL
   1. Przesłanie dataURL na serwer i z powrotem
   2. Przesłanie dataURL na serwer i zapamiętanie w pliku *.txt
2. JSON
   1. Przekształcenie obiektu JavaScript w łańcuch znaków JSON
   2. Przekazanie obiektu JSON na serwer i z powrotem
3. Kalendarze i zegary
   1. Kalendarz Majów

Aplikacje

1. I Cing
2. Tarot