🖥 Вийшла Anime.js 4.0, бібліотека для створення складних анімацій у інтернеті на чистому JS: нова модульна архітектура, підтримка Web Animation API, анімації прокрутки та багато іншого → https://animejs.com

Code Ukraine

🔥 Uiverse 6000+ готових HTML/CSS компонентів для твого проекту

Сайт пропонує понад 6000 компонентів, які можна одразу вставити у свій проект або адаптувати під себе. Кожен елемент йде з готовим кодом - просто копіюєш, вставляєш і насолоджуєшся.

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

#фронтенд

Code Ukraine

🎓 Рейкастинг — як «промінь» знаходить об’єкти у 3D

Рейкастинг (від ray casting) — це техніка, яка використовується для визначення того, що «бачить» промінь, випущений з певної точки у певному напрямку. Тобто, ми "кидаємо" промінь у простір і дивимось, з чим він зіткнеться.

Використовується у:
🔹 3D-іграх
🔹 Фізичних рушіях (Unity, Unreal)
🔹 Обробці зіткнень
🔹 Виборі об’єктів у сцені (наприклад, кліком миші по 3D моделі)

🧠 Як це працює?

1. Маємо точку origin і напрямок direction.
2. Кидаємо "промінь" з цієї точки.
3. Перевіряємо, чи перетинає цей промінь якісь об’єкти у сцені (моделі, колайдери тощо).
4. Отримуємо точку зіткнення, нормаль, відстань — усе, що потрібно для подальшої логіки.

Цей код запускає промінь з камери у напрямку миші та виводить ім’я об’єкта, в який влучив.

🧱 У чому сила?

✅ Можна реалізувати видимість, наведення, вибір об'єктів
✅ Економніше, ніж повноцінний рейтрейсинг
✅ Часто використовується для простих 3D-движків (навіть у браузері)

📌 Перші «3D»-ігри типу Wolfenstein 3D були побудовані саме на рейкастингу, а не повному 3D. Це була симуляція простору з використанням променів — справжній інженерний хак.

Хочеш приклад у Three.js чи Python з Pygame або WebGL? Пиши в коменти 👇

#графіка #3d #алгоритми #unity #raycasting

Code Ukraine

📱 Microsoft запустили марафон із безкоштовними курсами по штучному інтелекту

Уже сьогодні стартував AI Skills Fest — серія безкоштовних курсів із роботи з нейромережами, створення ШІ-агентів.

Триватиме цей марафон 50 днів — до 28 травня (!). Опісля курси знову стануть платними.

Учасників обіцяють провести з початкового рівня до повноцінної роботи з хмарною платформою Azure і Copilot (для Microsoft 365).

Розклад доступний тут. Для участі необхідна реєстрація.

Code Ukraine

⭐️ 100 гайдів зі створення ШІ-агентів — зібрали повноцінний посібник для розробників нейромереж

У добірці — все необхідне: від побудови RAG-архітектури та MCP-серверів до мультиагентних систем, саморефлексивних моделей і навіть ШІ-асистентів для таких платформ, як Airbnb.

Корисно зберегти — посилання тут.

Code Ukraine

🎮 Pygame — твої перші кроки у геймдеві

Мрієш створити свою гру, але не знаєш з чого почати?
🔹 Pygame — ідеальний інструмент для знайомства з розробкою ігор. Це проста, але потужна бібліотека на Python, яка дозволяє створювати 2D-ігри без зайвої мороки.

Що вміє Pygame?

✅ Малювати графіку: спрайти, фони, анімації
✅ Обробляти події з клавіатури та миші
✅ Працювати зі звуками та музикою
✅ Робити фізику зіткнень, таймери, FPS
✅ Створювати інтерактивні проєкти, симуляції, навіть прототипи AI

🔹 Це просте вікно з червоним колом — твоя перша «гра». Далі — все у твоїх руках.

📌 Для чого використовують Pygame?

— Створення аркад, платформерів, шутерів
— Освітні проєкти (інформатика, програмування)
— Прототипування ідей без складного рушія
— Моделювання фізики та графіки для AI

Не обов’язково одразу лізти в Unity чи Unreal — Python + Pygame дає змогу легко стартанути й зрозуміти, як працюють ігри зсередини.

🔹 Це просте вікно з червоним колом — твоя перша «гра». Далі — все у твоїх руках.

Якщо цікаво — можу зробити цикл міні-проєктів на Pygame 🎯
#pygame #python #геймдев #ігри #інтерактив #освіта #2d

Code Ukraine

📱 Неймовірно: тепер можна створювати робочі сайти прямо з Figma

Завдяки новій функції від bolt.new, достатньо просто додати їхній сервіс до посилання на ваш дизайн, і через лічені секунди у вас буде повноцінний лендинг.

Code Ukraine

🌐 WebGL — 3D-графіка прямо у браузері

Якщо ти колись грав у браузерну гру з 3D, крутив інтерактивну модель або виводив щось неймовірне в Canvas — велика ймовірність, що за цим стоїть WebGL.

🔹 WebGL (Web Graphics Library) — це API для рендерингу 2D і 3D графіки у браузері через JavaScript без жодних плагінів.

💡 Як це працює?

Під капотом WebGL використовує OpenGL ES (мобільна версія OpenGL).
Ти малюєш графіку через шейдери (GLSL), налаштовуєш камеру, світло, геометрію — і браузер виконує це все за допомогою GPU 💪

➡️ Це створить 2D-полотно з фоном. Далі — вершини, шейдери, текстури, камери!

🛠 А якщо не хочеш все вручну?

Використовуй Three.js — бібліотеку, яка спрощує WebGL:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(...);
const renderer = new THREE.WebGLRenderer();

🚀 Де це застосовують?

— Ігри (Unity WebGL build, Babylon.js)
— Візуалізація даних
— 3D-моделі товарів (e-commerce)
— Навчальні симуляції
— NFT/Metaverse-проєкти

Хочеш пост з прикладом взаємодії миші з 3D-сценою? 🎯

#webgl #threejs #3d #графіка #js #програмування #візуалізація

Code Ukraine

🤯 Чоловік розповів про легкий спосіб отримати доступ до контенту на більшості сайтів із платною підпискою

Пробуємо.

Code Ukraine

🤖 Створюємо повноцінні веб-додатки з простого ескізу — навіть якщо це криво намальований прямокутник у Paint або помітка на серветці.

Не потрібно вміти ні дизайну, ні коду: достатньо завантажити накид, і нейромережа сама перетворить його на готовий, адаптивний інтерфейс.

Code Ukraine