Kreatywne kodowanie 2.0 w JS: animacja, dźwięk i kolor

Kreatywne kodowanie 2.0 w JS: animacja, dźwięk i kolor

“Gratulacje! Dotarłeś do końca tego kursu Domestika. Dziękuję za udział i mam nadzieję, że się podobało. Pracowaliśmy razem nad kilkoma kompozycjami, ale najważniejszą częścią były techniki, których się nauczyłeś. Możesz je teraz przenieść, ponownie zastosować w innym miejscu i stworzyć coś innego! Mimo, że omówiliśmy dużo, zawsze jest o czym rozmawiać, więc przygotowałem małą listę porad dotyczących tego ostatniego modułu. Biblioteki Użyłem kilku z nich przez cały kurs, ale są tysiące innych. Niektórzy lubią robić wszystko sami, ale czasami to jak próba wymyślenia koła na nowo. Zawsze, gdy potrzebujesz czegoś konkretnego, polecam najpierw przejrzeć NPM. Ktoś inny mógł już pracować nad tym problemem! Na przykład, jeśli chcesz załadować dane z pliku CSV, istnieją do tego biblioteki. Jeśli potrzebujesz wykonywać operacje na wektorach, konwertować między różnymi przestrzeniami kolorów lub wczytywać pliki czcionek, są do tego biblioteki. Tworzenie strony internetowej Szkic może żyć sam. Możesz wyeksportować swoją kompozycję i wydrukować ją lub gdzieś opublikować. Ale jeśli chcesz udostępnić swoje szkice online, możesz to również zrobić za pomocą polecenia „--buduj”. Generuje statyczne pliki JavaScript i HTML, które mogą być hostowane jako zwykłe strony internetowe w dowolnym miejscu. Jeśli potrzebujesz zintegrować swój szkic z istniejącą witryną, pamiętaj, że zawsze używamy natywnego interfejsu Canvas API, dzięki czemu możesz skopiować odpowiednie części kodu do innego projektu i uruchomić go bez szkicowania na płótnie. p5.js Wiele osób zajmuje się kreatywnym kodowaniem za pomocą Processing lub p5.js, a to ma sens, są świetnymi narzędziami. Jestem przyzwyczajony do pracy z natywnym API, ale jeśli znasz już p5.js, możesz go używać razem z canvas-sketch. W powyższym filmie znajduje się podstawowy przykład, który pokazuje, jak to zrobić. Dokumentacja To jest oczywiste. Koniecznie sprawdź dokumentację. Dotyczy to nie tylko szkicu kanwy lub kanwy, ale dowolnego interfejsu API, z którym pracujesz. Ktoś poświęcił czas na zorganizowanie i udokumentowanie swojego kodu, abyśmy mogli z niego skorzystać. Jest po to, żeby nam pomóc. Następnie chciałbym zrobić podsumowanie tego, co widzieliśmy do tej pory. Na tym kursie pracowałem nad pięcioma małymi projektami. Pierwszy z nich zaczynał się od prostego prostokąta, ale w końcu zawierał pewną wiedzę na temat trygonometrii, losowości, palet kolorów, trybów mieszania i masek przycinających.

Drugi projekt polegał na stworzeniu kilku wizualizacji przy użyciu segmentów krzywych rozłożonych jako siatka, używając kolorów w inny sposób niż w pierwszej części. Następnie użyłem danych o częstotliwości dźwięku, aby sterować niektórymi wizualizacjami i spróbować odtworzyć kilka klasycznych projektów plakatów za pomocą kodu. Ostatni szkic dotyczy cząsteczek! Nauczyłeś się, jak przykładać do nich siły, używając podstawowych pojęć z fizyki, takich jak prędkość i przyspieszenie. Teraz chciałbym, abyś udostępnił swoje szkice na forum, klikając przycisk „Utwórz swój projekt” powyżej. Byłoby wspaniale, gdybyś mógł również wyjaśnić wybory, których dokonałeś po drodze i powiedzieć nam, jeśli masz jakiekolwiek wątpliwości. W ten sposób wszyscy będziemy się od siebie uczyć. Będę tam odpowiadać na pytania i udzielać wskazówek. Jestem ciekawa, co stworzysz z tego, czego nauczyłeś się na kursie. Do zobaczenia tam! ”

Częściowa transkrypcja wideo

“Ostateczny projekt Witam wszystkich, mam nadzieję, że podróż podobała się Wam. Pracowaliśmy razem nad kilkoma kompozycjami ale główną część stanowiły techniki, których się nauczyliśmy jak teraz możesz je przenieść, zastosuj je w innym miejscu i stwórz coś innego. Dużo omówiliśmy, ale zawsze jest więcej do omówienia. Przygotowałem listę wskazówek do tego końcowego filmu. Biblioteki, przez cały kurs korzystaliśmy z kilku ale są tysiące innych. Niektórzy ludzie robią wszystko sami ale czasami to jak próba wymyślenia koła na nowo. Zawsze, gdy potrzebujesz czegoś konkretnego, polecam najpierw sp...”

Transkrypcje są generowane automatycznie, stąd mogą pojawić się błędy.

Podsumowanie kursu: Kreatywne kodowanie 2.0 w JS: animacja, dźwięk i kolor

• Poziom: Podstawowy
• 99% pozytywnych ocen (184)
• Liczba uczestników: 21060
• Liczba części dydaktycznych: 6
• 28 lekcji (2 h 47 min)

• Kategoria

  3D & Animacja, Web & App Design

• Dziedziny

  Motion graphics, JavaScript, Multimedia, Programowanie