آموزش Graphics Programming II: Generative Art Animation
Programming Graphics II: Generative Art Animation
اولین کلاس اشتراک مهارت من یک پیش نیاز ضروری برای شرکت در این دوره است. من به دانش‌آموزان آموزش دادم که چگونه با استفاده از کتابخانه چارچوب HYPE و دستورات بسیار ساده، تعداد نامتناهی الگو ایجاد کنند. در این کلاس بعدی، ترکیب‌های ایستا (مانند آنهایی که در کلاس اولیه ایجاد شده‌اند) را می‌گیریم و با استفاده از مجموعه‌ای مشابه از تصادفی‌سازی مبتنی بر قانون، آنها را متحرک می‌کنیم. به عبارت دیگر، ما آثار هنری شما را زنده خواهیم کرد!
من به عنوان راهی برای کمک به ایجاد هنر مولد ثابت و متحرک از طریق پردازش توسعه دادم. بخش بزرگی از کار من، از جمله تمام رندرهای ویدیوی 30 ثانیه‌ای در تامبلر من، از تکنیک‌ها و اصولی استفاده می‌کند که در این کلاس اشتراک مهارت تدریس خواهم کرد. بنابراین اگر فکر می کنید این چیزها جالب است، منتظر چه چیزی هستید؟ ثبت نام کنید!
آنچه خواهید آموخت
از طریق فیلم های ضبط شده از صفحه نمایش، شما را در فرآیند ایجاد هنرهای متحرک مولد با استفاده از Hype Framework خود راهنمایی می کنم. ما پوشش خواهیم داد:
- چرخش و لنگر انداختن (HRotate and Anchoring). نحوه چرخاندن یک شی به دور موقعیت لنگر آن.
- نقاشی بوم (HCanvas). نحوه رنگ آمیزی بوم بر خلاف صحنه، و همچنین لایه بندی، پاکسازی و محو شدن عناصری که روی آن بوم نقاشی می شوند، بحث خواهیم کرد.
- حرکت با ماوس (HFollow). نحوه استفاده از ماوس به عنوان ورودی برای نمایش انیمیشن بر اساس حرکت ماوس.
- HTimer و HRandomTrigger. نحوه تنظیم اکشنی که بر اساس سرعت (هم به صورت ثابت و هم به صورت مبهم) انجام می شود.
- اشیاء متحرک (HTween و HCallback). نحوه انتقال یک شی از یک مکان به مکان دیگر، و سپس راه اندازی یک رویداد زمانی که یک شی به مقصد خود می رسد.
- رفتار ازدحام (HSwarm). نحوه استفاده از رفتار ازدحام برای متحرک سازی اشیاء روی صفحه هنگام تجمع آنها در اطراف یک نقطه روی صفحه، چه آن نقطه ثابت باشد و چه متحرک.
- نوسان موج (HOscillator). مورد علاقه من! نحوه استفاده از نوسان موج برای متحرک سازی اشیاء روی صفحه با استفاده از امواج سینوسی، مربعی، مثلثی و اره ای.
- لمس پایانی و خروجی. چگونه انیمیشن‌ها و کلاس‌ها را ترکیب کنیم و انیمیشن‌هایمان را به ویدیو خروجی دهیم.
آنچه خواهید ساخت
به‌عنوان پروژه‌ای برای این کلاس، فرم‌های هنری تولید شده از طریق کد را متحرک میکنید، چه فایل‌هایی که قبلاً دارید یا آنچه در من ایجاد شده است. خروجی نهایی شما رندرهای توالی تصویر (MOV/.MP4) خواهد بود که می‌توانیم آنها را در tumblr، flickr، youtube یا vimeo آپلود کنیم.
یک ویدیوی هنری مولد متحرک ایجاد کنید
مقدمه
- بیایید این مهمانی را شروع کنیم
مربا خود را پیدا کنید. حیوان روح خود را احضار کنید. این مهمانی را شروع کنید.
- پیش نیاز کلاس اول
این کلاس به اولین کلاس من به عنوان پیش نیاز نیاز دارد/زیرا نحوه استفاده از چارچوب HYPE برای پردازش با استفاده از تنظیمات Sublime Text 2 را توضیح می‌دهد.
- دوباره به hypeframework.org مراجعه کنید
بازدید کنید و برخی از انیمیشن ها را بررسی کنید.
- دانلود فایل فشرده HYPE (staging).
زیپ HYPE (staging) را دانلود کنید.
این شامل بسیاری از انیمیشن‌های نمونه است.
- از http://praystation.tumblr.com دیدن کنید
بازدید کنید. این پروژه شخصی من است که از بیشتر کلاس هایی که در این کلاس تدریس می شود استفاده می کند.
- این ویدیو را ببینید
/glitch 041/فانتوگرام/عاشق شوید.
شما هم می توانید این کار را انجام دهید!
HRotate و Anchor
- دانلود 02_HRotate.zip
02_HRotate.zip را دانلود کنید. این یک پیوست پیوند شده به واحد 2، ویدیو 1 است.
- تماشای واحد 2، ویدئو 1
ویدئوی واحد 2، ویدئو 1 را تماشا کنید، که از طریق فایل‌های "ex 1" تا "ex 3" اجرا می‌شود.
- تماشای واحد 2، ویدئو 2
ویدئو 2، واحد 2 را تماشا کنید که از طریق فایل‌های "ex 4" تا "ex 7" اجرا می‌شود.
- HRotate را تمرین کنید
استفاده از HRotate جدید (target, 1) و .anchorAt (H.center) یا .anchor(50,-50) را با برخی از فایل‌هایی که در کلاس اول انجام دادیم، تمرین کنید.
- تماشای واحد 2، ویدئو 3
ویدئو 3، واحد 2 را تماشا کنید که از طریق فایل‌های "ex 8" تا "ex 10" اجرا می‌شود.
- لانه سازی را تمرین کنید
تودرتو کردن یک دارایی در دیگری را تمرین کنید.
- پاکسازی خودکار را تمرین کنید
تمرین .autoClear(false); و .autoClear(true); که قبل از به‌روزرسانی انیمیشن دارایی‌های روی صفحه، مرحله را پاک یا پاک نمی‌کند.
- SVG را تمرین کنید
برخی از فایل‌های .SVG خود را از کلاس قبلی همراه با HRotate بارگیری کنید.
HCanvas
- دانلود 03_HCanvas.zip
03_HCanvas.zip را دانلود کنید. به عنوان یک پیوست به واحد 3، ویدیو 1 پیوند داده شده است.
- تماشای بخش 3، ویدئو 1
ویدئو 1، واحد 3 را تماشا کنید که از طریق فایل‌های "ex 1" و "ex 2" اجرا می‌شود.
- تماشای بخش 3، ویدئو 2
ویدئو 2، واحد 3 را تماشا کنید که از طریق فایل‌های "ex 3" تا "ex 6" اجرا می‌شود.
- بررسی HCanvas
HCanvas را که یک PGraphics توسعه یافته است، مرور کنید.
- HCanvas را تمرین کنید
استفاده از چندین HCanvas را به عنوان لایه‌ها و رنگ آمیزی دارایی‌های خاص به بوم‌های منحصربه‌فرد تمرین کنید. مانند لایه ها در فتوشاپ یا ایلاستریتور فکر کنید.
- تمرین .fade()
استفاده از .autoClear(false) را تمرین کنید. و .fade(2); روی HCanvas برای سوزاندن مسیرها تا 0 آلفا. عدد کوچکتر = سوزاندن کندتر... عدد بزرگتر = سوزاندن سریعتر.
HFollow
- دانلود 04_HFollow.zip
04_HFollow.zip را دانلود کنید. این یک پیوست پیوند شده به ویدیوی واحد 4، ویدیوی 1 است.
- تماشای بخش 4، ویدئو 1
ویدئو 1، واحد 4 را تماشا کنید که از طریق فایل‌های "ex 1" تا "ex 6" اجرا می‌شود.
- تمرین .ease() و .spring()
استفاده از HFollow را تمرین کنید، تنظیماتی را در .ease() و .spring() انجام دهید تا نحوه تعقیب انیمیشن حرکات ماوس شما را تغییر دهید.
- تمرین "5 سابق"
با تغییر عکسی که از آن رنگ نمونه برداری می کند، تغییراتی در "ex 5" ایجاد کنید... سعی کنید از یک پرتره استفاده کنید!
HTimer و HRandomTrigger
- دانلود 05_Timers.zip
05_Timers.zip را دانلود کنید. این یک پیوست پیوند شده به ویدیوی واحد 5، ویدیوی 1 است.
- تماشای بخش 5، ویدئو 1
ویدئو 1، واحد 5 را تماشا کنید که از طریق فایل‌های "HTimer 1" تا "HTimer 4" اجرا می‌شود.
- تماشای بخش 5، ویدئو 2
ویدئو 2، واحد 5 را تماشا کنید که از طریق فایل‌های "HTimer 5" تا "HTimer 7" اجرا می‌شود.
- HTimer را تمرین کنید
حذف .requestAll() و کپی و چسباندن HTimer در برخی از فایل‌های قبلی که در کلاس اول که از HDrawablePool استفاده می‌کردیم را تمرین کنید.
- یادآوری HCanvas با HDrawablePool
هنگام استفاده از HCanvas با HDrawablePool... pool.autoAddtoStage() pool.autoParent(HCanvasName) می شود
- تماشای بخش 5، ویدئو 3
ویدئو 3، واحد 5 را تماشا کنید که از طریق فایل‌های "HRandomTrigger 1" و "HRandomTrigger 2" اجرا می‌شود.
- شانس یادآوری با شناورها
Chance در HRandomTrigger از 1f/15 استفاده می کند، برای اطلاعات بیشتر در مورد نوع داده شناور... به http://www.tutorialspoint.com/java/java_basic_datatypes.htm
مراجعه کنید
HTween و HCallback
- دانلود 06_HTween.zip
06_HTween.zip را دانلود کنید. این یک پیوست پیوند شده به واحد 6، ویدیو 1 است.
- تماشای بخش 6، ویدئو 1
ویدئو 1، واحد 6 را تماشا کنید که از طریق فایل‌های "ex 1" و "ex 2" اجرا می‌شود.
- تمرین - .ease() و .spring()
با اعداد جدید برای .ease() و .spring() بازی کنید تا ببینید چه نوع انیمیشن هایی دریافت می کنید.
- تماشای بخش 6، ویدئو 2
ویدئو 2، واحد 6 را تماشا کنید که از طریق فایل‌های "ex 3" و "ex 4" اجرا می‌شود.
- PVector را تمرین کنید
PVector، معشوق جدیدتان را تمرین کنید (اگر قبلاً نبوده است).
- تماشای بخش 6، ویدئو 3
ویدئو 3، واحد 6 را که از طریق فایل "ex 5_3D" اجرا می‌شود، تماشا کنید.
- یادآوری سه بعدی
هنگام استفاده از مختصات سه بعدی، باید پردازش را با رندر مناسب، اندازه (640,640، P3D) و همچنین HYPE اطلاع رسانی کنید، بنابراین به مختصات سه بعدی تغییر می کند .use3D(true) و http://www.processing.org/reference/camera_.html
- تماشای بخش 6، ویدئو 4
ویدئو 4، واحد 6 را تماشا کنید که از طریق فایل‌های "ex 6" و "ex 7" اجرا می‌شود.
- HTween را تمرین کنید
سعی کنید برخی از HTween را در برخی از فایل‌های قبلی که در کلاس اول انجام دادیم اضافه کنید. شاید برای مثال از HTween برای چرخش و/یا آلفا استفاده کنید.
- تماشای بخش 6، ویدئو 5
ویدئوی 5، واحد 6 را تماشا کنید که از طریق فایل "ex 8" اجرا می‌شود.
- تماشای بخش 6، ویدئو 6
ویدئو 6، واحد 6 را تماشا کنید که از طریق فایل "ex 9" اجرا می شود.
- تماشای بخش 6، ویدئو 7
ویدئو 7، واحد 6 را تماشا کنید که از طریق فایل‌های "ex 10" و "ex 11" اجرا می‌شود.
- تماشای بخش 6، ویدئو 8
ویدئو 8، واحد 6 را تماشا کنید که از طریق فایل‌های "ex 12_3D" و "ex 13_3D" اجرا می‌شود.
- HBox و pointLight() را تمرین کنید
HBox و pointLight() را به عنوان جایگزین قابل ترسیم در برخی از فایل‌های قبلی که ممکن است با آنها بازی می‌کردید، تمرین کنید.
HSwarm
- دانلود 07_HSwarm.zip
07_HSwarm.zip را دانلود کنید. این یک پیوست پیوند شده به واحد 7، ویدیو 1 است.
- تماشای بخش 7، ویدئو 1
ویدئو 1، واحد 7 را تماشا کنید که از طریق فایل‌های "ex 1" تا "ex 3" اجرا می‌شود.
- تمرین .speed() .turnEase() .twitch(
سعی کنید مقادیر .speed() .turnEase() و .twitch() را تنظیم کنید تا انواع مختلف انیمیشن ها را دریافت کنید.
- تماشای بخش 7، ویدئو 2
ویدئو 2، واحد 7 را تماشا کنید که از طریق فایل‌های "ex 4" تا "ex 7" اجرا می‌شود.
- SVG را تمرین کنید
HRect را با برخی از فایل‌های HShape .SVG که در کلاس قبلی به‌عنوان یک گروه ساخته‌اید، تعویض کنید.
- HPixelColorist را تمرین کنید
تغییر عکسی را که از رنگ آن نمونه برداری می کند، تمرین کنید... سعی کنید از یک پرتره استفاده کنید!
HOscillator
- دانلود 08_HOscillator.zip
08_HOscillator.zip را دانلود کنید. این یک پیوست پیوند شده به واحد 8، ویدیو 1 است.
- تماشای بخش 8، ویدئو 1
ویدئو 1، واحد 8 را تماشا کنید که از طریق فایل‌های "ex 1" تا "ex 6" اجرا می‌شود.
- تنظیم مقادیر را تمرین کنید
سعی کنید مقادیر .range() .speed() .freq() و را تنظیم کنید. ()currentStep برای دریافت تغییرات مختلف نوسان.
- تماشای بخش 8، ویدئو 2
واحد 8، ویدئو 2 را تماشا کنید، که از طریق فایل‌های "ex 7 SINE"، "ex 8 SQUARE"، "ex 9 TRIANGLE" و "ex 10 SAW" اجرا می‌شود.
- تماشای بخش 8، ویدئو 3
ویدئو 3، واحد 8 را تماشا کنید که از طریق فایل‌های "ex 11" تا "ex 15" اجرا می‌شود.
- HOscillator را تمرین کنید
افزودن HOscillator را در برخی از فایل‌های قبلی که در کلاس اول انجام دادیم، تمرین کنید. همچنین سعی کنید چند HOscillator مختلف را برای جادوی تاریک‌تر روی هم قرار دهید.
- تماشای بخش 8، ویدئو 4
ویدئو 4، واحد 8 را تماشا کنید که از طریق فایل‌های "ex 16" و "ex 17" اجرا می‌شود.
- از HImage یا HShape استفاده کنید
از "ex 16" یا "ex 17" با HImage یا HShape .SVG برای دریافت این نوع تصاویر استفاده کنید
یا http://www.pinterest.com/praystation/224-sara-blake-sealife
- تماشای بخش 8، ویدئو 5
ویدئو 5، واحد 8 را که از طریق فایل "ex 18" اجرا می‌شود، تماشا کنید.
- تماشای بخش 8، ویدئو 6
ویدئو 6، واحد 8 را تماشا کنید که از طریق فایل "ex 19_3D" اجرا می‌شود.
- تماشای بخش 8، ویدئو 7
ویدئو 7، واحد 8 را که از طریق فایل "ex 20" اجرا می‌شود، تماشا کنید.
- تماشای بخش 8، ویدئو 8
ویدئو 8، واحد 8 را تماشا کنید که از طریق فایل‌های "ex 21_3D" و "ex 22_3D" اجرا می‌شود.
- تماشای بخش 8، ویدئو 9
ویدئو 9، واحد 8 را که از طریق فایل "ex 23_3D" اجرا می‌شود، تماشا کنید.
ترکیب رفتارها
- دانلود 09_combos.zip
09_combos.zip را دانلود کنید. این یک پیوست پیوند شده به واحد 9، ویدیو 1 است.
- پیشنهاد
در حالی که دمپایی مبهم پوشیده اید، با یک شات انرژی 5 ساعته، یک قهوه جوش درست کنید. فقط گفتن.
- تماشای واحد 9، ویدئو 1
ویدئو 1، واحد 9 را تماشا کنید که از طریق فایل‌های "ex 1" و "ex 2" اجرا می‌شود.
- مرجع
- تماشای بخش 9، ویدئو 2
ویدئو 2، واحد 9 را تماشا کنید که از طریق فایل "ex 3" اجرا می شود.
- تماشای بخش 9، ویدئو 3
ویدئو 3، واحد 9 را تماشا کنید که از طریق فایل‌های "ex 4 MOV" و "ex 5 MOV" اجرا می‌شود.
- تماشای بخش 9، ویدئو 4
ویدئو 4، واحد 9 را که از طریق فایل "ex 6" اجرا می‌شود، تماشا کنید.
- مرجع
مرجع -
- تماشای بخش 9، ویدئو 5
ویدئو 5، واحد 9 را تماشا کنید که از طریق فایل‌های "ex 7" و "ex 8" اجرا می‌شود.
- تماشای بخش 9، ویدئو 6
ویدئو 6، واحد 9 را تماشا کنید که از فایل "ex 9 PNG" تا "ex 11 PNG" اجرا می‌شود.
- تماشای بخش 9، ویدئو 7
ویدئو 7، واحد 9 را تماشا کنید که از طریق فایل "ex 12" اجرا می‌شود.
- تماشای بخش 9، ویدئو 8
ویدئو 8، واحد 9 را تماشا کنید که از طریق فایل‌های "ex 13" و "ex 14" اجرا می‌شود.
- تماشای بخش 9، ویدئو 9
ویدئو 9 واحد 9 را تماشا کنید که از طریق فایل "ex 15 SWARM" اجرا می شود.
- تماشای بخش 9، ویدئو 10
ویدئو 10، واحد 9 را تماشا کنید که از طریق فایل‌های "ex 16" و "ex 17" اجرا می‌شود.
- تماشای بخش 9، ویدئو 11
ویدئو 11، واحد 9 را تماشا کنید که از طریق فایل "ex 18" اجرا می شود.
- تماشای بخش 9، ویدئو 12
ویدئو 12، واحد 9 را تماشا کنید که از طریق فایل "ex 19" اجرا می شود.
- تماشای بخش 9، ویدئو 13
ویدئو 13، واحد 9 را تماشا کنید که از طریق فایل "ex 20" اجرا می شود.
خروجی
- دانلود 10_output.zip
10_output.zip را دانلود کنید. این یک پیوست پیوند شده به واحد 10، ویدیو 1 است.
- تماشای بخش 10، ویدئو 1
ویدئو 1، واحد 10 را تماشا کنید که از فایل بخش 09 قبلی "14 سابق" اجرا می شود.
- تماشای بخش 10، ویدئو 2
Watch Unit 10, Video 2, Google Search Sequimago (فقط apple)، مبدل ویدیویی iSkySoft
- دست را در اینجا قرار دهید
دست را در اینجا قرار دهید -
درس ها Lessons
-
واحد 8، ویدئو 3 Unit 8, Video 3
-
معرفی HTween و HCallback Intro to HTween and HCallback
-
واحد 2، ویدئو 3 Unit 2, Video 3
-
معرفی HOscillator Intro to HOscillator
-
واحد 9، ویدئو 9 Unit 9, Video 9
-
واحد 5، ویدئو 1 Unit 5, Video 1
-
معرفی HTimer و HRandomTrigger Intro to HTimer and HRandomTrigger
-
واحد 8، ویدئو 1 Unit 8, Video 1
-
واحد 1، ویدئو 2 Unit 1, Video 2
-
واحد 10، ویدئو 2 Unit 10, Video 2
-
واحد 6، ویدئو 1 Unit 6, Video 1
-
واحد 3، ویدئو 1 Unit 3, Video 1
-
معرفی HSwarm Intro to HSwarm
-
مقدمه ای بر HCanvas Intro to HCanvas
-
واحد 6، ویدئو 8 Unit 6, Video 8
-
واحد 9، ویدئو 2 Unit 9, Video 2
-
واحد 8، ویدئو 4 Unit 8, Video 4
-
واحد 5، ویدئو 3 Unit 5, Video 3
-
واحد 8، ویدئو 7 Unit 8, Video 7
-
مقدمه ای بر خروجی Intro to Output
-
واحد 9، ویدئو 5 Unit 9, Video 5
-
تریلر Trailer
-
معرفی HRotate و Anchor Intro to HRotate and Anchor
-
واحد 2، ویدئو 2 Unit 2, Video 2
-
واحد 8، ویدئو 9 Unit 8, Video 9
-
واحد 1، ویدئو 1 Unit 1, Video 1
-
واحد 6، ویدئو 5 Unit 6, Video 5
-
واحد 2، ویدئو 1 Unit 2, Video 1
-
واحد 3، ویدئو 2 Unit 3, Video 2
-
واحد 9، ویدئو 6 Unit 9, Video 6
-
واحد 9، ویدئو 11 Unit 9, Video 11
-
واحد 4، ویدئو 1 Unit 4, Video 1
-
کلاس های خلاق بیشتر در Skillshare More Creative Classes on Skillshare
-
واحد 9، ویدئو 12 Unit 9, Video 12
-
واحد 6، ویدئو 3 Unit 6, Video 3
-
واحد 9، ویدئو 3 Unit 9, Video 3
-
واحد 9، ویدئو 1 Unit 9, Video 1
-
واحد 5، ویدئو 2 Unit 5, Video 2
-
معرفی HFollow Intro to HFollow
-
واحد 1، ویدئو 3 Unit 1, Video 3
-
واحد 9، ویدئو 7 Unit 9, Video 7
-
واحد 7، ویدئو 2 Unit 7, Video 2
-
پردازش 3 + کتابخانه HYPE/به روز رسانی Processing 3 + HYPE library / update
-
واحد 6، ویدئو 7 Unit 6, Video 7
-
واحد 7، ویدئو 1 Unit 7, Video 1
-
واحد 9، ویدئو 10 Unit 9, Video 10
-
واحد 9، ویدئو 8 Unit 9, Video 8
-
واحد 6، ویدئو 2 Unit 6, Video 2
-
واحد 9، ویدئو 13 Unit 9, Video 13
-
واحد 10، ویدئو 1 Unit 10, Video 1
-
واحد 6، ویدئو 4 Unit 6, Video 4
-
واحد 8، ویدئو 5 Unit 8, Video 5
-
واحد 8، ویدئو 2 Unit 8, Video 2
-
واحد 8، ویدئو 8 Unit 8, Video 8
-
واحد 8، ویدئو 6 Unit 8, Video 6
-
مقدمه ای بر ترکیب رفتارها Intro to Combining Behaviors
-
واحد 6، ویدئو 6 Unit 6, Video 6
-
واحد 9، ویدئو 4 Unit 9, Video 4
https://donyad.com/d/8500bb
Joshua Davis
هنرمند، طراح و فناوری
جاشوا دیویس یک طراح، فن‌شناس، نویسنده و هنرمند در رسانه‌های جدید برنده جایزه است و به دلیل نقشش در طراحی تجسم واتسون IBM، برنامه رایانه‌ای هوشمند که قادر به پاسخ‌گویی به سؤالات است، برای نمایش مسابقه «جسان» تحسین شده است.
آثار جاشوا در تیت مدرن (لندن)، Ars Electronica (اتریش)، موزه طراحی (لندن)، مرکز پمپیدو (فرانسه)، موسسه هنرهای معاصر (لندن)، PS.1 MoMA به نمایش گذاشته شده است. (نیویورک)، کوپر هیویت اسمیتسونیان، موزه طراحی ملی و موارد دیگر.
نمایش نظرات