Skip to content

Animacion con Canvas

# Desarrollo

# Explicación Inicial

La animación creada consiste en una pelota que se mueve dentro de un canvas y rebota al tocar los bordes.

Para lograr esto se utilizan:

Coordenadas (x, y) para ubicar la pelota
Velocidad (dx, dy) para el movimiento
Condicionales para detectar colisiones
La función requestAnimationFrame para animar continuamente

# Explicación del tema

1. El Plano Cartesiano del Canvas

- En programación web, las coordenadas funcionan distinto a las matemáticas tradicionales (el eje Y está invertido).
- Qué mostrar: Un rectángulo negro que represente el Canvas.
- Detalles clave: * Una flecha que apunte hacia la derecha para el Eje X+.
- Una flecha que apunte hacia abajo para el Eje Y+.
- Un punto en la esquina superior izquierda marcado como (0,0).
- Por qué ayuda: Evita que el estudiante se confunda al ver que para "bajar" la pelota, sumamos valor a la y.

2. Esquema de "Caja de Colisión" (Bounding Box)

- Una imagen que explique por qué la pelota rebota antes de tocar el borde con su centro.
- Qué mostrar: Una pelota tocando el borde derecho del canvas.
- Detalles clave:
- Una línea desde el centro de la pelota hasta el borde marcada como radio.
- La fórmula lógica: Si (x + radio > ancho_canvas) { rebota }.
- Por qué ayuda: Visualiza la lógica matemática del if que escribimos en el JavaScript.

3. Diagrama de Flujo del "Game Loop"

- La animación no es un video, es un dibujo que se borra y se vuelve a pintar 60 veces por segundo.
- Qué mostrar: Un ciclo infinito con flechas.
- Pasos del ciclo:
- Borrar: Limpiar el frame anterior (fillRect con opacidad).
- Actualizar: Calcular nueva posición (x + dx).
- Dibujar: Pintar la pelota en la nueva posición.
- Repetir: requestAnimationFrame.
- Por qué ayuda: Es el concepto base de cualquier videojuego o animación interactiva.

Creado con eXeLearning (nueva ventana)