Solución al Problema de createSelect() en p5.js

En este artículo, abordaremos el problema de la función createSelect() de p5.js que no cambia la opción seleccionada al ser llamada dentro de la función draw(). Este problema es común entre quienes están desarrollando aplicaciones interactivas con p5.js, especialmente en proyectos de dibujo donde se usan menús desplegables para seleccionar formas.

Problema

Al implementar un menú desplegable para seleccionar diferentes formas que se dibujarán en el lienzo, notamos que, aunque la función createSelect() funciona correctamente fuera de draw(), no permite seleccionar opciones diferentes al ser llamada dentro de este bucle. Además, ocultar el menú hace que nunca se seleccione una opción diferente. Esto resulta en una interfaz poco satisfactoria para el usuario.

Solución

1. Crear Select fuera del Bucle draw()

El menú desplegable debe ser creado una sola vez fuera de la función draw(), en lugar de recrearlo cada vez que se dibuja. Esto evita que el menú se vuelva ineficaz y permitirá que las opciones seleccionadas sean recordadas.

2. Actualizar la Opción Seleccionada

Debemos actualizar la opción seleccionada dentro de draw() sin recrear el elemento. Aquí está la versión ajustada del código:

function drawShapesTool() {
    this.icon = "assets/shapes.jpg";
    this.name = "shapes";

    var previousMouseX = -1;
    var previousMouseY = -1;
    var w;
    var h;
    var shapeOptions = ["rectangle", "circle", "triangle", "rhombus"];
    var selectedShape;     
    var shapeSelect;

    // Crear el selector una vez y establecer las opciones
    this.shapePicker = function() {
        shapeSelect = createSelect();
        shapeSelect.position(350, 700);    

        shapeSelect.option('rectangle');
        shapeSelect.option('circle');
        shapeSelect.option('triangle');
        shapeSelect.option('rhombus');
        shapeSelect.selected('rectangle'); // Opción por defecto
    };

    // Llamar a esta función en setup
    this.shapePicker();

    this.draw = function() {
        selectedShape = shapeSelect.value(); // Obtener el valor actual del selector
        var drawRect = function() {
            rect(previousMouseX, previousMouseY, w, h);
        }
        var drawCircle = function() {
            ellipse(previousMouseX, previousMouseY, Math.max(w, h) * 1.5);
        }
        var drawTri = function() {
            triangle(mouseX, mouseY - h, mouseX - w, mouseY + h, mouseX + w, mouseY + h);                
        }
        var drawRhom = function() {
            quad(mouseX, mouseY, w / 2, h / 2, previousMouseX, previousMouseY, w * 0.5, h);                
        }

        if (mouseIsPressed) {
            if (previousMouseX == -1 && previousMouseY == -1) {
                previousMouseX = mouseX;
                previousMouseY = mouseY;
            } else {
                w = mouseX - previousMouseX;
                h = mouseY - previousMouseY;

                if (selectedShape == 'rectangle') {
                    drawRect();
                } else if (selectedShape == 'circle') {
                    drawCircle();
                } else if (selectedShape == 'triangle') {
                    drawTri();
                } else if (selectedShape == 'rhombus') {
                    drawRhom();
                }
            }
        } else {
            previousMouseX = -1;
            previousMouseY = -1;
        }              
    };
}

3. Instrucciones para el Usuario

• Creación del Selector: Asegúrate de crear el menú desplegable una sola vez en la función shapePicker() en lugar de dentro de draw().
• Lectura de la Opción Actual: Actualiza selectedShape leyendo el valor de shapeSelect en cada ciclo del dibujo sin recrear el selector.

Conclusión

Al realizar estos ajustes, tu menú desplegable funcionará como se espera, permitiendo seleccionar y dibujar formas de manera eficiente y efectiva en tu aplicación de dibujo con p5.js. ¡La práctica y la limpieza de código también ayudarán a mejorar tus habilidades de programación! Si tienes más preguntas, no dudes en pedir ayuda en la comunidad.