Як малювати разом онлайн на одній дошці

Що вміє DrawBench

• Спільна дошка за посиланням: до 16 людей малюють на одній дошці одночасно й бачать штрихи одне одного просто під час малювання, з курсором та ім’ям кожного.
• Інструменти: олівець, маркер, гумка, лінія, прямокутник, еліпс і текст, вісім кольорів і будь-який інший, окрема товщина для кожного інструмента.
• Натиск стилуса: якщо малювати пером на планшеті чи графічним планшетом, лінія олівця товщає, коли натискаєте сильніше.
• Безмежна дошка: рухайте її й масштабуйте від 10 % до 800 % двома пальцями, коліщатком миші чи кнопками в куті.
• Скасування й повтор власних дій і гумка, що стирає лише ваші малюнки.
• Експорт усього малюнка в PNG чи SVG.
• Працює й самостійно, навіть без інтернету: поки ви не поділилися дошкою, вона зберігається у вашому браузері.

Малювати разом у три кроки

1. Відкрийте DrawBench і натисніть Створити посилання. Ваша дошка отримає адресу на кшталт fof.lol/draw/#/b/… і QR-код.
2. Надішліть посилання в чат або дайте відсканувати QR-код. Його відкривають у будь-якому сучасному браузері — без застосунку й облікового запису.
3. Малюйте. Нові штрихи всі бачать просто під час малювання, а курсори з іменами показують, де інші. Змініть своє ім’я в блоці На дошці, щоб інші знали, хто є хто.

Усе, що ви намалювали до того, як поділитися, лишається на дошці, і інші отримують це, щойно приєднаються. Те саме посилання працює й пізніше, якщо дошку хтось розміщує (див. Хто зберігає дошку).

Інструменти й клавіші

Ще клавіші: Ctrl+Z — скасувати, Ctrl+Shift+Z чи Ctrl+Y — повторити, [ і ] — тонше й товще, + і − — масштаб, 0 — назад до 100 %, F — показати весь малюнок. Коліщатко миші рухає дошку, а Ctrl + коліщатко (чи зведення пальців на тачпаді) масштабує навколо курсора. Кнопка з чотирма кутиками відкриває дошку на весь екран.

Кожен інструмент пам’ятає свою товщину, а колір, інструмент і товщини запам’ятовуються в цьому браузері.

Телефони, планшети й стилуси

• Один палець малює вибраним інструментом, двома пальцями дошка рухається й масштабується. Якщо другий палець торкнувся одразу після першого, початок штриха відкидається, тож масштабування не лишає слідів.
• Стилус (Apple Pencil, S Pen, Surface Pen, графічний планшет): олівець враховує натиск пера. Щойно дошка відчула стилус, пальці лише рухають і масштабують її, тож долоня, що лежить на екрані, не малює.
• Для великого малюнка вмикайте повний екран: панель інструментів лишається вгорі, а решту займає дошка.

Ваші штрихи — ваші

Кожен малюнок на дошці належить тому, хто його намалював. Скасувати, Повторити, Гумка й Стерти мої малюнки діють лише на ваші малюнки. Ніхто не зітре чужу роботу ні випадково, ні навмисно; якщо спробувати стерти чужу лінію, DrawBench про це скаже.

Саме через це правило зміни ніколи не конфліктують. Кожен малюнок має одного автора й номер версії; коли зустрічаються дві версії, перемагає новіша, а новішу версію може створити лише автор. Тож неважливо, у якому порядку надходять зміни: на кожному пристрої виходить точнісінько та сама дошка, і нічого не треба зводити вручну.

Скасування повертає малюнок на його колишнє місце серед інших, а не нагору. Історія скасувань живе в сторінці: після перезавантаження свої малюнки можна стерти, але старіші кроки скасувати вже не вийде.

Хто зберігає дошку

Сервера DrawBench, що зберігав би дошки, немає. Той, хто створює посилання, розміщує дошку у своїй вкладці браузера: кожен, хто відкриває посилання, під’єднується до цієї вкладки, отримує всю дошку, а далі кожна зміна йде через неї до всіх інших. Невеликий публічний сервер PeerJS лише знайомить браузери між собою.

• Не закривайте сторінку господаря. Поки вона розміщує дошку, на якій є люди, її екран не гасне, а закриття вкладки просить підтвердження.
• Якщо господар пішов, кожен зберігає свою копію й може малювати далі сам. Будь-хто може натиснути Розмістити дошку тут: його копія стає дошкою, те саме посилання знову працює, а інші під’єднуються до неї самі.
• Якщо господар лише перезавантажив сторінку, дошка автоматично повертається до нього.
• Те, що ви намалювали без з’єднання, не губиться: щойно з’єднання відновиться, ваші малюнки потраплять на дошку.

Коли не вдається з’єднатися

DrawBench з’єднує браузери напряму через WebRTC — технологію, на якій працюють відеодзвінки в браузері. Зазвичай усе просто працює, але деякі мережі заважають:

• «Не вдалося під’єднатися до дошки»: дошка існує, але ваші пристрої не змогли знайти шлях один до одного. Так буває за суворим NAT чи файрволом: мобільний інтернет, де одна публічна адреса на багатьох абонентів (NAT оператора), офісний, шкільний, готельний чи кав’ярняний Wi-Fi, деякі VPN. Сервіси відеодзвінків розв’язують це власними серверами-ретрансляторами (TURN), що проводять трафік в обхід перешкоди; власного такого сервера DrawBench не має. Може допомогти безкоштовний публічний ретранслятор PeerJS, але він працює лише через UDP і часто заблокований чи перевантажений.
• Що допомагає: під’єднайте обидва пристрої до одного Wi-Fi; перемкніть один із них на мобільний інтернет чи іншу мережу; вимкніть VPN; спробуйте інший браузер. Потім натисніть Спробувати ще.
• «Цю дошку зараз ніхто не розміщує»: той, хто нею поділився, закрив сторінку. Попросіть відкрити її знову або розмістіть дошку самі.
• «Немає зв’язку з сервером з’єднань»: немає інтернету або щось блокує 0.peerjs.com (суворий файрвол чи блокувальник реклами).

Після з’єднання панель поруч із дошкою показує, чи з’єднання Напряму, пристрій до пристрою, чи Через сервер-ретранслятор (господар бачить це для кожного учасника); обидва зашифровані.

Як зберегти малюнок

• PNG: картинка всього малюнка (а не лише видимої частини) на білому тлі з подвійною роздільністю екрана, до 8192 пікселів по довшій стороні.
• SVG: векторний файл, що лишається чітким за будь-якого розміру й відкривається в Inkscape, Figma, Illustrator і браузерах. Кожен малюнок — окремий контур, текст лишається текстом.
• На цьому пристрої: дошка зберігається в браузері просто під час малювання. Останні вісім дошок є в списку Дошки на цьому пристрої; Нова дошка починає чисту, а старі лишаються в списку.

Приватність

Дошки ніколи не завантажуються на fof.lol. Коли ви малюєте самі, нічого нікуди не надсилається. Коли ви ділитеся дошкою, малюнки, положення курсорів та імена йдуть зашифрованими WebRTC-з’єднаннями між браузерами на дошці, і кожен із них зберігає копію. Щоб знайти одне одного, браузери обмінюються випадковими ідентифікаторами й мережевими адресами через сервер PeerJS і дізнаються свою публічну адресу від STUN-сервера Google. Саме посилання випадкове й довге: знайти дошку можуть лише ті, кому ви його надіслали, і лише поки хтось її розміщує.

Обмеження

• До 16 людей на одній дошці одночасно й до 20 000 малюнків на ній.
• Дошка живе в браузерах. Якщо її ніхто не відкрив і всі копії видалено, її більше немає: експортуйте важливе.
• Браузер зберігає для одного сайту лише кілька мегабайтів; величезна дошка може не вміститися, і тоді DrawBench запропонує її експортувати.
• Вставляти картинки на дошку поки не можна.

Часті запитання

Чи потрібен іншим обліковий запис або застосунок?

Ні. Досить посилання й сучасного браузера на телефоні, планшеті чи комп’ютері.

Чи може хтось стерти те, що намалював я?

Ні. Стерти чи скасувати малюнок може лише його автор.

Чому дошка перестала оновлюватися?

Найімовірніше, господар закрив сторінку чи втратив з’єднання. DrawBench покаже повідомлення й пробуватиме під’єднатися знову. Можна розмістити дошку самому, і інші приєднаються до вас.

Чи працює на iPhone та iPad?

Так, у Safari та інших браузерах. Коли малюєте разом, тримайте сторінку на екрані: iOS призупиняє сторінки у фоні.

Чи є заливка або виділення й переміщення?

Поки ні. Фігури — це контури; щоб пересунути малюнок, зітріть його й намалюйте знову або скористайтеся скасуванням.

Чому в темній темі дошка біла?

Це папір: вибрані кольори виглядають однаково на кожному екрані, у PNG і в SVG.