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>

эскиз.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