{"id":252,"date":"2014-03-28T22:19:46","date_gmt":"2014-03-28T21:19:46","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=252"},"modified":"2021-08-06T18:09:43","modified_gmt":"2021-08-06T17:09:43","slug":"graficos-2-d","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/graficos-2-d\/","title":{"rendered":"Gr\u00e1ficos"},"content":{"rendered":"<p><span style=\"line-height: 1.5em;\">Se llaman gr\u00e1ficos (o gr\u00e1ficos 2-D) a todos los objetos que se pueden dibujar en un <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1746\">espacio R2<\/a>: <\/span><strong style=\"line-height: 1.5em;\">puntos, segmentos, curvas, arcos,<\/strong><span style=\"line-height: 1.5em;\"> (lugares geom\u00e9tricos de) <\/span><strong style=\"line-height: 1.5em;\">ecuaciones, textos, im\u00e1genes, macros,<\/strong><span style=\"line-height: 1.5em;\"> etc. Los gr\u00e1ficos de una escena pueden editarse usando el panel de configuraci\u00f3n de gr\u00e1ficos, al que se accede seleccionando \u00abGr\u00e1ficos\u00bb en la ventana de edici\u00f3n. Ha de se\u00f1alarse que este panel est\u00e1 accesible s\u00f3lo si hay definido al menos un espacio R2.<\/span><\/p>\n<p>El Panel de configuraci\u00f3n de <strong>Gr\u00e1ficos<\/strong> tiene este aspecto.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_graficos.jpg\"><img class=\" wp-image-257   aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_graficos.jpg\" alt=\"Panel de configuraci\u00f3n de Gr\u00e1ficos\" width=\"545\" height=\"346\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_graficos.jpg 851w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_graficos-300x190.jpg 300w\" sizes=\"(max-width: 545px) 100vw, 545px\" \/><\/a><\/p>\n<p align=\"justify\">A la izquierda aparece la lista de todos los gr\u00e1ficos de la escena (en este caso hay uno de cada tipo). A la derecha veremos un <em>panel<\/em> (que ser\u00e1 diferente para cada tipo de gr\u00e1fico) en el que se pueden editar todos los par\u00e1metros que definen al objeto gr\u00e1fico seleccionado en la lista.<\/p>\n<p align=\"justify\">Si en el men\u00fa de selecci\u00f3n que hay encima de la etiqueta azul gr\u00e1ficos se selecciona alg\u00fan espacio se mostrar\u00e1n s\u00f3lo los gr\u00e1ficos correspondientes a ese espacio, si se selecciona * se muestran todos los gr\u00e1ficos de esa escena.<\/p>\n<p align=\"justify\">Si se hace un clic sobre la etiqueta azul de <strong>Gr\u00e1ficos<\/strong>, aparecer\u00e1 una ventana con un \u00e1rea de texto que contiene el c\u00f3digo de todos los gr\u00e1ficos, uno en cada l\u00ednea. Este texto se puede editar manualmente y, pulsando <strong>aceptar,<\/strong> se actualiza el editor con los cambios realizados. Los autores experimentados encontrar\u00e1n este m\u00e9todo de edici\u00f3n muy c\u00f3modo y \u00fatil para cierto tipo de modificaciones.<\/p>\n<p align=\"justify\">Para crear un nuevo gr\u00e1fico hay que hacer un clic sobre el bot\u00f3n + . Al hacerlo aparece una ventana de di\u00e1logo con una lista en la que debe escogerse el tipo de gr\u00e1fico que se desea crear.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/agregar.jpg\"><img class=\" wp-image-258 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/agregar.jpg\" alt=\"agregar\" width=\"157\" height=\"180\"><\/a><\/p>\n<p style=\"text-align: left;\">Si se selecciona un gr\u00e1fico y se pulsa el bot\u00f3n -, dicho gr\u00e1fico se eliminar\u00e1. Y si se pulsa el bot\u00f3n etiquetado con *, se duplica el gr\u00e1fico seleccionado con el objeto de que pueda crearse un gr\u00e1fico tomando como referencia uno an\u00e1logo.<\/p>\n<p align=\"justify\">Hay doce tipos de gr\u00e1ficos diferentes: <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=521\"><strong>ecuaci\u00f3n<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=528\"><strong>curva<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=530\"><strong>sucesi\u00f3n<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=532\"><strong>punto<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=535\"><strong>segmento<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=537\"><strong>flecha<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=538\"><strong>pol\u00edgono<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=540\"><strong>arco<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=542\"><strong>relleno<\/strong><\/a>,&nbsp; <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=544\"><strong>texto<\/strong><\/a>, <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1072\"><strong>imagen<\/strong><\/a> y <a href=\"https:\/\/descartesjs.org\/documentacion\/?p=1642\"><strong>macro<\/strong><\/a>, y cada uno tiene su propio panel de configuraci\u00f3n.<\/p>\n<p align=\"justify\">Campos comunes<\/p>\n<p align=\"justify\">Los paneles de configuraci\u00f3n de los distintos tipos de gr\u00e1ficos se parecen entre s\u00ed pues la mayor\u00eda comparten algunos campos,&nbsp; concretamente, los que se muestran en el siguiente panel.<\/p>\n<p><a href=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_configuracion.jpg\"><img class=\"wp-image-259 aligncenter\" src=\"https:\/\/descartesjs.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_configuracion.jpg\" alt=\"panel_configuracion\" width=\"510\" height=\"150\" srcset=\"https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_configuracion.jpg 637w, https:\/\/reddescartes.org\/documentacion\/wp-content\/uploads\/2014\/03\/panel_configuracion-300x88.jpg 300w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>En la siguiente tabla se explican esos campos comunes a todos los gr\u00e1ficos.<\/p>\n<table border=\"0\">\n<thead>\n<tr>\n<td>Campos<\/td>\n<td>Descripci\u00f3n<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>espacio<\/strong><\/td>\n<td>Men\u00fa desplegable con la lista de los espacios de dos dimensiones que se hayan definido. Si s\u00f3lo hay un espacio de dos dimensiones y \u00e9ste no tiene&nbsp; nombre, la lista aparece vac\u00eda.Si hay m\u00e1s de un espacio, entonces debe seleccionarse el espacio al cual ha de pertenecer el gr\u00e1fico.<\/td>\n<\/tr>\n<tr>\n<td><strong>fondo<\/strong><\/td>\n<td>Si se selecciona <strong>fondo<\/strong>, el gr\u00e1fico s\u00f3lo se dibuja en el \u00abfondo\u00bb de la escena y por lo tanto se actualiza s\u00f3lo cuando se pulsa inicio y cuando se modifica la escala o la posici\u00f3n del origen (O.x y O.y). Cuando un gr\u00e1fico est\u00e1 siempre fijo en la escena, es decir, no depende de los controles ni de los auxiliares, conviene definirlo como de <strong>fondo<\/strong> pues as\u00ed se ahorra trabajo al procesador que no tendr\u00e1 que dibujarlo cada vez que hay un cambio en la escena.<\/td>\n<\/tr>\n<tr>\n<td><strong>dibujar-si<\/strong><\/td>\n<td>Es un campo de texto donde se puede escribir una <strong>expresi\u00f3n <\/strong>booleana.El gr\u00e1fico se dibuja si la expresi\u00f3n es vac\u00eda o si la expresi\u00f3n tiene valor verdadero (o &gt;0).Si la expresi\u00f3n depende de x o y y el gr\u00e1fico es una ecuaci\u00f3n, entonces s\u00f3lo se dibujan los puntos de la gr\u00e1fica que satisfacen la expresi\u00f3n.Si el valor de x o y hace que la expresi\u00f3n no se cumpla en el momento en que se va a dibujar un objeto, entonces no se dibuja (es responsabilidad del autor controlar el valor de las variables x e y fuera de las ecuaciones).<\/td>\n<\/tr>\n<tr>\n<td><strong>color<\/strong><\/td>\n<td>El bot\u00f3n sin etiqueta que aparece en general a la derecha de la primera l\u00ednea del panel de edici\u00f3n, muestra el color con que se dibujar\u00e1 el gr\u00e1fico.Haciendo un clic sobre el bot\u00f3n aparece la ventana de configuraci\u00f3n de colores (<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=656\">ver colores<\/a>).El color defecto de todos los gr\u00e1ficos es azul.Los gr\u00e1ficos de tipo imagen y macro no tienen color.Para flechas: Es el color de la orilla o borde de la flecha, su interior se dibuja en el color flecha.<\/td>\n<\/tr>\n<tr>\n<td><strong>expresi\u00f3n<\/strong><\/td>\n<td>Es un campo de texto. Su contenido debe ser una expresi\u00f3n cuyo contenido var\u00eda seg\u00fan el tipo de gr\u00e1fico. Por ejemplo en las curvas la expresi\u00f3n debe tener la forma (f(t),g(t)), donde f y g son funciones cualesquiera del par\u00e1metro t. El valor por defecto de la expresi\u00f3n tambi\u00e9n cambia seg\u00fan el tipo de gr\u00e1fico.En la documentaci\u00f3n de cada tipo de gr\u00e1fico se explica cual debe ser el contenido de la expresi\u00f3n y cu\u00e1l es el valores por defecto en cada tipo.Los gr\u00e1ficos arco, texto e imagen no tienen expresi\u00f3n. En el caso del arco la expresi\u00f3n se sustituye por campos para radio, inicio y fin.<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"center\"><strong>rastro<\/strong><\/p>\n<p style=\"text-align: center;\">(y su color)<\/p>\n<\/td>\n<td>Si se selecciona <strong>rastro<\/strong> el objeto gr\u00e1fico deja un rastro en la escena del color seleccionado. Para elegir un color hay que pulsar el bot\u00f3n cuadrado que aparece junto al selector (<a href=\"https:\/\/descartesjs.org\/documentacion\/?cat=30\">ver colores<\/a>).Cuando un gr\u00e1fico deja rastro se puede apreciar su trayectoria en la escena. Pulsando el bot\u00f3n de limpiar se borran los rastros de los gr\u00e1ficos.El valor por defecto es no seleccionado y el color del rastro por defecto es gris.<\/td>\n<\/tr>\n<tr>\n<td><strong>familia<\/strong><\/td>\n<td>Este selector permite convertir un gr\u00e1fico en toda una familia de gr\u00e1ficos dependiente de un par\u00e1metro. Al seleccionar familia se activan los otros campos de la \u00faltima l\u00ednea: <strong>par\u00e1metro<\/strong>, <strong>intervalo<\/strong> y <strong>pasos<\/strong>. y el autor puede as\u00ed configurar la familia.El valor por defecto es no seleccionado.<\/td>\n<\/tr>\n<tr>\n<td><strong>par\u00e1metro<\/strong><\/td>\n<td>Debe ser una sola palabra, de preferencia corta. Por defecto es <strong>s<\/strong>. El nombre del par\u00e1metro se puede utilizar en la definici\u00f3n del objeto gr\u00e1fico para definir la familia. El programa dibujar\u00e1 los gr\u00e1ficos con los valores del <strong>par\u00e1metro<\/strong> recorriendo el intervalo especificado en el n\u00famero de <strong>pasos<\/strong> elegido.<\/td>\n<\/tr>\n<tr>\n<td><strong>intervalo<\/strong><\/td>\n<td>Debe contener dos expresiones reales entre corchetes y separadas por una coma, es decir, [ti,tf].El intervalo por defecto es [0,1]. El <strong>par\u00e1metro<\/strong> recorre el intervalo definido entre ti y tf en el n\u00famero de pasos especificado.<\/td>\n<\/tr>\n<tr>\n<td><strong>pasos<\/strong><\/td>\n<td>El par\u00e1metro recorre el intervalo definido entre el primero y el segundo valor en el n\u00famero de pasos especificado y dibuja la curva como un pol\u00edgono con v\u00e9rtices (f(t),g(t)) cont = ti,t = ti+(tf-ti)\/pasos,t = ti+2*(tf-ti)\/pasos,etc&#8230; hasta llegar at = ti+pasos*(tf-ti)\/pasos = tf.En otras palabras, pasos es el&nbsp; n\u00famero de subintervalos iguales en que se divide el intervalo. y el par\u00e1metro pasa por los extremos de los subintervalos.<\/td>\n<\/tr>\n<tr>\n<td><strong>texto<\/strong><\/td>\n<td>Es una etiqueta que acompa\u00f1a al objeto gr\u00e1fico y se escribe cerca de su posici\u00f3n o algo que puede considerarse como su posici\u00f3n. Por ejemplo en un punto se escribe un poco arriba y a la derecha.Los textos se dibujan en el mismo color que el objeto gr\u00e1fico.Los textos pueden tener varias l\u00edneas y adem\u00e1s pueden incluir valores num\u00e9ricos variables (<a href=\"https:\/\/descartesjs.org\/documentacion\/?cat=33\">ver Textos<\/a>).El valor por defecto es vac\u00edo.<\/td>\n<\/tr>\n<tr>\n<td><strong>decimales<\/strong><\/td>\n<td>Es el n\u00famero de decimales con los que se escribir\u00e1n los n\u00fameros incluidos en el texto.Puede ser cualquier n\u00famero o expresi\u00f3n. Al evaluarse se redondea para decidir el n\u00famero de decimales.Su valor por defecto es 2.<\/td>\n<\/tr>\n<tr>\n<td><strong>fijo<\/strong><\/td>\n<td>Determina si el n\u00famero de decimales es fijo o si, por el contrario, se usa la notaci\u00f3n \u00abajustada\u00bb en la que se eliminan los ceros innecesarios y el punto decimal si tambi\u00e9n es innecesario.Por ejemplo: en lugar de 25.3400 se escribe 25.34 y en lugar de 13.0 se escribe 13 (sin punto decimal).Si se usa notaci\u00f3n exponencial siempre se escriben los n\u00fameros en forma ajustada, es decir, el atributo fijo no interviene en ese caso.El valor por defecto es fijo=si.<\/td>\n<\/tr>\n<tr>\n<td><strong>coord_abs<\/strong><\/td>\n<td>Hace que el gr\u00e1fico se interprete en pixels y en coordenadas absolutas con el origen en el v\u00e9rtice superior izquierdo del rect\u00e1ngulo del espacio al que pertenece el gr\u00e1fico y la escala igual a 1 pixel por unidad.Los gr\u00e1ficos definidos en coordenadas absolutas no se mueven al cambiar el origen del sistema o la escala.<\/td>\n<\/tr>\n<tr>\n<td><strong>tama\u00f1o<\/strong><\/td>\n<td>Para puntos: es el radio del \u00abpunto\u00bb. En realidad el programa dibuja un disco de radio tama\u00f1o. Si tama\u00f1o=0 el punto no se dibuja. Esto \u00faltimo puede aprovecharse para dibujar textos asociados a puntos visibles, usando las coordenadas del espacio.Para segmentos: es el radio de los extremos del segmento, que se dibujan como dos discos.Para sucesiones: es el radio de los \u00abpuntos\u00bb de la sucesi\u00f3n. En realidad el programa dibuja discos de radio tama\u00f1o. Si tama\u00f1o=0 los puntos no se dibujan.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-family: Arial;\"><span style=\"font-size: small;\"><i><b>&nbsp;<\/b><\/i><\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se llaman gr\u00e1ficos (o gr\u00e1ficos 2-D) a todos los objetos que se pueden dibujar en un espacio R2: puntos, segmentos, curvas, arcos, (lugares geom\u00e9tricos de) ecuaciones, textos, im\u00e1genes, macros, etc. Los gr\u00e1ficos de una escena pueden editarse usando el panel de configuraci\u00f3n de gr\u00e1ficos, al que se accede seleccionando \u00abGr\u00e1ficos\u00bb en la ventana de edici\u00f3n. Ha de se\u00f1alarse que este panel est\u00e1 accesible s\u00f3lo si hay definido al menos un espacio R2. El Panel de configuraci\u00f3n de Gr\u00e1ficos tiene este aspecto. A la izquierda aparece la lista de todos los gr\u00e1ficos de la escena (en este caso hay uno de<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/graficos-2-d\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[38],"tags":[6],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/252"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":75,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":3423,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/252\/revisions\/3423"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}