Blog WeMake

58 – Dibujando en grillas

Posted on Oct 30, 2022 – - by Franco
Cover del post

Como siguiente proyecto, se me ocurrió hacer un pequeño programa de dibujo discreto usando el Canvas API.

A diferencia de otros programas similares como el excelente Excalidraw, en este solo vamos a poder dibujar en una grilla pre-difinida. Es decir no vamos a poder hacer curvas ni circulos. solo podremos hacer lineas rectas, rectángulos y líneas con ángulos de 90 grados (rectos).

El plan para este proyecto es el siguiente:

  1. Definir qué va a poder hacer el programa, definir un diseño tentativo en Figma y codificar el esqueleto. (Este artículo.)
  2. En base a lo especificado, lograr dibujar en el canvas (nuestro lienzo) una serie de puntos en base a una grilla de 25px (entre filas y columnas).
  3. Implementar un dibujador en un solo color (rojo), y a mano alzada, es decir sin considerar la restricción de la grilla.
  4. Restringir el dibujo a solo utilizar la grilla tomando el punto mas cercano al correcto en la grilla.
  5. Mejorar la experiencia del usuario para hacer lineas continuas que se "peguen" a la cuadrícula y funcione como lineas, no como un lápiz.
  6. Agregar la opción de ver nuestro diseño desde una perspectiva isomórfica. El último punto en realidad no tiene mucho que ver con el diseñador pero suena como un pequeño reto interesante y podría ser útil para alguien.

Prototipo

Definamos la estructura de nuestra demo. Lo más importante es el lienzo, asi que trataremos de maximizarlo en la IU. Luego una barra de herramientas que podamos expandir más adelante si queremos anadir funcionalidades adicionales. Por último, una breve descripción e instrucciones asi como el nombre tentantivo de nuestra herramienta "Diagramador Discreto".

/posts/2022-10-30-grid-drawing-hero.png

Aquí, nuestra nuestra primera versión, no es muy hermoso ni detallado pero es suficientemente bueno como para empezar. Luego podemos revisar el diseño.

Maqueta

La estructura para nuestro programa entonces es la siguiente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Grid Drawing</title>
        <style type="text/css" media="screen">
          /* Inserta CSS Aquí */
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <aside>
            <h1>Dibujador discreto</h1>
            <p>
                Este es un dibujador discreto, es decir que solamente
                podrás dibujar en la grilla pre-establecida.
            </p>
            <p> Empieza a dibujar! </p>
            <p> Cuando termines presiona el “isomórfico” para
              cambiar la perspectiva de tu dibujo
            </p>
            <hr />
            <button>Limpiar</button>
            <button>Isomórfico</button>
        </aside>
        <script type="text/javascript">
          // Inserta JS aquí
        </script>
    </body>
</html>

Esto produce el siguiente HTML

/posts/2022-10-30-grid-drawing-html.png

Agreguemos un poco de CSS para que se vea mejor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

body{
    display: flex;
    font-family: Helvetica, Arial, sans-serif;
    padding-top: 5rem;
    width: 1280px;
    margin: 0 auto;
}
canvas{
    width: 986px;
    height: 669px;
    border: 5px solid black;
    border-bottom: 10px solid black;
}
h1 {
    margin-top: 5px;
}
aside{
    padding: 0px 10px;
}
hr {
    margin-top: 22rem;
    border: none;
}
button {
    background: black;
    width: 100%;
    margin-top: 10px;
    height: 50px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border: none;
}

/posts/2022-10-30-grid-drawing-css.png

Listo, ya tenemos el diseño y la estructura general de nuestro programa. En el siguiente blog veremos como dibujar utilizando el mouse. Todo el código completo de esta primera parte la adjunto a continuación, y espero que vean la siguiente parte. (La adjunto aquí cuando esté disponible)

Código: (Parte 1)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Grid Drawing</title>
        <style type="text/css" media="screen">
         body{
             display: flex;
             font-family: Helvetica, Arial, sans-serif;
             padding-top: 5rem;
             width: 1280px;
             margin: 0 auto;
         }
          canvas{
              width: 986px;
              height: 669px;
              border: 5px solid black;
              border-bottom: 10px solid black;
          }
         h1 {
             margin-top: 5px;
         }
         aside{
             padding: 0px 10px;
         }
         hr {
             margin-top: 22rem;
             border: none;
         }
         button {
             background: black;
             width: 100%;
             margin-top: 10px;
             height: 50px;
             color: white;
             font-size: 20px;
             font-weight: bold;
             border: none;
         }
        </style>

    </head>
    <body>
        <canvas id="canvas"></canvas>
        <aside>
            <h1>Dibujador discreto</h1>
            <p>
                Este es un dibujador discreto, es decir que solamente
                podrás dibujar en la grilla pre-establecida.
            </p>
            <p> Empieza a dibujar! </p>
            <p> Cuando termines presiona el “isomórfico” para
              cambiar la perspectiva de tu dibujo
            </p>
            <hr />
            <button>Limpiar</button>
            <button>Isomórfico</button>
        </aside>
        <script type="text/javascript">
          // Inserta JS aquí
        </script>
    </body>
</html>