{"id":14382,"date":"2015-07-22T16:12:30","date_gmt":"2015-07-22T21:12:30","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/ccpg1001\/?p=13427"},"modified":"2026-04-10T11:41:29","modified_gmt":"2026-04-10T16:41:29","slug":"graficas-2d-interactivas","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/algoritmos101\/fp-u08\/graficas-2d-interactivas\/","title":{"rendered":"8.7 Gr\u00e1ficas 2D interactivas - matplotlib.widgets"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<div class=\"wp-block-group has-medium-font-size is-layout-flex wp-block-group-is-layout-flex\">\n<p>Gr\u00e1ficas <a href=\"#interactivas\">interactivas<\/a><\/p>\n\n\n\n<p><a href=\"#algoritmo\">algoritmo<\/a><\/p>\n\n\n\n<p><a href=\"#ejemplos\">ejemplos<\/a><\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"interactivas\">1. Gr\u00e1ficas interactivas<\/h2>\n\n\n\n<p>Para mostrar el uso de una variable en una funci\u00f3n matem\u00e1tica, se puede usar las gr\u00e1ficas interactivas. La librer\u00eda Matplotlib dispone de los componentes que permiten seleccionar valores de manera din\u00e1mica y ajustar la gr\u00e1fica 2D sin tener que detener y volver a ejecutar el algoritmo.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"http:\/\/blog.espol.edu.ec\/algoritmos101\/files\/2025\/04\/coseno_Interactivo01.gif\" alt=\"coseno gr\u00e1fica interactiva\" class=\"wp-image-16177\" \/><\/figure>\n\n\n\n<p>Si ya conoces c\u00f3mo realizar la gr\u00e1fica para una <a href=\"https:\/\/blog.espol.edu.ec\/algoritmos101\/ss-u01\/senales-continuas\/\" data-type=\"post\" data-id=\"17795\">funci\u00f3n senoidal<\/a> y quieres observar el efecto de cambiar el valor de la amplitud de forma interactiva puedes usar una barra de desplazamiento.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"475\" src=\"http:\/\/blog.espol.edu.ec\/algoritmos101\/files\/2025\/04\/grafica2DinteractivasSin01.png\" alt=\"gr\u00e1fica 2D interactivas sin(x)\" class=\"wp-image-16178\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"147\" height=\"384\" src=\"http:\/\/blog.espol.edu.ec\/algoritmos101\/files\/2025\/04\/grafica2DinteractivasSin02.png\" alt=\"gr\u00e1fica 2D interactivas Barra deslizante\" class=\"wp-image-16179\" \/><\/figure>\n\n\n\n<p>La barra se conoce como <code>Slider<\/code> que se encuentra en <code>matplotlib.widgets<\/code>y requiere dos partes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>definir la barra<\/li>\n\n\n\n<li>actualizar valores<\/li>\n<\/ul>\n\n\n\n<p>Por ejemplo, para interactuar con la <strong>amplitud<\/strong> se define <code>ampl_slider<\/code> como una barra ubicada en <code>amp_donde<\/code>, con etiqueta <code>'ampl'<\/code>, valor m\u00ednimo <code>0.2<\/code> y valor m\u00e1ximo <code>y_max<\/code>. Los cambios de valor al desplazar la barra de determinan con <code>valstep<\/code>, para este caso con pasos de 0.1.<\/p>\n\n\n\n<p>La variable se inicializa con el valor dado en <code>freq<\/code> y se dibuja en sentido <code>'vertical'<\/code>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; gutter: false; title: ; notranslate\" title=\"\">\n# amplitud slider amp_donde, &#x5B;x,y,ancho,alto]\nampl_donde = plt.axes(&#x5B;0.1, 0.25, 0.03, 0.65])\nampl_slider = Slider(ampl_donde, 'ampl', 0.2, y_max,\n                     valinit=ampl, valstep = 0.1,\n                     orientation='vertical')\n<\/pre><\/div>\n\n\n<p>Para cambiar los valores cuando se desplaza la barra o <code>Slider<\/code>, se crea un procedimiento de actualizaci\u00f3n de gr\u00e1fica <code>grafico_actualiza()<\/code>. Se obtiene el valor de la variable <code>ampl<\/code> desde <code>ampl_slider.val<\/code>. Se actualiza los valores de la funci\u00f3n <code>fi<\/code> que actualiza la <code>linea<\/code> del gr\u00e1fico y que finalmente actualiza la figura. Para relacionar los cambios generados por el <code>Slider<\/code> con la gr\u00e1fica se define <code>ampl_slider.on_changed(grafico_actualiza)<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; gutter: false; title: ; notranslate\" title=\"\">\ndef grafico_actualiza(val):\n    ampl = round(ampl_slider.val,1) # un decimal\n    fi = fx(ampl,freq,fase,ti) # actualiza valores de f(x)\n    linea.set_ydata(fi) # redibuja linea\n    fig.canvas.draw_idle() # actualiza figura\n\n<\/pre><\/div>\n\n\n<p>Para a\u00f1adir los cambios en los par\u00e1metros de frecuencia y fase, se repite el proceso de crear un Slider en el intervalo [0,2\u03c0].<\/p>\n\n\n\n<p>Para restaurar la gr\u00e1fica al valor inicial dado en amplitud, frecuencia y fase se usa un bot\u00f3n <strong>boton_rst<\/strong>&nbsp;, donde se reinicia las barras creadas.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; gutter: false; title: ; notranslate\" title=\"\">\n# boton reinicio de gr\u00e1fica &#x5B;x,y,ancho,alto]\nboton_rstdonde = plt.axes(&#x5B;0.8, 0.025, 0.1, 0.04])\nboton_rst = Button(boton_rstdonde, 'Reset',\n                   hovercolor='0.975')\ndef grafico_reinicia(event):\n    ampl_slider.reset()\n    return()\n    \nboton_rst.on_clicked(grafico_reinicia)\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<div class=\"wp-block-group has-medium-font-size is-layout-flex wp-block-group-is-layout-flex\">\n<p>Gr\u00e1ficas <a href=\"#interactivas\">interactivas<\/a><\/p>\n\n\n\n<p><a href=\"#algoritmo\">algoritmo<\/a><\/p>\n\n\n\n<p><a href=\"#ejemplos\">ejemplos<\/a><\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"algoritmo\">2. Algoritmo en Python<\/h2>\n\n\n\n<p>Se adjunta el algoritmo en Python integrado<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code alignwide\"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n# Se\u00f1ales continuas: senoidal\n# gr\u00e1fica interactiva con Slider\nimport numpy as np\nimport matplotlib.pyplot as plt\nfrom matplotlib.widgets import Slider, Button\n\n# INGRESO\nampl = 2.0\nfreq = 1.0\nfase = 0.0\nfx = lambda ampl,freq,fase,t: ampl*np.sin(2*np.pi*freq*t+fase)\n\na = 0 #intervalo &#x5B;a,b]\nb = 1\nmuestras = 61\n\ny_max = 6.0 # rango vertical\ny_min = -y_max\nDosPi = 2*np.pi\n\n# PROCEDIMIENTO\nti = np.linspace(a, b, muestras)\nfi = fx(ampl,freq,fase,ti)\n# SALIDA\n\n# GRAFICA\nfig, graf = plt.subplots()\nlinea, = plt.plot(ti, fi)\ntitulo = str(ampl)+'*sin(2*pi*'+str(freq)+'*t+'+str(fase)+')'\nplt.title(titulo)\nplt.grid()\n\nplt.axis(&#x5B;a, b, y_min, y_max])  # cotas gr\u00e1fico\nplt.tight_layout()\nplt.subplots_adjust(left=0.25, bottom=0.25) # espacios\n\n# slider: barras para valores \n# amplitud slider amp_donde, &#x5B;x,y,ancho,alto]\nampl_donde = plt.axes(&#x5B;0.1, 0.25, 0.03, 0.65])\nampl_slider = Slider(ampl_donde, 'ampl', 0.2, y_max,\n                     valinit=ampl, valstep = 0.1,\n                     orientation='vertical')\n# frecuencia slider &#x5B;x,y,ancho,alto]\nfreq_donde = plt.axes(&#x5B;0.25, 0.15, 0.65, 0.03])\nfreq_slider = Slider(freq_donde, 'freq',\n                     0.1, np.round(DosPi,1),\n                     valinit=freq, valstep = 0.1)\n# fase slider &#x5B;x,y,ancho,alto]\nfase_donde = plt.axes(&#x5B;0.25, 0.1, 0.65, 0.03])\nfase_slider = Slider(fase_donde, 'fase',\n                     0.0, np.round(DosPi,1),\n                     valinit=fase, valstep = 0.1,)\n\ndef grafico_actualiza(val):\n    ampl = round(ampl_slider.val,1) # un decimal\n    freq = round(freq_slider.val,1) # un decimal\n    fase = round(fase_slider.val,1) # un decimal\n    fi = fx(ampl,freq,fase,ti) # actualiza valores de f(x)\n    linea.set_ydata(fi) # redibuja linea\n    titulo = str(ampl)+'*sin(2*pi*'+str(freq)+'*t+'+str(fase)+')'\n    graf.set_title(titulo)\n    fig.canvas.draw_idle() # actualiza figura\n\nampl_slider.on_changed(grafico_actualiza)\nfreq_slider.on_changed(grafico_actualiza)\nfase_slider.on_changed(grafico_actualiza)\n\n# boton reinicio de gr\u00e1fica &#x5B;x,y,ancho,alto]\nboton_rstdonde = plt.axes(&#x5B;0.8, 0.025, 0.1, 0.04])\nboton_rst = Button(boton_rstdonde, 'Reset',\n                   hovercolor='0.975')\ndef grafico_reinicia(event):\n    freq_slider.reset()\n    ampl_slider.reset()\n    fase_slider.reset()\n    return()\n    \nboton_rst.on_clicked(grafico_reinicia)\n\nplt.show()\n<\/pre><\/div>\n\n\n<p><strong>Referencia<\/strong>: <a href=\"https:\/\/matplotlib.org\/stable\/api\/widgets_api.html#matplotlib.widgets.Slider\">matplotlib.widgets.Slider<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<div class=\"wp-block-group has-medium-font-size is-layout-flex wp-block-group-is-layout-flex\">\n<p>Gr\u00e1ficas <a href=\"#interactivas\">interactivas<\/a><\/p>\n\n\n\n<p><a href=\"#algoritmo\">algoritmo<\/a><\/p>\n\n\n\n<p><a href=\"#ejemplos\">ejemplos<\/a><\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ejemplos\">3. Ejemplos<\/h2>\n\n\n\n<p>TELG1034 - Procesamiento Digital de Se\u00f1ales<\/p>\n\n\n\n<p><a href=\"https:\/\/blog.espol.edu.ec\/algoritmos101\/dsp-unidades\/muestreo-con-python\/\" data-type=\"post\" data-id=\"219\">Muestreo con Python<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"http:\/\/blog.espol.edu.ec\/algoritmos101\/files\/2025\/04\/muestreoAlias_cos01_animate.gif\" alt=\"muestreo alias cos animate\" class=\"wp-image-16180\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/blog.espol.edu.ec\/algoritmos101\/dsp-unidades\/aliasing-con-python\/\" data-type=\"post\" data-id=\"18269\">Aliasing con Python<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"479\" src=\"http:\/\/blog.espol.edu.ec\/algoritmos101\/files\/2025\/04\/muestreoAlias_cos02_animate.gif\" alt=\"muestreo alias cos animate\" class=\"wp-image-16181\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<div class=\"wp-block-group has-medium-font-size is-layout-flex wp-block-group-is-layout-flex\">\n<p>Gr\u00e1ficas <a href=\"#interactivas\">interactivas<\/a><\/p>\n\n\n\n<p><a href=\"#algoritmo\">algoritmo<\/a><\/p>\n\n\n\n<p><a href=\"#ejemplos\">ejemplos<\/a><\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n","protected":false},"excerpt":{"rendered":"<p>Gr\u00e1ficas interactivas algoritmo ejemplos 1. Gr\u00e1ficas interactivas Para mostrar el uso de una variable en una funci\u00f3n matem\u00e1tica, se puede usar las gr\u00e1ficas interactivas. La librer\u00eda Matplotlib dispone de los componentes que permiten seleccionar valores de manera din\u00e1mica y ajustar la gr\u00e1fica 2D sin tener que detener y volver a ejecutar el algoritmo. Si ya [&hellip;]<\/p>\n","protected":false},"author":8043,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"wp-custom-template-entrada-fp-unidades","format":"standard","meta":{"footnotes":""},"categories":[109],"tags":[],"class_list":["post-14382","post","type-post","status-publish","format-standard","hentry","category-fp-u08"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/posts\/14382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/users\/8043"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/comments?post=14382"}],"version-history":[{"count":6,"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/posts\/14382\/revisions"}],"predecessor-version":[{"id":24160,"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/posts\/14382\/revisions\/24160"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/media?parent=14382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/categories?post=14382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/algoritmos101\/wp-json\/wp\/v2\/tags?post=14382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}