Jak zrobić animowany sześcian w Javascripcie?

Jak narysować w Javascript animowany sześcian z linii?

  • Klasyczny przykład bez magii za to ze zwykłą szkolną matematyką:

    kostka3D - tutaj, bo wklejanie kodu w formularzu jest co najmniej przekombinowane

    Tak się takie cuda robiło jak byłem młody i bawiłem się demkami na ATARI ;-) Aby w takiej sytuacji nią kręcić musisz:

    1. namalować ją (jest)
    2. Obliczyć nowe współrzędne 3D
    3. zmazać
    4. goto 1

    Oczywiście to ile trzeba liczyć i jak to wszystko skomplikować zależy o tego jak skomplikowany ma być ruch. W skrajnym przypadku prostego obrotu wokół jednej osi, wystarczy zdajesie obliczyć część współrzędnych dwóch wierzchołków, aby mieć dane do namalowania wszystkich ośmiu. Powyższy przykład traktować więc należy raczej jako pomysł na jeden z możliwych kierunków działania.

  • Tutaj masz to zrobione przy użyciu javascript + canvas.

    Do tego typu rzeczy świetnie nadaje się biblioteka raphaeljs

  • W Java Script to może trochę męczące, ale taki sam efekt można uzyskać w PHP, wykorzystując bibliotekę GD. Metodologia działania biblioteki GD, a nawet nazwy jej funkcji, są bardzo podobne. W kodzie napisanym w języku C zindetyfikujesz ją po wierszu.

     #include "gd.h";
    

    Zaś np. w kodzie napisanym w Perlu po wierszu.

     use GD;
    

    W PHP do rysowana lini służy funkcja imagrline(). Jej pierwszym argumentem jest indetyfikator rysunku, drugi i trzeci argument to współrzędne początku rysowania, czwarty i piąty to koniec rysowania, a szósty to kolor. Indetyfikator rysunku ma podobną postać.

     $rysunek = imagecreate(250, 250);
    

    Kolor definiuje się tak, jak przedstawiono poniżej.

     $czarny = imagecolorallocate($rysunek, 0, 0, 0);
    

    A zdjęcie wyświetlasz za pomocą funkcji imagepng().

     imagepng($rysunek);
    

    Cały kod rysujący kwadrat.

     header ("Content-type: image/png");
     $rysunek = imagecreate(250, 250);
     $bialy = imagecolorallocate($rysunek, 255, 255, 255);
     $czarny = imagecolorallocate($rysunek, 0, 0, 0);
     imagefill($rysunek, 0, 0, $bialy);
     imageline($rysunek, 0, 0, 0, 250, $czarny);
     imageline($rysunek, 250, 0, 255, 255, $czarny);
     imageline($rysunek, 0, 0, 255, 0, $czarny);
     imageline($rysunek, 0, 255, 255, 255, $czarny);
     imagepng($rysunek);
    

    Zapisz to jako rysunek.php, a w HTML zapisz <img src="rysunek.php"/>. Pokaźna biblioteka skryptów PHP wykorzystujących bibliotekę GD, znajduję się tutaj. Jest tam np. skrypt tworzący kod kreskowy na podstawie podanej liczby. W celu poznania bliżej funkcji graficznych, zobacz sobie indeks funkcji w manualu PHP.

Zaloguj się, aby dodać swoją odpowiedź