JavaScript: малюємо крапку

Давайте навчимося малювати точку на JavaScript в браузері.. це технічно не складно, але тільки для тих хто нишпорить, а для тих хто не підготовлений намалювати точку в інтернеті - це звичайно ціле досягнення.

Є безліч шляхів малювання точки, давайте розглянемо їх

Конструктори ігор



Використовуючи Unity/Godot/microStudio або будь-яку з тисяч конструкторів ігор.. всі вони створять так чи інакше якийсь код, який буде JavaScript або Webassembly, і таки покаже нам точку.Нас цей шлях цікавить т.к.ми не особливо зрозуміємо, що відбувається, контроль над кодом буде мінімальним і у вихідниках не читаємо, до того ж величезний.

JavaScript Фреймворки

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

Чистий JavaScript

Це звичайно є шлях джедая.Код максимально складний, максимальний контроль речей яких і контролювати не треба.Вихідники наймінімальніші і зі знаннями голимого 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 можна, але такий код буде абсолютно потворно, нечитаемо і важко розуміємо!



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese