Kodowanie kreatywne: twórz dzieła sztuki wizualnej za pomocą JavaScript

Wprowadzenie do kodowania dla projektantów wizualnych

“Witam i zapraszam na koniec tego kursu Domestika. W tej ostatniej lekcji zrobimy podsumowanie tego, co widzieliśmy do tej pory i dodam kilka wskazówek, które pomogą Ci w Twojej podróży do kreatywnego kodowania. Kod to język. Używając metafory w języku mówionym, kiedy chcemy coś wyrazić, nie chodzi o to, ile słów używamy, ale o to, jak zdecydujemy się połączyć słowa, które znamy. Przeszliśmy długą drogę. Zaczęliśmy od pustego pliku, od podstawowych pojęć, takich jak zmienne i funkcje. Wspomniałem, że będziemy ich używać wszędzie i tak zrobiliśmy. Najlepszym sposobem uczenia się jest zawsze przykład i widzieliśmy sporo. Widzieliśmy również tablice, pętle, warunki warunkowe i liczby losowe. Zobaczyliśmy, jak wiele możemy zrobić z tymi kilkoma koncepcjami. Środowisko, które wybraliśmy do uruchomienia naszego kodu, to przeglądarka, która jest bardzo dostępna i znajoma. Teraz wiemy, że możemy go również wykorzystać do tworzenia wizualizacji. Zobaczyliśmy, jak stworzyć stronę HTML i napisać w niej JavaScript. Potem zobaczyliśmy bardziej skomplikowaną konfigurację wykorzystującą szkic na płótnie. Dało nam to środowisko z pewnymi zaletami w porównaniu z zaczynaniem od zera, takimi jak ułatwienie zmiany wymiarów naszego szkicu, a także automatyczne przeładowanie go, gdy tylko kod zostanie zapisany. Szkicowanie na płótnie to coś więcej niż to, co widzieliśmy w kursie, więc polecam zajrzeć do dokumentacji na Github. Jest kilka informacji na temat przygotowania szkicu do druku w dużych formatach, jak eksportować GIF, a także jak przygotować grafikę do ploterów pisakowych. Pierwszym wspólnym szkicem była prosta siatka. Mieliśmy 5 rzędów i 5 kolumn. Jeśli próbowałeś zmienić tę liczbę, dobra robota za eksperymentowanie. Mogłeś zdać sobie sprawę, że siatka nie będzie już wyśrodkowana, ponieważ używaliśmy wartości zakodowanych na stałe. Później zobaczyliśmy bardziej elastyczny sposób robienia rzeczy. Więc wróć do szkicu 01 i ulepsz go tym, co teraz wiesz, to dobre ćwiczenie.

W naszym drugim szkicu użyliśmy trochę trygonometrii. Szkoda, że mój nauczyciel matematyki pokazał mi, jak robić kreatywne rzeczy z trygonometrią, kiedy byłem w szkole. To kolejna interesująca rzecz w kreatywnym kodowaniu, prosta matematyka ma długą drogę. Może się okazać, że niektóre koncepcje matematyczne w końcu się klikną, na pewno mi się to przydarzyło. W naszym trzecim szkicu zobaczyliśmy więcej matematyki z Pitagorasem, a także nauczyliśmy się, jak ją animować. Przeglądarka zawsze odmalowuje płótno, więc wszystko, co musimy zrobić, to zmieniać wartości w czasie. Ponownie polecam zajrzeć do dokumentacji szkicu kanwy i zobaczyć, jak można stworzyć animowaną pętlę, upewniając się, że wartości się zmieniają i ostatecznie wracają do pierwotnego punktu. W naszym czwartym szkicu pokazałem, jak znormalizować wartość, czyli zmienić jej pierwotny zakres na liczbę z zakresu od 0 do 1. Jest to bardzo przydatne i widoczne we wszystkich obszarach programowania. Jeśli pewnego dnia będziesz musiał przekonwertować kolor na kąt lub decybeli próbki audio na wysokość terenu, wiesz, że możesz to zrobić, jeśli znormalizujesz wartości. W końcowym szkicu chciałem pokazać, jak twórczo używać typografii, ale chyba najciekawszą rzeczą, jakiej się tam nauczyliśmy, było odczytywanie wartości kolorów z pikseli na naszym płótnie. Użyliśmy dużej litery, ale nic nie powstrzymało nas przed użyciem innego obrazu. Emotikona, ikona, logo, to wszystko piksele i efekt będzie działał równie dobrze. Naprawdę chciałbym zobaczyć twoje wizualizacje. Nie bój się eksperymentować ze wszystkim. Dałem ci kilka wskazówek, ale tak naprawdę chodzi o odkrywanie. Jeśli ustawimy wartość na 5, wypróbuj 500. Spróbuj obracać rzeczy na boki, spróbuj skalować rzeczy w górę lub w dół, spróbuj okręgów zamiast kwadratów lub okręgów na kwadratach. A co ważniejsze, spróbuj mieszać różne rzeczy, użyj czegoś ze szkicu 02 na szkicu 05 lub odwrotnie. Udostępnij swoje szkice na forum, klikając przycisk „Utwórz swój projekt” powyżej. W ten sposób wszyscy będziemy się od siebie uczyć. Będę tam odpowiadać na pytania i udzielać wskazówek. Wspaniale było podzielić się z Wami moimi spostrzeżeniami i pasją. Dziękuję i do widzenia. ”

Częściowa transkrypcja wideo

“Projekt końcowy W tej ostatniej lekcji zrobimy podsumowanie tego, co widzieliśmy do tej pory a dodam kilka wskazówek, które pomogą Ci w kreatywnym kodowaniu. Kod to język. Używając metafory językowej, nie chodzi o to, ile słów używamy, ale jak łączymy słowa, które znamy. Przeszliśmy długą drogę. Zaczęliśmy od pustego pliku, z podstawowych pojęć, takich jak zmienne i funkcje. Wspomniałem, że będziemy używać wszędzie, i tak zrobiliśmy. Najlepszym sposobem uczenia się jest przykład i widzieliśmy sporo. Widzieliśmy również tablice, pętle, warunki warunkowe i liczby losowe, i zobaczyliśmy wszyst...”

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

Podsumowanie kursu: Kodowanie kreatywne: twórz dzieła sztuki wizualnej za pomocą JavaScript

• Poziom: Podstawowy
• 97% pozytywnych ocen (1177)
• Liczba uczestników: 55890
• Liczba części dydaktycznych: 6
• 21 lekcji (2 h 42 min)
• liczba dodatkowych zasobów: 5

• Kategoria

  3D & Animacja, Web & App Design

• Dziedziny

  Motion graphics, JavaScript, Multimedia, Programowanie