Soy un principiante en p5.js y en codificación en general. Para mi proyecto de clase, estoy creando una tarjeta de cumpleaños personalizable. Se pueden personalizar tres secciones de la tarjeta: el estilo de pastel, el estilo de sombrero y la expresión facial en el pastel. Idealmente, los usuarios harían clic en cada sección de la tarjeta para recorrer las opciones de personalización según sus gustos.
Lo que tengo ahora en el código pegado en esta publicación son solo las opciones de estilo de pastel. Además, lo codifiqué para que los usuarios puedan hacer clic en un botón para elegir su estilo de pastel en lugar de hacer clic en un área específica de la tarjeta porque eso fue mucho más simple para mí.
Mi pregunta es, ¿cómo lo codificaría para que en el primer clic del usuario en el botón, apareciera la primera opción de pastel, luego en el segundo clic, apareciera la segunda opción de pastel, etc.? Necesito que aparezca una opción de pastel por cada clic; todas las demás opciones de pastel deben permanecer ocultas.
Otra pregunta que tengo es sobre el ciclo de regreso a la primera opción de pastel después de que se hayan mostrado todas las opciones de pastel. Tengo cinco opciones de pastel, entonces, ¿cómo lo codificaría para que no solo aparezca la primera opción de pastel con el primer clic, sino también la sexta, la undécima, la decimosexta, etc.?
Gracias por adelantado.
let clickCount = 0 let cakes let cakeButton function preload (){ card_bg = loadImage ("card_bg.png") cake_chocolate = loadImage ("cake_chocolate.png") cake_pink = loadImage ("cake_pink.png") cake_pinkDrip = loadImage ("cake_pinkDrip.png") cake_rainbow = loadImage ("cake_rainbow.png") cake_white = loadImage ("cake_white.png") hat_chevron = loadImage ("hat_chevron.png") hat_dots = loadImage ("hat_dots.png") hat_puff = loadImage ("hat_puff.png") hat_stars = loadImage ("hat_stars.png") hat_stripes = loadImage ("hat_stripes.png") } function setup() { createCanvas(450, 600); background(220); image (card_bg, 0, 0) cakeButton = createButton("click me", "blue") cakeButton.position (125, 600) cakeButton.size (200, 150) cakeButton.mousePressed (cakePress) } function cakePress() { clickCount++ imageMode (CENTER) let cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow] for (let i = 0; i<5; i++){ if (clickCount === i+1){ image (cakes[i], 225, 425)} else if (clickCount === i+2 && cakes[i] === true){ cakes[i].hide() } } }Esto debería funcionar, no tiene que definir imageMode() cada vez que dibuja una nueva imagen, así que la moví a la configuración (lo mismo con la matriz de pasteles). Para borrar todas las imágenes detrás, puse background() en cakePress(), así que cuando agregues las otras partes, como el sombrero, tendrás que dibujarlas nuevamente. Ahora, cuando hace clic, el recuento de clics aumenta y se verifica si es más de lo que hay en la matriz. Si es así, se vuelve a establecer en 0, por lo que se repite como lo solicitó anteriormente, luego simplemente lo dibuja.
let clickCount = 0 let cakes = [cake_chocolate, cake_pink, cake_pinkDrip, cake_white, cake_rainbow]; let cakeButton function preload (){ card_bg = loadImage ("card_bg.png") cake_chocolate = loadImage ("cake_chocolate.png") cake_pink = loadImage ("cake_pink.png") cake_pinkDrip = loadImage ("cake_pinkDrip.png") cake_rainbow = loadImage ("cake_rainbow.png") cake_white = loadImage ("cake_white.png") hat_chevron = loadImage ("hat_chevron.png") hat_dots = loadImage ("hat_dots.png") hat_puff = loadImage ("hat_puff.png") hat_stars = loadImage ("hat_stars.png") hat_stripes = loadImage ("hat_stripes.png") } function setup() { createCanvas(450, 600); background(220); imageMode (CENTER) image (card_bg, 0, 0) cakeButton = createButton("click me", "blue") cakeButton.position (125, 600) cakeButton.size (200, 150) cakeButton.mousePressed (cakePress) } function cakePress() { background(220); clickCount++ if(clickCount >= cakes.length){ clickCount = 0; } image (cakes[clickCount], 225, 425) }