hugoruscitti/pilas

{
    "content": "<h1 id=\"dibujado-simple-en-pantalla\">Dibujado simple en pantalla</h1>\n<p>Hasta ahora hemos mostrado en la pantalla\nfondos y actores que originalmente estaban\nalmacenados en el disco de la computadora\nc\u00f3mo im\u00e1genes.</p>\n<p>En esta secci\u00f3n veremos como dibujar libremente, ya\nsean lineas, c\u00edrculos, texto etc..</p>\n<p>Comenzaremos con una forma de dibujado muy\nsencilla, y luego veremos algunas alternativas\nque ofrecen mas flexibilidad.</p>\n<p>Ten en cuenta que el dibujo avanzado y mas flexible\nlo vamos a ver en el siguiente cap\u00edtulo <strong>Dibujo avanzado\ncon Superficies</strong>.</p>\n<h2 id=\"usando-la-tortuga-para-dibujar\">Usando la Tortuga para dibujar</h2>\n<p>El actor <code>Tortuga</code> est\u00e1 inspirado en una de\nlas actividades mas divertidas, did\u00e1cticas y simb\u00f3licas\ndel lenguaje de programaci\u00f3n <strong>logo</strong>, creado\npor <strong>Seymour Papert</strong>.</p>\n<p>La <code>Tortuga</code> b\u00e1sicamente es un actor que sabe\ndibujar sobre la ventana de pilas. Para ello el\nprogramador tiene que indicarle a la tortuga qu\u00e9\nmovimiento debe realizar.</p>\n<p>La siguiente imagen muestra lo que podr\u00eda\ndibujar la tortuga con algunas sentencias de\nmovimientos:</p>\n<p><img alt=\"\" src=\"../imagenes/dibujado_simple_en_pantalla/tortuga_dibuja_triangulo.jpg\" /></p>\n<p>La imagen no alcanza a mostrar por completo el\nconcepto, pero en pocas palabras se puede sintetizar\nlo que realmente hace.</p>\n<p>El dibujo de la imagen anterior es una traza que\nva dibujando la tortuga a partir de su movimiento.</p>\n<p>El siguiente c\u00f3digo es el que se utiliz\u00f3 para\ndibujar esa linea de dos colores:</p>\n<pre><code class=\"python\">import pilasengine\n\npilas = pilasengine.iniciar()\n\ntortuga = pilas.actores.Tortuga()\ntortuga.avanzar(30)\ntortuga.color = pilas.colores.azul\ntortuga.avanzar(200)\n</code></pre>\n\n<p>Algo muy valioso en t\u00e9rminos did\u00e1cticos, es que\nuno podr\u00eda animarse a realizar dibujos simples c\u00f3mo\nuna casa, un hex\u00e1gono o cualquier otra figura dise\u00f1ando una estrategia\nde movimiento para la tortuga.</p>\n<h2 id=\"inspeccionando-a-la-tortuga\">Inspeccionando a la tortuga</h2>\n<p>Para manejar a este actor tienes varios comandos\ninspirados en logo.</p>\n<p>Esta es una lista de los comandos mas utilizados:</p>\n<table>\n<thead>\n<tr>\n<th>M\u00e9todo completo</th>\n<th>nombre corto</th>\n<th>ejemplo</th>\n<th>\u00bfque hace?</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>avanzar</td>\n<td>av</td>\n<td><code>tortuga.av(10)</code></td>\n<td>avanza en direcci\u00f3n a donde mira la tortuga.</td>\n</tr>\n<tr>\n<td>giraderecha</td>\n<td>gd</td>\n<td><code>tortuga.gd(45)</code></td>\n<td>gira hacia la derecha los grados indicados.</td>\n</tr>\n<tr>\n<td>giraizquierda</td>\n<td>gi</td>\n<td><code>tortuga.gi(45)</code></td>\n<td>gira hacia la izquierda los grados indicados.</td>\n</tr>\n<tr>\n<td>subelapiz</td>\n<td>sl</td>\n<td><code>tortuga.sl()</code></td>\n<td>deja de dibujar cuando se mueve la tortuga.</td>\n</tr>\n<tr>\n<td>bajalapiz</td>\n<td>bl</td>\n<td><code>tortuga.bl()</code></td>\n<td>comienza a dibujar cuando la tortuga se mueve.</td>\n</tr>\n<tr>\n<td>pon_color</td>\n<td>pc</td>\n<td><code>tortuga.pc(pilas.colores.rojo)</code></td>\n<td>dibuja con el color indicado.</td>\n</tr>\n<tr>\n<td>pintar</td>\n<td>pintar</td>\n<td><code>tortuga.pintar(pilas.colores.blanco)</code></td>\n<td>pinta toda la pantala del mismo color.</td>\n</tr>\n</tbody>\n</table>\n<p>Por supuesto hay algunos mas, pero esos quedan para\ninvestigar en la clase propiamente dicha. Recuerda que\nel auto-completado del int\u00e9rprete de python es bastante\n\u00fatil para estas cosas.</p>\n<h2 id=\"usando-una-pizarra\">Usando una Pizarra</h2>\n<p>Si quieres dibujar sobre la pantalla pero\nde forma inmediata y con algunas posibilidades mas\nelaboradas, puedes\nusar un actor llamado <code>Pizarra</code>. Esta no es la\nforma mas avanzada, pero es el siguiente paso despu\u00e9s\nde dominar al actor <code>Tortuga</code>.</p>\n<p>Este actor <code>Pizarra</code> es c\u00f3mo un lienzo invisible sobre\nel que podemos pintar im\u00e1genes, figuras\ngeom\u00e9tricas y trazos de cualquier tipo. De hecho, el actor\n<code>Tortuga</code> que vimos antes, en realidad estaba\ndibujando sobre una pizarra, solo que lo hac\u00eda con\nanimaciones y algo lento.</p>\n<p>Comencemos con algo sencillo: para crear la pizarra y\ndibujar un punto en el centro de la\npantalla se puede usar el siguiente\nc\u00f3digo:</p>\n<pre><code class=\"python\">pizarra = pilas.actores.Pizarra()\npizarra.dibujar_punto(0, 0)\n</code></pre>\n\n<p>incluso podr\u00edas usar el argumento opcional <code>color</code>\nsi prefieres otro color, o trazar una linea:</p>\n<pre><code class=\"python\">pizarra.linea(0, 0, 200, 200, pilas.colores.verdeoscuro, grosor=5)\n</code></pre>\n\n<p><img alt=\"\" src=\"../imagenes/dibujado_simple_en_pantalla/linea.jpg\" /></p>\n<h2 id=\"pintando-imagenes\">Pintando im\u00e1genes</h2>\n<p>Las pizarras tambi\u00e9n pueden dibujar im\u00e1genes sobre la superficie,\ny esto es \u00fatil cuando quieras crear pinceles especiales sobre\nla pizarra o construir un escenario usando bloques tipo\nladrillos.</p>\n<p>Para pintar una imagen solo tienes que cargarla e\nindicarla a la pizarra que la dibuje en una posicion determinada.</p>\n<pre><code>imagen = pilas.imagenes.cargar(\"pelota.png\")\npizarra.pintar_imagen(imagen, 0, 0)\n</code></pre>\n<p>As\u00ed se ver\u00e1:</p>\n<p><img alt=\"\" src=\"../imagenes/dibujado_simple_en_pantalla/pizarra_imagen.jpg\" /></p>\n<p>Ten en cuenta que en estos casos, cuando estamos dibujando\nuna imagen sobre otra, el punto destino (x, y) siempre indica\nla esquina superior izquierda de la imagen, no el centro u\notra posici\u00f3n relativa como en el caso de los actores.</p>\n<h2 id=\"pintando-porciones-de-imagenes\">Pintando porciones de im\u00e1genes</h2>\n<p>Hay ocasiones en las que te resultar\u00e1 \u00fatil poder\npintar solamente porciones de una imagen sobre otra. Para\nestos casos est\u00e1 el m\u00e9todo <code>pintar_parte_de_imagen</code>.</p>\n<p>Veamos la definici\u00f3n del m\u00e9todo::</p>\n<pre><code>def pintar_parte_de_imagen(self, imagen, origen_x, origen_y, ancho, alto, x, y):\n</code></pre>\n<h2 id=\"dibujando-grillas\">Dibujando grillas</h2>\n<p>De manera similar a las im\u00e1genes normales, sobre las pizarras\ntambi\u00e9n se pueden pintar grillas.</p>\n<p>Solamente tenemos que crear la grilla, seleccionar el\ncuadro de animaci\u00f3n y despu\u00e9s decirle a la pizarra\nque pinte el cuadro actual de la grilla:</p>\n<pre><code>grilla = pilas.imagenes.cargar_grilla(\"pingu.png\", 10)\npizarra.pintar_grilla(grilla, 0, 0)\n</code></pre>\n<p>As\u00ed se ver\u00e1:</p>\n<p><img alt=\"\" src=\"../imagenes/dibujado_simple_en_pantalla/pizarra_grilla.jpg\" /></p>\n<p>Esto es \u00fatil cuando se quieren pintar bloques de un escenario\ncompleto, por ejemplo podr\u00edamos tener una grilla con distintos\ntipos de suelos (pasto, piedra, tierra) y luego ir\nimprimiendo sobre una pizarra para formar un escenario completo.</p>\n<h2 id=\"la-pizarra-como-actor\">La pizarra como actor</h2>\n<p>Recuerda que la pizarra tambi\u00e9n es un actor, as\u00ed que puedes ense\u00f1arle\nhabilidades, cambiar su posici\u00f3n, rotaci\u00f3n o lo que quieras.</p>\n", 
    "url": "/dibujado_simple_en_pantalla/", 
    "language": "en", 
    "title": "Dibujado simple en pantalla"
}