From 342b1f4ec7ebcd6445058d8be4d18cdf9bb5985d Mon Sep 17 00:00:00 2001
From: Christian Julian Jimenez <zs22016079@estudiantes.uv.mx>
Date: Wed, 12 Feb 2025 07:55:45 -0600
Subject: [PATCH] Actualizado el archivo README.md
---
.README.md.swp | Bin 0 -> 12288 bytes
index.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 110 insertions(+)
create mode 100644 .README.md.swp
create mode 100644 index.html
diff --git a/.README.md.swp b/.README.md.swp
new file mode 100644
index 0000000000000000000000000000000000000000..cd747edc3f6e4a9ad1b7169f2054a20477d6e462
GIT binary patch
literal 12288
zcmeI&y-ve05C?D<kYGU|cmV@5O$%aRtXd>8R79ldT3wT)a+SoDlkhdbz`HQfr{D$P
zMc@^1N?>3pD^!0=(Zy%W%Kf&;H*ECXt~{<cg&mthtUf-C_(6!3H6g}Dtf<WYGETig
z-);8-zj-uw=iTf;=Pc!pQI{<DWsurvG8IuI`)nvQ#Vw`e^f*j)tVhpN%4Az7lOm^3
z>6Bv59G|aqEqzWn%MCjn&d3-Y$67`#eSMK%kxhF>C2XWeCR7wVEx+x$1JCFi4s-3C
zpR_vNlX?=({a`FYV4(!o#o<A-QI@o~yCb)^f`zIM#XtZ85P$##AOHafKmY>s1@cKv
z+}kZn)wbm-)_%lliU0u!KmY;|fB*y_009U<00Izzz&{iqdjme*5aQK7<^BKH|Npz4
zzg78{at#9l5P$##AOHafKmY;|fB*y_0D-?F5TtTab-9=Q@R1r8W1Y!a|GRDb{e1au
Ggcl!6#9B81
literal 0
HcmV?d00001
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d33f75e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Canvas Cuadriculado con Pincel ASCII</title>
+ <style>
+ body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f4f4f4;
+ flex-direction: column;
+ }
+ canvas {
+ border: 1px solid black;
+ background-color: white;
+ cursor: crosshair;
+ }
+ select {
+ margin-bottom: 10px;
+ }
+ </style>
+</head>
+<body>
+ <select id="seleccionAscii">
+ <option value="*">*</option>
+ <option value="#">#</option>
+ <option value="@">@</option>
+ <option value="&">&</option>
+ <option value="%">%</option>
+ </select>
+ <input type="color" value="#000000" id="colorPicker">
+ <canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
+ <script>
+ const lienzo = document.getElementById("lienzoCuadriculado");
+ const contexto = lienzo.getContext("2d");
+ const tamanoCuadricula = 20; // Tamaño de cada celda en píxeles
+ let dibujando = false;
+ const seleccionAscii = document.getElementById("seleccionAscii");
+
+ // Mapa para almacenar los caracteres dibujados
+ const caracteresEnPosiciones = new Map();
+
+ function dibujarCuadricula() {
+ contexto.strokeStyle = "#ddd";
+ for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
+ contexto.beginPath();
+ contexto.moveTo(x, 0);
+ contexto.lineTo(x, lienzo.height);
+ contexto.stroke();
+ }
+ for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
+ contexto.beginPath();
+ contexto.moveTo(0, y);
+ contexto.lineTo(lienzo.width, y);
+ contexto.stroke();
+ }
+ }
+
+ function obtenerPosicionAjustada(posicion) {
+ return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
+ }
+
+ function dibujarAscii(x, y) {
+ const ascii = seleccionAscii.value;
+ const posicionClave = `${x},${y}`;
+ const caracterActual = caracteresEnPosiciones.get(posicionClave);
+
+ // Solo dibuja si la celda está vacía o si el carácter es diferente
+ if (!caracterActual || caracterActual !== ascii) {
+ // Limpia la celda antes de dibujar
+ contexto.clearRect(x, y, tamanoCuadricula, tamanoCuadricula);
+ // Redibuja la línea de la cuadrícula para esa celda
+ contexto.strokeStyle = "#ddd";
+ contexto.strokeRect(x, y, tamanoCuadricula, tamanoCuadricula);
+
+ // Dibuja el nuevo carácter
+ contexto.font = `${tamanoCuadricula}px monospace`;
+ contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
+
+ // Almacena el nuevo carácter en el mapa
+ caracteresEnPosiciones.set(posicionClave, ascii);
+ }
+ }
+
+ lienzo.addEventListener("mousedown", (evento) => {
+ dibujando = true;
+ const x = obtenerPosicionAjustada(evento.offsetX);
+ const y = obtenerPosicionAjustada(evento.offsetY);
+ dibujarAscii(x, y);
+ });
+
+ lienzo.addEventListener("mousemove", (evento) => {
+ if (dibujando) {
+ const x = obtenerPosicionAjustada(evento.offsetX);
+ const y = obtenerPosicionAjustada(evento.offsetY);
+ dibujarAscii(x, y);
+ }
+ });
+
+ lienzo.addEventListener("mouseup", () => {
+ dibujando = false;
+ });
+
+ dibujarCuadricula();
+ </script>
+</body>
+</html>
\ No newline at end of file