Zielony Smok

HTML5 Canvas ‘2d’ (3)

Linki będa systematycznie uzupełniane

  1. Filtry splotowe 3 x 3
    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)
  2. Współpraca z serwerem 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. BLOB
      1. Przesłanie bloba na serwer i z powrotem w postaci pliku tekstowego
      2. Przesłanie bloba na serwer i z powrotem w postaci pliku binarnego
    3. JSON
      1. Przekazanie obiektu JSON na serwer i z powrotem
    4. Kalendarze i zegary
      1. Kalendarz Majów
  3. JavaFX i JSObject
  4. Aplikacje HTML5
    1. ICing
    2. Tarot
    3. Kalendarz Majów

HTML5 Canvas ‘2d’ (2)

  1. 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
  2. Tworzenie innych figur
    1. 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
  3. Biblioteka niektórych figur
    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
  4. 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
  5. Rysowanie fraktali
    1. 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. Fraktakl ‘płonący statek’
      11. >Atraktor Lorenza
    2. L-System
      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
    3. Istota chaosu
      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)
  6. Kalendarze i zegary
    1. Zegar analogowy
    2. Zegar cyfrowy
    3. Zegar binarny
    4. Zegar odliczający czas od zdarzenia
    5. Kalendarz miesięczny na canvas
  7. Obsługa dźwięku
    1. Link do pliku audio
    2. Element <audio> w HTML 5
  8. Obsługa filmów
    1. Element <video> w HTML5
    2. Wideo na canvas
      1. Wyświetlenie wideo
      2. Dodanie kontrolek
      3. Pobieranie klatek
  9. Animacje HTML
    1. Animowany gif
  10. Animacje CSS
    1. Przekształcenia
      1. Przesunięcie (1)
      2. Przesunięcie (2)
      3. Obrót (1)
      4. Obrót (2)
      5. Obrót (3)
      6. Skalowanie
      7. Zniekształcanie
      8. Przekształcenia razem
    2. Przejścia
      1. Przejście button:hover
      2. Przejście anchor:target
      3. Funkcja przejścia
    3. Animacje
      1. Przykład z książki ‘CSS. Nieoficjalny podręcznik’
  11. Animacje JavaScript
    1. Ruch obrazka w poziomie (setTimeout())
    2. Animacja w miejscu: ‘Paląca się świeca'(setTimeout())
  12. Animacje canvas
    1. requestAnimFrame()
      1. Oscylacja pozioma
    2. setTimeout()
      1. Sygnalizator drogowy
      2. Ruch chaotyczny: rój owadów
    3. setInterval()
      1. Ruch po okręgu: koniunkcje dolne Wenus (Gwiazda Izydy)
      2. Ruch obrotowy: obracanie symbolu Jin-Jang
      3. Sito Eratostenesa
  13. Współpraca z myszą
    1. Canvas
      1. Położenie wskaźnika myszy
      2. Położenie wskaźnika myszy (2)
      3. Położenie wskaźnika myszy (3)
    2. Obrazy
      1. Śledzenie położenia myszy w obrazie
      2. Inne zdarzenia myszy związane z obrazem
      3. Przeciąganie i upuszczanie obrazów
    3. Kształty
      1. Śledzenie położenia wskaźnika myszy w kształcie
      2. Inne zdarzenia myszy związane z kształtem
      3. Przeciąganie i upuszczanie kształtów
  14. JSON
    1. Przekształcenie obiektu JavaScript w łańcuch znaków JSON

HTML5 Canvas ‘2d’ (1)

Materiały zawarte na stronie zostały – w stosunku do pierwotnej
wersji w ebooku – uaktualnione.

  1. Znacznik <canvas>
    1. Czym jest 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. Kontekst ‘2d’
    1. Pobieranie kontekstu “2d” w kodzie
    2. interface CanvasRenderingContext2D – przegląd
  3. Wymiary canvas a wymiary powierzchni rysunkowej
  4. Linie proste
    1. Rysowanie linii prostej
    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
  7. Gotowe kształty
    1. Łuk koła + wycinek koła (1)
    2. Łuk koła + wycinek koła (2)
    3. Okrąg
      1. Okrąg
      2. Koło
      3. Okrąg + koło
    4. Elipsa
    5. Prostokąt
      1. Kontur
      2. Wypełnienie
      3. Kontur + wypełnienie
      4. Kontur + wypełnienie2
      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 poziomie i pionie
    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 bezpiecznych dla Internetu
      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. Operacje składania razem
    3. Kolor wynikowy przy składaniu
  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. Dane 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 pod kątem 45°
        4. Gradient liniowy wielokolorowy
      2. Gradient radialny (kołowy)
        1. Gradient kołowy (1)
        2. Gradient kołowy (2)
        3. Gradient kołowy (3)
        4. Gradient kołowy (4)
    3. Cienie
  17. Przycinanie i maskowanie
  18. Teksty
    1. Ustawienia czcionki
      1. Rodzina czcionek
      2. Wielkość czcinki
      3. Grubość czcionki
      4. Wariant czcionki
      5. Styl czcionki
    2. Kolor tekstu
    3. Kontur i wypełnienie tekstu
    4. Tekst i desenie
    5. Tekst i gradienty
    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. Uwagi końcowe
  21. Proste narzędzie do testowania kodu
  22. O książce