Kodowanie kreatywne: twórz dzieła sztuki wizualnej za pomocą JavaScript
A course by Bruno ImbriziKreatywny programista
A course by Bruno Imbrizi, Kreatywny programista
Naucz się podstaw programowania i dowiedz się, jak tworzyć, rysować i animować obrazy i tekst za pomocą kodu
Eksperymentowanie z kodowaniem kreatywnym nigdy nie jest nudne, zawsze jest coś do odkrycia, nowe techniki do nauczenia lub nowe obrazy do stworzenia. Bruno Imbrizi połączył w dziedzinie kreatywnego kodowania swoją pasję do animacji i wizualizacji z programowaniem. Pracował dla małych studiów projektowych i znanych marek, takich jak Dell, Adidas czy Universal Music.
W tym kursie Bruno podzieli się swoją wiedzą ekspercką, aby pomóc Ci w tworzeniu ciekawych wizualizacji z wykorzystaniem kodowania. Poznaj zasady programowania i naucz się rysownia za pomocą kodowania kreatywnego w programie JavaScript.
Chcesz poszerzyć swoją wiedzę o kodowaniu? Sprawdź drugi kurs Bruno, Kodowanie kreatywne: twórz dzieła sztuki wizualnej za pomocą JavaScript, aby odkryć bardziej zaawansowane techniki tworzenia zakodowanych kompozycji z kolorem, ruchem i dźwiękiem.
Czego nauczysz się na tym kursie online?
llekcji: 21 & liczba dodatkowych zasobów: 39
Środowisko do szkicowania
12 min, 39 sek.
Siatka
7 min, 51 sek.
Hałas
6 min, 40 sek.
GUI
11 min, 12 sek.
Tekst
9 min, 26 sek.
Mapa bitowa
10 min, 34 sek.
Co obejmuje ten kurs?
Rozpoczniesz kurs od poznania prowadzącego: jest nim kreatywny koder Bruno Imbrizi. Opowie o początkach swojej kariery w dziedzinie projektowania graficznego oraz o tym, jak udało mu się połączyć pracę z pasją kodowania. Następnie przedstawi ulubione platformy i wyjaśni powody, dlaczego lubi z nich korzystać. Opowie również o osobach, które miały wpływ na jego prace.
W tym kursie poznasz podstawy kodowania. Bruno pomoże Ci w dobraniu odpowiednich ustawień Twoich narzędzi zanim przejdzie do omówienia pojęć związanych z kodowaniem, takich jak zmienne, funkcje, tablice i pętle. Następnie pokaże, jak zoptymalizować ustawienia zanim przejdziesz do szkicowania.
Stworzysz nowy cyfrowy szkic wykorzystując przekształcenia canvas. Następnie nauczysz się, jak wykorzystać trygonometrię, aby rozmieścić kształty wokół koła. Dowiesz się, jak skalować szkice i zobaczysz, jak wykorzystywać funkcje, aby ułatwić sobie pracę nad kolejnymi projektami. Ukończysz szkic rysując łuki i bawiąc się różnymi wartościami parametrów.
Zaprojektujesz animowany szkic z ruchomymi agentami w obszarze kanwy. Nauczysz się, jak narysować pomiędzy nimi linie w oparciu o ich odległość. Jak eksportować swoją animację jako plik wideo, który możesz udostępnić online.
Dowiesz się, jak dostosować siatkę, aby była bardziej elastyczna i wydajna. Następnie użyjesz generatorów szumu do jej wzmocnienia. Stworzysz mały panel kontrolny, który umożliwi aktualizację szkiców w czasie rzeczywistym.
Na koniec nauczysz się pracy z tekstem w swoich kompozycjach. Bruno pokaże Ci, jak narysować, zmierzyć i ustawić parametry czcionek zanim przejdzie do wyjaśnienia, jak zaktualizować literę wykorzystując tylko jeden klawisz klawiatury. Na zakończenie kursu dowiesz się, jak odczytać wartości koloru i dopracujesz ostatnie detale końcowego szkicu.
What is this course's project?
Zaprojektowanie kreatywnych kompozycji wizualnych, które mogą być zastosowane w przeglądarce za pomocą kodu.
Projekty uczestników kursu
Who is this online course for?
Dla każdej osoby zainteresowanej programowaniem i nauką tworzenia wizualizacji za pomocą kodu.
Requirements and materials
Zalecane są podstawowe umiejętności matematyczne.
Zalecane są podstawowe umiejętności matematyczne. Będziesz potrzebował komputera z Node.js, a także dostępu do przeglądarki internetowej i edytora tekstu.
System operacyjny:
⦁Linux ⦁SmartOS ⦁macOS 10.7 lub nowszy ⦁Windows 2008 lub nowszy
Wymagania systemowe:
⦁4 GB pamięci RAM ⦁10 GB wolnego miejsca
Oceny
- 16 dni temu
Great course, I wish I’d had a stronger foundation in coding before taking it.
- miesiąc temu
Excellent introductory course
- 2 miesiące temu
Great course!!!
- 2 miesiące temu
I loved this! I learned a lot and I sincerely recommend this course.
- 4 miesiące temu
Ótimo curso. O professor entende do assunto em profundidade e sabe transmitir muito bem o conteúdo. É uma excelente oportunidade como porta de entrada para a programação criativa.
Z ponad 10-letnim doświadczeniem pracował w agencjach, studiach projektowych, firmach produkcyjnych i znanych markach, takich jak Dell, Adidas i Universal Music. Był opisywany w publikacjach internetowych, takich jak WIRED i Londonist i zdobył wiele nagród, w tym Adobe Cutting Edge Award i FITC Best Digital Installation.
Zawartość
- Cz.1
Wstęp
- O mnie
- Wpływy
- Cz.2
Podstawy
- Ustawiać
- Zmienne i funkcje
- Tablice i pętle
- Środowisko do szkicowania
- Cz.3
Transformacja szkicu
- Przekształcać
- Kąty
- Funkcje użytkowe
- Łuki
- Cz.4
Agenci szkicu
- Przedmioty i klasy
- Animacja
- Linie
- Wyjście wideo
- Cz.5
Szum szkicu
- Siatka
- Hałas
- GUI
- Cz.6
Typ szkicu
- Tekst
- Asynchroniczny
- Mapa bitowa
- Glify
- PK
Projekt końcowy
- Wprowadzenie do kodowania dla projektantów wizualnych
Kurs Domestika - czego możesz się spodziewać?
Nauka we własnym tempie
Radość z nauki w domu, bez wyznaczonych terminów. Szybko przyswajasz wiedzę, a swój plan zajęć układasz wedle uznania.
Nauka z najlepszymi ekspertami
Przydatne metody oraz ciekawe techniki przedstawione i wyjaśnione przez najlepszych specjalistów z branży kreatywnej.
Doświadczeni prowadzący
Wszyscy prowadzący są specjalistami w swojej dziedzinie. Przekazują wiedzę z pasją, tłumaczą zagadnienia w jasny sposób, a podczas zajęć kładą nacisk na praktyczne zastosowanie zdobytej wiedzy.
Certificates
PLUSIf you're a Plus member, get a spersonalizowany certyfikat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Miejsca w pierwszym rzędzie
Wysoka jakość wideo sprawia, że nie umknie Ci żaden szczegół. Dzięki nieograniczonemu dostępowi możesz obejrzeć nagrania tyle razy, ile potrzebujesz, aby przyswoić nowe umiejętności.
Dzielenie się wiedzą i pomysłami
Zadawaj pytania, nie wahaj się poprosić o opinię czy poszukać rozwiązania. Podziel się swoimi wrażeniami z nauki z pozostałymi członkami społeczności, którzy tak jak Ty uwielbiają tworzyć.
Łączność z kreatywną społecznością z całego świata
Społeczność kilku milionów użytkowników z całego świata, pełnych ciekawości oraz chęci odkrywania i wyrażania swojej kreatywności.
Profesjonalna realizacja kursów
Domestika starannie dobiera prowadzących i produkuje wszystkie kursy we własnym zakresie, aby zapewnić wysoką jakość nauki online.
Często zadawane pytania
Creative coding is using programming for artistic or visual expression. This course teaches you how to use JavaScript, HTML, and Canvas to create interactive visuals and generative art through hands-on coding experiments.
This course is designed for intermediate users. Basic familiarity with JavaScript and web development is recommended, but key concepts and tools are explained step by step for those with some coding background.
You'll need a code editor like Sublime Text or Visual Studio Code, Node.js, npm, and a modern web browser. The course also covers installing and setting up all required tools for creative coding projects.
You'll learn to create generative art, interactive visuals, and prototypes using JavaScript, Canvas, and web technologies. Topics include drawing shapes, transformations, animation, exporting graphics, and using libraries like Canvas Sketch.
The course teaches you to use JavaScript Canvas API methods such as fillRect, arc, and fillStyle to draw and style rectangles, circles, and other shapes directly in the browser.
Yes, you'll learn to export your generative sketches as PNG images or video files using Canvas Sketch CLI, along with workflow tips for high-quality exports.
You'll be guided through installing Canvas Sketch, initializing projects, managing dynamic canvas dimensions, and running sketches in your browser or terminal.