JavaScript: dibujar un punto

Aprendamos a dibujar un punto en JavaScript en un navegador... no es técnicamente difícil, pero solo para aquellos que buscan a tientas y para aquellos que no están preparados para dibujar un punto en Internet; esto es, por supuesto, todo un logro.

Hay muchas formas de dibujar un punto, veámoslas

Constructores de juegos



Usando Unity/Godot/microStudio o cualquiera de los miles de creadores de juegos... todos crearán algún código de una forma u otra que será JavaScript o Webassembly, y aun así nos mostrarán el punto.No estamos interesados ​​en este camino.no entenderemos realmente lo que está pasando, el control sobre el código será mínimo e ilegible en el código fuente, además es enorme.

Marcos JavaScript

Este camino de los Jedi está lo más cerca posible de nosotros, porque.nuestro código no será grande y claro como el día, no abstraeremos mucho, no aumentaremos mucho nuestro código con bibliotecas.El control de código también sería genial

JavaScript puro

Este es, por supuesto, el camino de los Jedi.El código es lo más complicado posible, el máximo control de las cosas que, por así decirlo, no necesita ser controlado.Los códigos fuente son los más mínimos y con el conocimiento de JavaScript golimy, podemos ir a buscar trabajo con seguridad, porque.necesitamos gente así.

Pero nuestra tarea no es encontrar trabajo, sino dibujar un puntito de una manera sencilla y fácil.Nuestro vector es la velocidad y la flexibilidad.

Elegí la biblioteca

p5js para dibujar un punto.No es solo que, por supuesto, si la tarea fuera dibujar un punto y eso es todo, por supuesto, todo tendría que hacerse en JavaScript básico, pero lo estoy haciendo en perspectiva, .k.luego tú y yo haremos otras cosas que se verán increíbles, y para esto necesitamos una buena herramienta.Uno de ellos es p5js.

En golim JavaScript, necesitamos crear un lienzo para definir las funciones de inicialización y redibujado, en p5 esto también se hace, pero de manera muy concisa.

Pero primero..

Configuración mínima del entorno para el desarrollo de JavaScript

Descargar

p5.min.js y mantenerlo uno al lado del otro.

Me gusta esto

índice.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

boceto.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

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

Esto se abrirá en su navegador así:

Bueno, HTML es comprensible, pero ¿qué tipo de código JavaScript es este?

la función de configuración es la inicialización, se ejecuta una vez, en ella creamos un lienzo, es decirárea donde dibujaremos un punto.ventana.innerWidth, ventana.innerHeight

es el ancho y alto de la pantalla, es decirdefinimos un lienzo de pantalla completa y sí, el HTML también tiene un estilo muy importante para esto

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

No necesitamos inicializar nada más, solo necesitamos dibujar un punto.Mire el principio aquí ... la función dibujar se ejecuta, por ejemplo, 60 veces por segundo, y 60 veces por segundo dibujaremos nuestro punto ... parecería que esto es estúpido, solo necesitamos dibujar un punto y eso es pero en el futuro será la base para toda la animación en general.

En general, el código para dibujar un punto es extremadamente simple:

point(10,10)

¡y eso es!

Sin embargo, nuestro código es un poco más grande

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

fondo negro

estrella blanca

espesor de punto 10

y lo dibujamos en el centro de la vertical y la horizontal.

Bueno... dibujamos un punto en el lienzo, todo es como debería ser, pero incluso podríamos dibujarlo en HTML puro sin JavaScript... ¿Cómo se vería?

Lo hace elemental e incluso más fácil, pero los principios son completamente diferentes, aquí está el código final para dibujar un cuadrado en el centro de la pantalla.

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

El resultado es casi el mismo.

Sí, es bastante fácil dibujar algo en el centro en HTML, pero para agregar animaciones, y más aún un cuerdo interactivo, tendrás que pensar de acuerdo con los principios de CSS.Aunque es una tarea bastante interesante.Solo una cosa elemental elimina todo esto, no hay números aleatorios en CSS, esto eliminará todos nuestros intentos en el futuro, por lo que le daré menos preferencia a esta dirección.

Si me imagino que quiero hacer un cielo estrellado en CSS simple, entonces todo no funcionará para mí, porquelas estrellas deben aparecer en posiciones aleatorias, y si tienen coordenadas creadas previamente, no será tan hermoso ni tan simple, porque puedes escribir un generador de números aleatorios en CSS, pero dicho código se verá completamente feo, ilegible y difícil de ¡comprender!



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