Писати гарний код - одне задоволення, але важко ділитися цим задоволенням з іншими програмістами, не кажучи вже про тих, хто такими не є. У вільний від роботи і спілкування з родиною час, я виношував ідею про те, як же запрограмувати поему, використовуючи елементи canvas для того, щоб малювати в браузері.
Існує велика кількість термінів, які описують візуальні експерименти на комп'ютері схема коду, демо, інтерактивне мистецтво і так далі. Для того, щоб описати цей процес, я зупинився на терміні поема програмування. Поема - це відполірована до блиску частина прози, легка, коротка і естетична. Це не полузаконченний начерк ідеї в альбомі, а щось зв'язне, представлене глядачеві для його задоволення. Поема - це не інструмент, але вона живе, щоб викликати емоцію.
Я перечитав багато книг присвячених математики, обчислювальної техніки, фізики та біології для свого задоволення. І я дуже швидко зрозумів те, що якщо я розказую про будь-якої ідеї, людям це швидко набридає. Насправді, я можу взяти ідею, яку вважаю неймовірно цікавою і швидко заразити людину почуттям зацікавленості, навіть якщо людина не має жодного уявлення про кодування і про те, як це взагалі працює. Тобі не потрібно хапатися за якусь складну філософську думку або за обчислювальні розрахунки для того, щоб запрограмувати поему. Необхідно лише бажання побачити щось щось живе і володіє диханням у себе на екрані. Коди і приклади, які я залишаю нижче, допоможуть вам зрозуміти, як фактично здійснити цей швидкий і нескладний процес.
Головна фішка в тому, що створення поеми має залишатися простим і легким. Не потрібно витрачати три місяці, і будувати один, хоч і дуже класний демо. Замість цього створіть 10 поем, які допоможуть втілити ідею в життя. Напишіть код, який буде захоплюючим, і не бійтеся потерпіти невдачу.
Тут немає нічого складного, можна легко почати роботу. Єдине, що може трохи збентежити, це контекст, який повинен формуватися з параметрами налаштування, такими як fillStyle, lineWidth, font та strokeStyle, перш ніж фактичний малюнок буде використовуватися. Можна легко забути оновити або перезавантажити параметри налаштування і в підсумку отримати непередбачений результат.
Перший приклад тільки бігає і перетворює статичний малюнок в кинувся. Все це добре, але ось справжні веселощі починається тоді, коли ти ставиш швидкість 60 кадрів в секунду. У сучасних браузерів є надбудова в функції requestAnimationFrame, яка синхронізує код вихідного малюнка з малюнком, який рухається в браузері. Це покращує ефективність і надає плавність руху. Метою візуалізації повинен бути код, який рухається зі швидкістю 60 кадрів в секунду.
var canvas = document.getElementById ( 'example-canvas');
А тепер будьте уважні, до цього ми говорили про програмування і малюванні на моніторі, а тут я підготував щось математичне. Зізнаюся, я завжди любив математику (на відміну від багатьох інших художників). Незважаючи на цю любов, я розчарований тим, як її викладають в школі. Її викладають занадто формально, що може бути і добре для викладача математики, але при цьому втрачається захоплення, інтерес до дослідження і прагматизм, за допомогою яких можна зробити багато всього цікавого. Але є і хороша новина, програмісти не звертають на це уваги і концентруються на більш цікаві речі.
А тепер я постараюся швидко пояснити, як працює система координат. Це буде корисно для того, щоб зрозуміти, як математична функція може створити рух. Картинка нижче показує інтерактивну систему координат. Зверніть увагу, що там не тільки координата х. Функція, яку я намалював, представлена як (a * x + b) * c + d. Пограйте слайдером за графіком, і ви побачите, як кожна з цих значень може регулювати положення графіка і масштаб.
Якщо ви все ще хочете і далі попрацювати з кодом, я пропоную вам задати рух і напрямок. Спробуйте змінити значення на системі координат або перейдіть на іншу функцію і подивіться що вийде.
Ці приклади будуть трохи складніше, тому що вони пов'язані з об'єктами, але це того варто. Подивіться зразки коду, що б зрозуміти як працює new Scene який допоможе з основами малювання в кинувся. У нашій новій Точки буде маркер, щоб мати доступ до будь-якої змінної, як і в кинувся контексті.
Для того, щоб почати роботу з конструктором, для Точки налаштовують конфігурацію її роботи і встановлюють деякі змінні, необхідні для роботи. І знову ми звертаємося до three.js vector. Коли йде відтворення в кадровій частоті на 60fps, важливо заздалегідь запустити ваші предмети і не створювати нові під час відтворення. Це може з'їсти наявну пам'ять і зробити вашу візуалізацію обривистій. Також, зверніть увагу на те, як Точка передає копію кадру за посиланням. Це допомагає спрацювати чіткіше.
Вся інша частина коду буде встановлена на об'єкті прототипу Точки так. щоб у кожної нової Точки був доступ до цих методів. Я буду пояснювати від функції до функції.
Я відділяю код малювання від коду оновлення. Це допомагає набагато легше підтримувати і рухати об'єкт. Прямо як схема MVC розділяє твій особистий контроль і логічний погляд. Вектор dt - це зміна в часі в мілісекундах з моменту виходу останнього оновлення. Ця назва зручне і короткий і походить від (не лякайтеся) calculus derivatives (похідна розрахунку). Він віднімає швидкість вашого руху від швидкості зміни кадрів. Таким чином, у вас не буде уповільнення стилю NES, якщо виникнуть якісь складнощі. Якщо ваша швидкість буде занадто висока, вийде так, що будуть пропускатися кадри, але швидкість залишиться та ж.
Ця функція трохи дивна по своїй структурі, але зручна в користуванні. Дійсно дорого розподіляти пам'ять в системі координат (функції). MoveDistance можна встановити один раз і використовувати при повторному запуску системи функції, коли це необхідно.
Цей вектор використовується тільки для того, що розрахувати нову позицію і не призначена для роботи поза функцією. Це перший математичний вектор, який стали використовувати. Зараз напрямок вектора множиться на противагу зміни в часі, а потім доданий до позиції. В кінці відбувається дія модуля, який утримує точку на екрані.
І в кінці найлегше. Зробіть копію контексту головного об'єкта і намалюйте прямокутник (або що-небудь інше, не важливо). Просто прямокутник найпростіше намалювати на екрані.
На цьому етапі я додаю нову Точку та називаю її this.dot = new Dot (x, y, this) в основному конструкторі. А потім, в основному методі поновлення я додаю this.dot.update (dt) і з'являється точка рухається по екрану.
Приємно, що в коді трохи більше структури, але це не надає більшої привабливості. Тут починається цикл. В основному об'єкті ми створимо новий об'єкт DotManager. Зручно зібрати цю функціональність в окремому об'єкті, оскільки це легше і більш чисто, тому що до моделювання стає все більше складним.
Тепер в шаблоні, замість того, щоб оновити Точку, ми створюємо і оновлюємо DotManager. Для початку створимо 5000 точок.
Це, безумовно, виглядає набагато краще, ніж одна точка. Тепер саме час для того, щоб почати додавати більше до оновленого методу в вашій Точці. Будь-яка зміна в коді об'єкта відіб'ється на кожній точці на екрані. А ось тут і починають відбуватися чудеса. Пам'ятайте систему координат розташовану вище? Як на рахунок того, щоб задати ефект хвилеподібного руху? Ми створимо змінну wavePosition до об'єкта Точка. На закінчення, ми додамо цю змінну до позиції Y.
Так, трохи збиває з пантелику, коли написано в один рядок, тому прикладаю інший варіант, який зроблений як в системі координат.
Я хвилююся…
Ще один невеликий штрих. Монохромність трохи нудна, тому додамо трохи кольору.
Для кожної нової Точки задайте її початкову позицію і встановіть відтінок по горизонталі кинувся. Я додав функцію Utils.hslToFillStyle. вона трохи допоможе перетворити деякі вводяться змінні в правильно відформатованої fillStyle ланцюжку. Справи вже йдуть набагато цікавіше. Точки в результаті будуть збиратися в одному місці і вже не буде ефекту веселки після того як вони будуть хаотично розкидані. І знову ж таки, це приклад рухомий візуалізації з домішкою математики або вступними значеннями. Мені більше подобається працювати з кольором через колірну модель HSL, ніж з RGB, тому що вона легше у використанні. RGB трохи абстрактна.
До цього моменту не було реальної роботи користувача.
Залишається тільки створити об'єкт миші всередині схеми. Тепер, коли ми маємо мишу можна зробити так, що точки будуть слідувати за нею.
Цей метод може трохи збити вас з пантелику, якщо ви не дуже добре розбираєтеся в векторної математики. Вектори можуть бути добре візуалізовані і можуть допомогти намалювати каракулі на папері з плямою від кави. Простіше кажучи, це функція показує відстань між мишкою і точкою. І коли точка рухається наближаючись до іншої точки, яка ґрунтується на тому, наскільки вона вже близька до іншої точки і на те, скільки часу пройшло. Це робиться шляхом обчислення відстані руху (звичайна скалярная цифра), і збільшує цю цифру, нормалізує вектор точки (вектор довжиною 1) збігається з мишкою. Гаразд, остання пропозиція не обов'язково було писати простою мовою, але ж це тільки початок.
Найважливішим моментом для мене є процес створення поеми програмування і мистецтво створення чогось нового. Я б радив вам сильно не заглиблюватися в деталі і великі проекти. Замість цього повторюйте, експериментуйте, радійте успіху і нехай іноді щось у вас не вийде. Одного разу у мене вийшло щось схоже на шматок моторошної веселки. Я покладав великі надії на рекурсивні кола, але я не дозволив поганих результатів збити мене з мого шляху. В кінцевому рахунку, код, який тут був докладно описаний - це дослідження в дуже об'єктно-орієнтованому стилі, який мені найбільше подобається. Пристосовуйте ці ідеї свого власного процесу, інструментів і техніці. Поеми не є великою інтегрованою системою, тому її легко малювати і експериментувати з нею не беручи до уваги умови великих проектів.
Розглядайте кинувся як олівець, який допоможе вам втілити ваші чудові і ідеї і дасть можливість вашим творінням полетіти.
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
