JavaScript: draw a point

Let's learn how to draw a point in JavaScript in the browser.. it's technically not difficult, but only for those who fumble, and for those who are not prepared to draw a dot on the Internet - it's certainly a whole achievement.

There are a lot of ways to draw a point, let's look at them

Game Designers



Using Unity/Godot/microStudio or any of thousands of game designers.. all of them will create some code one way or another that will be JavaScript or Webassembly, and still show us the point. We are not interested in this path because we will not really understand what is happening, control over the code will be minimal and unreadable in the source code, besides huge.

JavaScript Frameworks

This path of the Jedi is as close to us as possible, because our code will not be big and clear as day, we will not abstract much, we will not greatly increase our code with libraries. Code control will be fine too

Pure JavaScript

This is of course the way of the Jedi.The code is as complicated as possible, the maximum control of things which, as it were, does not need to be controlled.The source codes are the most minimal and with the knowledge of golimy JavaScript, we can just safely go to get a job, because.we need such people.

But our task is not to find a job, but to draw a dot in a simple and easy way.Our vector is speed and flexibility.

I chose the library

p5js to draw a dot.It’s not just that, of course, if the task was to draw a point and that’s it, of course, everything would have to be done in bare JavaScript, but I’m doing this in perspective, .k.then you and I will do other things that will look amazing, and we need a good tool for this.One of them is p5js.

In golim JavaScript, we need to create a canvas to define the initialization and redrawing functions, in p5 this is done too, but very concisely.

But first..

Minimum Environment Setup for JavaScript Development

Download

p5.min.js and keep it side by side.

like this

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);
    }

As a result, your browser will open like this

Well, HTML is understandable, but what kind of JavaScript code is this?

the setup function is initialization, it is executed once, in it we create a canvas, i.e.area where we will draw a point.window.innerWidth, window.innerHeight

is the width and height of the screen, i.e.we define a full-screen canvas and yes, the HTML has a very important style for this too

<body style="margin: 0px;">

We don't need to initialize anything else, we just need to draw a dot.Look at the principle here .. the draw function is executed, for example, 60 times per second, and 60 times per second we will draw our point .. it would seem that this is stupid, we just need to draw a point and that’s it, but in the future it will be the basis for general all animation.

In general, the code for drawing a point is extremely simple:

point(10,10)

and all!

However, our code is slightly larger

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

background black

white star

dot thickness 10

and we draw it in the center of the vertical and horizontal.

Well.. we drew a dot on the canvas, everything is as it should be, but we could even draw it on pure HTML without any JavaScript.. What would it look like?

It makes it elementary and even easier, but the principles are completely different, here is the final code for drawing a square in the center of the screen

<!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>

The result is almost the same

Yes, it is quite easy to draw something in the center in HTML, but in order to add animations, and even more so a sane interactive, you will have to think according to the principles of CSS.Although it is quite an interesting task.Only one elementary thing kills all this, there are no random numbers in CSS, this will kill all our attempts in the future, which is why I will give less preference to this direction.

If I imagine that I want to make a starry sky on bare CSS, then everything will not work out for me, becausestars should appear in random positions, and if they have pre-created coordinates, it will not be so beautiful and not so simple, because you can write a random number generator in CSS, but such code will look completely ugly, unreadable and hard to understand!



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