Quiero crear una opción como botón en el editor web p5.js. ¿Cómo puedo lograrlo? Quiero crear una simulación en la que el usuario pueda hacer clic en ese botón para seleccionar la entrada. Quiero crear varios botones o cuando alguien haga clic en el botón más. salen las opciones
var img1 let posX=0 let posY=0 let button; const rightwall=350; function preload(){ img1=loadImage("https://raw.githubusercontent.com/Rabbid76/PyGameExamplesAndAnswers/master/resource/icon/Bird64.png") } function setup() { createCanvas(600, 600); button =createButton('CLICK ME'); button.position(250,300); button.mousePressed(changeBG); noLoop() } function changeBG() { let val = random(255); background(val); if (playAnim) { noLoop(); playAnim = false; } else { loop(); playAnim = true; } } function draw() { background(220); fill('red'); rect(320,75,170,160) fill('grey'); rect(posX,170,70,30) image(img1,posX,posY-280,180,200) posX = constrain(posX+1,0,rightwall-30) posY = constrain(posX-1,posY,height-20) if (posX == rightwall-30) { posX=0 posY=0 } }```La siguiente demostración creará una lista desplegable que se ejecutará en p5.js Web Editor. Esta es la primera conversión a p5.js y no se ha probado de forma exhaustiva.
// Drop Down List parts => a.)display field, b.)arrow, c.)listItems // Syntax: List(x, y, w, h, itemH, txtSize) let list; let selectedItem = -1; let drop = false; let items = ["Apples", "Peaches", "Oranges", "Bananas", "Pears" ]; let itemY = []; class List { constructor(x, y, w, h, itemH, txtSize) { this.x = x; this.y = y; this.w = w; this.h = h; this.itemH = itemH; this.txtSize = txtSize; this.arrwX = this.x + this.w; this.arrwY = this.y; this.arrwH = this.h; } press(mx, my) { // arrow touches if ((mx >= this.arrwX) && (mx <= this.arrwX+this.arrwH) && (my >= this.arrwY) && (my <= this.arrwY+this.arrwH)) { if (drop == true) { drop = false; } else { drop = true; } } // list touches if (drop) { if (items.length > 0) { for (let j = 0; j < items.length; j++) { if ((mx >= this.x) && (mx <= this.x + this.w) && (my >= itemY[j] ) && (my <= itemY[j] + this.itemH)) { selectedItem = j; drop = false; } } } } } displayFieldString(title) { fill(255); // background color rect(this.x, this.y, this.w, this.h); fill(0); // text color textSize(this.txtSize); text(title, this.x + 10, this.y + this.txtSize); } display() { if (selectedItem == -1) { this.displayFieldString("Select item:"); } else { this.displayFieldString(items[selectedItem]); } // arrow fill(255); // arrow background color rect(this.arrwX, this.arrwY, this.arrwH, this.arrwH); fill(0, 255, 0); // arrow color triangle(this.arrwX+5, this.arrwY+5, this.arrwX+this.arrwH-5, this.arrwY+5, this.arrwX+this.arrwH/2, this.arrwY+this.arrwH-5); // listItems if ((items.length > 0) && (drop)) { for (let j = 0; j < items.length; j++) { itemY[j] = (this.y + this.h) + j*this.itemH; fill(255); rect(this.x, itemY[j], this.w, this.itemH); fill(0); textSize(this.txtSize); text(items[j], this.x + 10, itemY[j] + this.txtSize); } } if (!drop) { rect(this.x, this.y + this.h, this.w, 0); } } } function setup() { createCanvas(500, 400); list = new List(100, 100, 120, 24, 24, 16); } function draw() { background(220); list.display(); } function mousePressed() { list.press(mouseX, mouseY); }