Taller diseñado con el corazón de un docente y la mente de un programador
Imagina un lienzo en blanco, listo para transformarse en lo que tu creatividad imagine. Así es el widget Canvas de tkinter: un espacio infinito donde líneas, formas, colores y movimiento se unen para dar vida a tus ideas. Este taller te invita a convertirte en un artista digital que domina tanto la lógica como la estética.
Dominar el uso del widget Canvas en tkinter para crear interfaces gráficas interactivas mediante la implementación de formas geométricas, manejo de eventos y animaciones básicas, desarrollando así competencias técnicas en programación gráfica, habilidades cognitivas de resolución de problemas y actitudes de persistencia y creatividad, con el propósito de aplicar estos conocimientos en la creación de visualizaciones de datos, juegos educativos o herramientas de simulación que respondan a necesidades reales del entorno.
¿Alguna vez has usado una app que te mostró gráficos de tu progreso en el ejercicio? ¿O jugado un videojuego con personajes que se mueven en pantalla? Detrás de esas experiencias hay un "lienzo digital" similar al Canvas de tkinter.
En nuestro contexto ecuatoriano, piensa en aplicaciones como:
Canvas es esa puerta entre el código abstracto y la experiencia visual concreta. Cuando dominas Canvas, no solo programas, sino que das forma visual a tus ideas.
Canvas es un widget de tkinter que funciona como un área rectangular donde puedes dibujar gráficos, crear figuras, escribir texto y mostrar imágenes. Sus coordenadas empiezan en (0,0) en la esquina superior izquierda.
# Importar tkinter import tkinter as tk from tkinter import ttk # Crear ventana principal ventana = tk.Tk() ventana.title("Mi primer Canvas") ventana.geometry("600x400") # Crear el widget Canvas lienzo = tk.Canvas(ventana, width=580, height=350, bg="white") lienzo.pack(pady=20) # Dibujar formas básicas # Rectángulo: (x1, y1, x2, y2) lienzo.create_rectangle(50, 50, 150, 150, fill="blue", outline="black") # Óvalo lienzo.create_oval(200, 50, 300, 150, fill="red", outline="black") # Línea lienzo.create_line(350, 50, 450, 150, width=3, fill="green") # Texto lienzo.create_text(300, 200, text="¡Bienvenido al mundo de Canvas!", font=("Arial", 14), fill="purple") # Ejecutar la aplicación ventana.mainloop()
El verdadero poder de Canvas aparece cuando combinamos dibujo con interacción. Vamos a crear un lienzo que responda a clics del mouse:
import tkinter as tk import random def dibujar_circulo(evento): # Generar color aleatorio colores = ["red", "blue", "green", "yellow", "orange", "purple"] color = random.choice(colores) # Dibujar un círculo en la posición del clic x, y = evento.x, evento.y lienzo.create_oval(x-20, y-20, x+20, y+20, fill=color, outline="black") # Actualizar contador global contador contador += 1 etiqueta.config(text=f"Círculos creados: {contador}") # Configurar ventana ventana = tk.Tk() ventana.title("Canvas Interactivo") ventana.geometry("600x500") # Variables contador = 0 # Crear widgets lienzo = tk.Canvas(ventana, width=580, height=400, bg="white") lienzo.pack(pady=10) # Vincular evento de clic lienzo.bind("<Button-1>", dibujar_circulo) # Etiqueta para mostrar contador etiqueta = tk.Label(ventana, text="Círculos creados: 0", font=("Arial", 12)) etiqueta.pack() # Botón para limpiar boton_limpiar = tk.Button(ventana, text="Limpiar lienzo", command=lambda: lienzo.delete("all")) boton_limpiar.pack(pady=10) ventana.mainloop()
Reflexión consciente: ¿Qué diferencias notas entre programar una interfaz de texto y una gráfica? ¿Cómo cambia tu forma de pensar cuando programas elementos visuales e interactivos? Piensa en tres aplicaciones de la vida real que podrían beneficiarse de esta tecnología.
Podemos crear movimiento y dinamismo combinando Canvas con métodos de actualización.
import tkinter as tk import random class AplicacionGraficos: def __init__(self, ventana): self.ventana = ventana self.ventana.title("Gráficos Dinámicos") # Crear canvas self.canvas = tk.Canvas(ventana, width=600, height=400, bg="#F7FAFC") self.canvas.pack() # Lista para almacenar los objetos gráficos self.elementos = [] # Botones de control frame_botones = tk.Frame(ventana) frame_botones.pack(pady=10) tk.Button(frame_botones, text="Agregar círculo", command=self.agregar_circulo, bg="#00C9A7", fg="white").pack(side=tk.LEFT, padx=5) tk.Button(frame_botones, text="Mover elementos", command=self.mover_elementos, bg="#2E5BFF", fg="white").pack(side=tk.LEFT, padx=5) tk.Button(frame_botones, text="Limpiar canvas", command=self.limpiar_canvas, bg="#FF6B8B", fg="white").pack(side=tk.LEFT, padx=5) def agregar_circulo(self): # Crear círculo en posición aleatoria x = random.randint(50, 550) y = random.randint(50, 350) radio = random.randint(20, 50) # Color aleatorio en formato hexadecimal color = "#" + ''.join(random.choices("0123456789ABCDEF", k=6)) circulo = self.canvas.create_oval(x-radio, y-radio, x+radio, y+radio, fill=color, outline="") self.elementos.append(circulo) def mover_elementos(self): for elemento in self.elementos: # Mover cada elemento una cantidad aleatoria dx = random.randint(-20, 20) dy = random.randint(-20, 20) self.canvas.move(elemento, dx, dy) def limpiar_canvas(self): for elemento in self.elementos: self.canvas.delete(elemento) self.elementos.clear() if __name__ == "__main__": ventana = tk.Tk() app = AplicacionGraficos(ventana) ventana.mainloop()
Desafío de exploración: Modifica el código para que los círculos reboten en los bordes del canvas. ¿Qué variables necesitas rastrear para cada círculo? ¿Cómo detectarías las colisiones entre círculos?
Ahora es tu turno de aplicar todo lo aprendido. Tu misión es crear un simulador de ecosistema acuático usando Canvas de tkinter.
Preguntas para guiar tu desarrollo:
Recuerda: no hay una sola solución correcta. Tu creatividad y capacidad para resolver problemas son lo más importante. ¡Comparte tu creación con tus compañeros y docentes!
Responde estas preguntas para poner a prueba tu comprensión de los conceptos trabajados. ¡Cada respuesta correcta te da puntos!