p5.js
це бібліотека, призначена для приведення сили
Обробка
до Інтернету. Він спрямований на введення художників, дизайнерів та педагогів до світу програмування, а також пропонуючи універсальні інструменти, щоб призвести до дерів та інженерів у візуальні мистецтва.
Давайте зануримося і створюємо наш перший "ескіз". Наша мета - побудувати інструмент креслення, який перетворює просте зображення в поле анімованих зірок. По-перше, ми визначимо кілька глобальних змінних і напишіть нашу
Налаштування ()
функція. P5's
Налаштування ()
працює один раз, коли начерк завантажено, так що це ідеальне місце для обробки ініціалізації.
var hintibage, skyimage, зірки = [];
Налаштування функції () () [...
Всередині нашого
налаштування
Функція, ми створимо полотно і сховаємо курсор миші, щоб ми могли намалювати наші власні. За замовчуванням P5 додає контур навколо фігур - ми хочемо відключити штрихи в цьому випадку.
Createcanvas (800500);
nocursor ();
Nottroke ();
На фоновому режимі - це сцена цієї нічного неба забезпечує налаштування для нашої анімації
Далі ми завантажимо пару зображень. Один буде служити фон - у цьому випадку сцена нічного неба. Інша буде зображення "підказка" - чорно-білий дизайн наш остаточний дизайн буде заснований. Ідея полягає в тому, щоб покласти більшість зірок над чорними пікселями у нашому підказці, щоб відтворити дизайн на нашому фоновому режимі. Було б легко створити ці образи за допомогою інструментів P5 текстових та малювання інструментів, але заради стислості ми будемо використовувати статичні активи.
Це
Налаштування ()
! Інша функція ключа є
малювати ()
. Він називається безперервною петлею, що корисно для анімації та додавання елементів з часом.
Функція малювання () {...}
У рамках функції, наше перше завдання полягає в тому, щоб заповнити полотно з нашим фоновим зображенням. P5 не автоматично очищує полотно між ними
малювати ()
Дзвінки, тому нам потрібно зробити це кожним кадром, або ми закінчимо деякі дивні ефекти накопичення. Щоб розмістити завантажене зображення на полотні, використовуйте
зображення ()
функція і дайте x і y координати для позиціонування.
зображення (skyimage, 0, 0);
Далі ми захопимо поточне розташування миші та зберігати його як P5.Vector, використовуючи
Креття ()
. Цей об'єкт поставляється з зручними функціями, щоб мати справу з точками в просторі, але ми в основному просто використовуємо його як контейнер.
VAR позиція = творчість (Mousex, Mousey);
Використовуючи нашу новоутворену позицію миші, ми можемо намалювати курсор. Ми встановимо колір креслення
заповнити ()
шляхом проходження значення RGB та використання
Еліпс ()
щоб намалювати коло на місці миші.
Ми хочемо лише малювати нові зірки, поки миша натиснута, тому ми перевіримо P5's
мишаний
перед тим, як продовжити. Якщо миша вниз, ми повинні розрахувати гарне місце для нашої наступної зірки, щоб закінчитися. Ми будемо робити це за допомогою спеціальної функції
findpixel ()
, який ми визначимо пізніше.
Одного разу ми маємо ціль, ми створимо новий екземпляр об'єкта зірка (більш нижче) і натиснути його на кінець нашого масиву зірки. Якщо ми закінчимо більше 2000 зірок, ми почнемо відкинути найстаріші.
IF (мишаний) {
var target = findpixel ();
var star = нова зірка (положення, ціль);
stars.push (зірка);
якщо (зірки.Ленчення & gt; 2000) stars.Shift ();
}
Нарешті, ми будемо цикл через наш масив зірок і зателефонуючи
оновлення ()
і
малювати ()
на кожному з них. Пізніше ми занурюємо ці методи.
для (var i = 0; i & lt; stars.length; i ++) {
зірки [i] .update ();
зірки [i] .draw ();
}
Допоміжні функції
Зараз
Налаштування ()
і
малювати ()
На місці ми будемо працювати над допоміжними функціями та об'єктами. По-перше, ми визначимо функцію, яка знаходить позицію для відпочинку для кожної нової зірки. Все, що нам потрібно зробити, це перевірити деякі випадкові пікселі в нашому підказці, використовуючи
отримати ()
щоб побачити, чи вони чорні або білі.
Насправді ми повинні лише подивитися на їхнє червоне значення, тому що в обох випадках значення RGB відповідає. Якщо ми знайдемо не-білий піксель, ми повернемося, тому що ми потрапили на наш дизайн. Якщо ні, ми просто повернемо останній піксель, і він буде служити випадковою зіркою.
Функція Findpixel () {
var x, y;
для (var i = 0; i & lt; 15; i ++) {
x = поверх (випадковий (hintibage.width));
y = поверх (випадковий (hintibage.height));
якщо (червоний (hintimage.get (x, y)) & lt; 255) перерва;
}
Повернення творчості (x, y);
}
Останній - це наш користувацький об'єкт зірки. Просто ми хочемо багаторазового контейнера, який зберігає інформацію про кожну зірку, а також надає засоби для оновлення та нанесення їх. JavaScript не забезпечує способу створення класів у традиційному сенсі, але ми можемо отримати той самий результат, визначивши функцію та розширюючи його для власних потреб.
Кожна зірка має декілька властивостей (вихідна позиція, остаточне місце розташування та випадково генерований діаметр), який ми визначимо в "функції конструктора", яка називається для кожної нової зірки, створеної в нашій петлі.
Далі ми додамо
оновлення ()
Метод зірка, який буде використовувати P5.Vector
Лерп ()
Для розрахунку нового розташування між поточними та цільовими позиціями зірки. У цьому випадку ми рухаємо чотири відсотки від залишкової відстані для кожної розіграшу, що ефективно дає нам полегшення ефекту.
Якщо ми хотіли б отримати фантазії, ми також можемо також моделювати деяку фізику, але тепер ми збережемо це просто.
Нарешті, зірки
малювати ()
Метод фактично малює зірку до полотна. Ще раз, ми використовуємо
заповнити ()
і
Еліпс ()
, хоча на цей раз ми називаємо
заповнити ()
з значенням сірого та значенням альфа для прозорості.
Кожна кадр, лінійна інтерполяція дає нам нову точку по шляху між поточною позицією зірки та його призначенням
Щоб дати зірки блиск, альфа-значення визначається за допомогою P5's
шум ()
функція. Це повертає значення шуму за допомогою заданих координат, що означає, що ви отримуєте гладку, рідну послідовність випадкових чисел. Для третього параметра ми пропускаємо значення часу, а не просторову цінність, так що шум буде змінювати з часом.
Це для нашого першого ескізу! Натисніть і перетягніть, щоб побачити нові зірки з'являються і відповідають зображенням підказки.
Що далі?
Звідси ви можете додати деякі HTML-елементи для керування змінними, використовуючи додаток P5.DOM або навіть додавати звук до візуальних даних
p5.sound
.
Ми тільки подряпали поверхню того, що можливо з p5.js, і з новими функціями на шляху, є ще більше, щоб з нетерпінням чекати. Весело!
