Resumen del Proyecto

Los seis proyectos cubiertos en este tutorial:

• Proyecto 1– Punto en Movimiento (configuración básica de matriz)
• Proyecto 2– Desplazamiento de texto en la matriz de 8 × 8
• Proyecto 3– Texto HTTP: envía texto desde tu teléfono o PC a través de Wi-Fi
• Proyecto 4– Punto de inclinación, controlado por el acelerómetro QMI8658
• Proyecto 5– Flecha Siempre Arriba (indicador de orientación que utiliza QMI8658)
• Proyecto 6– Juego de objetivo con control de timbre e inclinación

Si te pierdes en cualquier etapa, compara tu configuración con los fragmentos proporcionados para cada proyecto a continuación.

Introducción

Los proyectos comienzan con la animación más simple posible (un solo punto en movimiento) y gradualmente agregan texto, control Wi-Fi, y finalmente interacción basada en sensores usando el acelerómetro QMI8658. Al final, comprenderás cómo controlar la matriz de LED y reaccionar a la orientación de la placa.

Instalando Tarjetas ESP32-S3 en Arduino IDE

Antes de cargar cualquier código, instala el soporte oficial de la placa ESP32 en el Arduino IDE y selecciona un perfil de placa ESP32-S3 (por ejemplo, un módulo de desarrollo ESP32-S3). Esto garantiza que se apliquen la configuración correcta del tamaño de la memoria flash, la frecuencia y los ajustes USB al compilar y cargar.

Instalando las Bibliotecas Necesarias

Las siguientes bibliotecas son necesarias para estos proyectos:

• Adafruit NeoPixel
• Adafruit GFX
• Adafruit NeoMatrix
• QMI8658 (por Lahav Gahali)

Instálalos una vez usando el Administrador de Bibliotecas de Arduino, luego podrás reutilizarlos para los seis proyectos.

Acerca del acelerómetro QMI8658

El QMI8658 es un IMU de 6 ejes que combina un acelerómetro de 3 ejes y un giroscopio de 3 ejes. En estos proyectos, los valores del acelerómetro se utilizan para detectar la inclinación y la orientación de la placa.

Convención de ejes utilizada en todos los proyectos:

• X– izquierda / derecha
• Y– adelante / atrás
• Z– vertical (arriba / abajo)

En todos los proyectos basados en inclinación, configurarás el rango del acelerómetro y la tasa de datos de salida una vez, y luego leerás los valores para mover un punto, orientar una flecha o controlar un juego.

// Common QMI8658 configuration used in tilt projects
// (Projects 4, 5, and 6)

const auto ACC_RANGE   = QMI8658AccRange_2g;
const auto ACC_ODR     = QMI8658AccODR_31_25Hz;
const auto GYR_RANGE   = QMI8658GyrRange_256dps;
const auto GYR_ODR     = QMI8658GyrODR_31_25Hz;

// Sensitivity factor for converting tilt to pixels
const float TILT_TO_PIXEL_SCALE = 4.0f;   // increase for more sensitivity
    

Proyecto 1 – Punto en Movimiento (Configuración Básica de Matriz)

Proyecto 1 es una animación simple de un punto en movimiento que verifica el cableado de tu matriz de LED y la configuración básica de NeoMatrix. Tú defines las dimensiones de la matriz, el pin de datos, el brillo y la velocidad de movimiento del punto.

Configuración Clave

// Project 1 – Moving Dot (basic matrix setup)

// Matrix geometry
#define MATRIX_PIN       14
#define MATRIX_WIDTH      8
#define MATRIX_HEIGHT     8

// Layout (choose one; many boards use ZIGZAG or PROGRESSIVE)
#define MATRIX_LAYOUT  (NEO_MATRIX_TOP + NEO_MATRIX_LEFT + \
                        NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG)
// Alternative if needed:
// #define MATRIX_LAYOUT  (NEO_MATRIX_TOP + NEO_MATRIX_LEFT + \
//                         NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE)

// Visual parameters
const uint8_t  P1_BRIGHTNESS     = 40;         // overall brightness (0–255)
const uint16_t P1_DOT_COLOR      = matrix.Color(0, 255, 0); // green dot
const uint16_t P1_STEP_DELAY_MS  = 80;         // smaller = faster movement
    

Al cambiarP1_DOT_COLORyP1_STEP_DELAY_MS, puedes probar rápidamente diferentes colores y velocidades de animación.

Proyecto 2 – Desplazamiento de Texto

Proyecto 2 muestra texto desplazándose comoRobojax|||Tú controlas el mensaje en sí, la dirección del desplazamiento, el color del texto y la velocidad. Este proyecto introduce la representación de texto en una matriz muy pequeña.

Configuración Clave

// Project 2 – Text Scroll

// Scrolling message
const char* P2_MESSAGE = "Robojax";

// Text color (R, G, B)
const uint16_t P2_TEXT_COLOR = matrix.Color(255, 0, 0);  // red text

// Scroll speed
const uint16_t P2_SCROLL_DELAY_MS = 70;  // smaller = faster scroll

// Scroll direction (you will use this in your logic)
// Possible values: -1 for left, +1 for right, or use an enum
const int8_t P2_SCROLL_DIR_X = -1;  // -1 = scroll left, +1 = scroll right
const int8_t P2_SCROLL_DIR_Y =  0;  //  0 = no vertical scroll
    

Si posteriormente decides desplazarte verticalmente (hacia arriba o hacia abajo), estableceP2_SCROLL_DIR_Xa0y usarP2_SCROLL_DIR_Yen su lugar.

Proyecto 3 – Mensaje de Teléfono Móvil (Mensaje Controlado por Wi-Fi)

Proyecto 3 convierte al ESP32-S3 en un pequeño servidor web. Te conectas a la placa por Wi-Fi, abres su página web y escribes un mensaje. El texto, el color y la velocidad de desplazamiento se utilizan entonces para impulsar el mismo efecto de desplazamiento de texto en la matriz en tiempo real.

Configuración de Wi-Fi y Mensajes de Texto

// Project 3 – HTTP Text

// Wi-Fi credentials (change to your own network)
const char* P3_WIFI_SSID     = "YourWiFiName";
const char* P3_WIFI_PASSWORD = "YourWiFiPassword";

// Default text before anything is sent from the browser
String P3_currentText = "Robojax";

// Default color for the HTTP-controlled text
uint16_t P3_TEXT_COLOR = matrix.Color(0, 255, 255); // cyan

// Scroll speed for HTTP text
uint16_t P3_SCROLL_DELAY_MS = 80;  // can be updated from web page

// Allowed scroll directions (used as options in the HTML form)
enum P3_Direction {
  P3_LEFT,
  P3_RIGHT,
  P3_UP,
  P3_DOWN
};
P3_Direction P3_scrollDirection = P3_LEFT;
    

En la página web, el usuario elige la dirección y la velocidad. Su código simplemente actualizaP3_scrollDirectionyP3_SCROLL_DELAY_MSbasado en las opciones seleccionadas.

Proyecto 4 – Punto de Inclinación (Usando QMI8658)

Proyecto 4 lee el acelerómetro QMI8658 y mueve un único punto por la matriz de acuerdo con la inclinación de la placa. Cuando la placa está plana, el punto está en el centro. Inclinar la placa mueve el punto en esa dirección.

`

Configuración de Matriz y Tilt

// Project 4 – Tilt Dot

// Matrix geometry / brightness
#define MATRIX_PIN_TILT       14
#define MATRIX_WIDTH_TILT      8
#define MATRIX_HEIGHT_TILT     8

const uint8_t  P4_BRIGHTNESS   = 40;
const uint16_t P4_DOT_COLOR    = matrix.Color(0, 255, 0); // green
const uint16_t P4_UPDATE_DELAY = 30;  // ms between updates

// QMI8658 configuration (reuse from common settings if desired)
const auto P4_ACC_RANGE = QMI8658AccRange_2g;
const auto P4_ACC_ODR   = QMI8658AccODR_125Hz;

// Mapping accelerometer to pixel offset
// Negative sign may be adjusted depending on how the board is held
const float P4_TILT_SCALE_X = 3.5f; // affects left/right sensitivity
const float P4_TILT_SCALE_Y = 3.5f; // affects up/down sensitivity
    

En tu código, limitas las lecturas del acelerómetro a un rango como[-1, 1], multiplíquelos porP4_TILT_SCALE_XyP4_TILT_SCALE_Y, y agrégalos a las coordenadas del centro. Si el movimiento se siente invertido, simplemente invierte el signo.

Proyecto 5 – Flecha Siempre Arriba

Proyecto 5 muestra una flecha en la matriz de 8 × 8 que siempre apunta hacia el lado "superior" del tablero. Cuando giras el tablero, la flecha gira para que apunte hacia el lado que está orientado hacia arriba.

Configuración de Flecha y Orientación

// Project 5 – Arrow Always Up

// Matrix brightness and color for the arrow
const uint8_t  P5_BRIGHTNESS     = 50;
const uint16_t P5_ARROW_COLOR    = matrix.Color(255, 150, 0);  // orange

// How often to update orientation
const uint16_t P5_UPDATE_DELAY_MS = 40;

// Tilt thresholds (in g) used to decide which side is "up"
// Adjust according to the board orientation in your video/demo
const float P5_TILT_THRESHOLD_LOW  = -0.25f;
const float P5_TILT_THRESHOLD_HIGH =  0.25f;

// Example mapping corners/sides based on accelerometer values
// (used in your logic to choose which arrow shape to draw)
/*
  ax, ay conditions (examples):
    ax >  P5_TILT_THRESHOLD_HIGH  -> USB side up
    ax <  P5_TILT_THRESHOLD_LOW   -> opposite USB side up
    ay >  P5_TILT_THRESHOLD_HIGH  -> one lateral side up
    ay <  P5_TILT_THRESHOLD_LOW   -> other lateral side up
*/
    

El dibujo real de la flecha se implementa conmatrix.drawPixel()ymatrix.drawLine(). La parte clave es decidir qué orientación de flecha usar basándose en las zonas de inclinación definidas porP5_TILT_THRESHOLD_LOWyP5_TILT_THRESHOLD_HIGH.

Proyecto 6 – Juego de Destinos (Controlado por Inclinación)

Proyecto 6 es un pequeño juego en el que controlas un punto jugador usando el acelerómetro, intentas moverlo sobre un píxel objetivo y recibes retroalimentación tanto de la matriz como de un zumbador cuando alcanzas el objetivo.

Configuración del Juego y el Timbre

// Project 6 – Tilt-Based Target Game

// Matrix brightness
const uint8_t P6_BRIGHTNESS = 60;

// Colors for game elements
const uint16_t P6_PLAYER_COLOR    = matrix.Color(0, 255, 0);   // green
const uint16_t P6_TARGET_COLOR    = matrix.Color(255, 0, 0);   // red
const uint16_t P6_BACKGROUND_COLOR = matrix.Color(0, 0, 0);    // off
const uint16_t P6_HIT_FLASH_COLOR = matrix.Color(255, 255, 0); // yellow on hit

// Buzzer pin and timing
const int      P6_BUZZER_PIN       = 4;       // change if wired differently
const uint16_t P6_BUZZER_ON_MS     = 120;     // beep duration
const uint16_t P6_BUZZER_OFF_MS    = 80;      // pause between beeps
const uint8_t  P6_BUZZER_VOLUME    = 128;     // if using PWM, duty cycle (0–255)

// Movement and game timing
const uint16_t P6_UPDATE_DELAY_MS  = 35;      // game loop delay
const float    P6_TILT_SCALE_X     = 3.5f;    // convert tilt to pixels (left/right)
const float    P6_TILT_SCALE_Y     = 3.5f;    // convert tilt to pixels (up/down)

// Minimum distance in pixels to count as a "hit"
const uint8_t  P6_HIT_DISTANCE_MAX = 0;       // 0 = exact same pixel
    

En la lógica del juego tú:

• Lee el acelerómetro y mueve el punto del jugador por una cantidad escalada.
• Fija la posición del jugador dentro de la cuadrícula de 8 × 8.
• Verifica si la posición del jugador coincide con la posición objetivo (o está dentro de la distancia permitida).
• Al golpear, parpadea la matriz usandoP6_HIT_FLASH_COLORy active el zumbador usandoP6_BUZZER_ON_MSyP6_BUZZER_OFF_MS.
• Entonces mueve el objetivo a una nueva posición aleatoria y continúa.

Mapa de Alfileres

Conclusión

Estos seis proyectos cubren los bloques esenciales para trabajar con la matriz LED RGB Waveshare ESP32-S3: control básico de píxeles, desplazamiento de texto, interacción basada en Wi-Fi, y gráficos y juegos basados en inclinación utilizando el acelerómetro QMI8658.

Puedes combinar y adaptar estas ideas para crear tus propios proyectos, como marcadores, pequeñas pantallas de estado, minijuegos o paneles de notificaciones, todos controlados por inclinación, toque o mensajes desde tu teléfono o computadora.