Давайте навчимося малювати точку на JavaScript в браузері.. це технічно не складно, але тільки для тих хто нишпорить, а для тих хто не підготовлений намалювати точку в інтернеті - це звичайно ціле досягнення.
Є безліч шляхів малювання точки, давайте розглянемо їх
Використовуючи Unity/Godot/microStudio або будь-яку з тисяч конструкторів ігор.. всі вони створять так чи інакше якийсь код, який буде JavaScript або Webassembly, і таки покаже нам точку.Нас цей шлях цікавить т.к.ми не особливо зрозуміємо, що відбувається, контроль над кодом буде мінімальним і у вихідниках не читаємо, до того ж величезний.
Цей шлях джедая гранично наближений до нас, т.к.код наш буде не великим і ясним як день, ми не сильно абстрагуємося, не сильно збільшимо код бібліотеками.Контроль над кодом теж буде чудовим
Це звичайно є шлях джедая.Код максимально складний, максимальний контроль речей яких і контролювати не треба.Вихідники наймінімальніші і зі знаннями голимого JavaScript ми можемо сміливо йти влаштовуватися працювати,т.к.такі люди нам потрібні.
Але наше завдання не знайти роботу, а намалювати точку простим та легким способом.Наш вектор це швидкість та гнучкість.
Я вибрав бібліотеку
p5js щоб намалювати точку.Не просто так звичайно, якби завдання стояло малювати крапку і все, звичайно, треба було б все зробити на голому JavaScript, але я роблю це перспективу, .к.потім ми з вами робитимемо інші речі, які будуть виглядати приголомшливо, і нам для цього потрібен хороший інструмент.Один з них це p5js.У голимому JavaScript нам необхідно створити canvas визначити функції ініціалізації та перемальовки, в p5 це робиться теж, але дуже лаконічно.
Але спочатку..
Мінімальна Настройка оточення для розробки JavaScript Створіть
Завантажте
p5.min.js і збережіть теж поряд.ось так
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
В результаті у вас у браузері відкриється таке
Ну HTML зрозуміло, а що це за JavaScript код?
функція setup це ініціалізація, виконується вона раз, у ній ми створюємо канвас, тобто.область де будемо малювати крапку.window.innerWidth, window.innerHeight
це ширина та висота екрана, тобто.ми визначаємо канвас на весь екран і так, в HTML дуже важливий стиль для цього вказано теж
<body style="margin: 0px;">
Більше ініціалізувати нам нічого не треба, а просто треба намалювати крапку.Тут дивіться який принцип.. функція draw виконується наприклад 60 разів на секунду, і 60 разів на секунду ми будемо малювати нашу точку. всієї анімації.
Взагалі код малювання точки вкрай простий:
point(10,10)
і все !
Однак наш код трохи більший
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
чорний фон
зірка біла
товщина точки 10
і малюємо ми її центром вертикалі і горизонталі.
Що ж.. ми намалювали крапку на канвасі, все як годиться, але але ми могли взагалі намалювати її і на чистому HTML без усяких JavaScript. Як це б виглядало?
Робить це просто і навіть простіше, але принципи зовсім інші, ось кінцевий код малювання вже квадратика в центрі екрану
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
<div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>
Результат майже той самий
Так намалювати щось в центрі в HTML можна цілком легко, але щоб додати анімацій і тим більше осудного інтерактиву доведеться мислити вже за принципами CSS.Хоч і цілком цікаве завдання.Тільки ось вбиває все це одна елементарна річ, у CSS немає випадкових чисел, це надалі уб'є всі наші потуги, саме тому цьому напрямку я віддам менше переваги.
Якщо уявити, що я хочу зробити зоряне небо на голому CSS, то все у мене нічого не вийде, т.к.зірки повинні з'являтися у випадкових позиціях, а якщо у них будуть заздалегідь створені координати, це буде і не так красиво і не так просто, адже Генератор випадкових чисел написати на CSS можна, але такий код буде абсолютно потворно, нечитаемо і важко розуміємо!