P5.JS createSelect() not changing selected option when called in draw function

Question

I'm working on a class project to build a drawing app using p5.js. One of my features is a tool to draw different shapes and includes using a dropdown menu to select a shape to draw to the canvas. I'm using the createSelect() function to build the menu. It works fine and draws each shape option when used outside the draw function, but this means the dropdown menu is visible even when the shape tool isn't selected. (Not allowed)

If I hide the createSelect within its own function and call that in the draw function, it hides the dropdown, but not will not select any option other than the default and no longer draws any of the shapes. I've been staring at this for hours and can't figure out where I went wrong. The console isn't showing any errors when I try to draw or select a different shape. Does anyone have any advice on where to start fixing this? Or what I'm missing?

Any help is greatly appreciated!

(I'm sorry for my messy code. I usually don't bother cleaning up until I get something finished. I also think this text editor added extra comments? This is my first post...)

   //Draws various shapes to canvas based on user selections

function drawShapesTool(){
//set an icon and a name for the object
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;

//Adapted from mirrorDrawTool and p5.js library 
this.shapePicker = function(){
    shapeSelect = createSelect();
    shapeSelect.position(350, 700);    
   
    shapeSelect.option('rectangle');
    shapeSelect.option('circle');
    shapeSelect.option('triangle');
    shapeSelect.option('rhombus');

   shapeSelect.selected('rectangle');
 };

this.draw = function(){
//      this.shapePicker();
    var shapeSelect = createSelect();
    shapeSelect.position(350, 700);    
   
    shapeSelect.option('rectangle');
    shapeSelect.option('circle');
    shapeSelect.option('triangle');
    shapeSelect.option('rhombus');

//       shapeSelect.selected('rectangle');
  selectedShape = shapeSelect.value();
  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;
        updatePixels();
            
          if (selectedShape == 'rectangle'){
              drawRect();
          }
          else if (selectedShape == 'circle'){
              drawCircle();
          }
          else if (selectedShape == 'triangle'){
              drawTri();
          }
          else if (selectedShape == 'rhombus') {
              drawRhom();
          }
      }
  }
    else {
      previousMouseX = -1;
      previousMouseY = -1;
      loadPixels();
    }              
 };

}

Answer 1

To be honest, it's a bit difficult for me to understand your problem... Reconstruction showed me that dropdown does not respond to shape changes and a rectangle is always drawn...

Try something like this. I assumed that you just need to draw the shape selected from dropdawn.

let shapeSelect;
let drawingLayer;
let startX = -1, startY = -1;
let selectedShape = "rectangle";

function setup() {
  createCanvas(600, 600);
  drawingLayer = createGraphics(600, 600);
  drawingLayer.background(0);
  shapeSelect = createSelect();
  shapeSelect.position(350, 620);
  shapeSelect.option('rectangle');
  shapeSelect.option('circle');
  shapeSelect.option('triangle');
  shapeSelect.option('rhombus');
  shapeSelect.selected('rectangle');
}

function draw() {
  background(0);
  image(drawingLayer, 0, 0);
  selectedShape = shapeSelect.value();
  if (mouseIsPressed && mouseButton === LEFT) {
    if (startX === -1 && startY === -1) {
      startX = mouseX;
      startY = mouseY;
    }
    let w = mouseX - startX;
    let h = mouseY - startY;
    noFill();
    stroke(255);
    if (selectedShape === 'rectangle') {
      rect(startX, startY, w, h);
    } else if (selectedShape === 'circle') {
      let d = Math.max(abs(w), abs(h)) * 1.5;
      ellipse(startX, startY, d, d);
    } else if (selectedShape === 'triangle') {
      triangle(startX, startY, mouseX, mouseY, startX, mouseY);
    } else if (selectedShape === 'rhombus') {
      let centerX = (startX + mouseX) / 2;
      let centerY = (startY + mouseY) / 2;
      let offsetX = abs(w) / 2;
      let offsetY = abs(h) / 2;
      quad(centerX, centerY - offsetY,
           centerX + offsetX, centerY,
           centerX, centerY + offsetY,
           centerX - offsetX, centerY);
    }
  }
}

function mouseReleased() {
  if (startX !== -1 && startY !== -1) {
    let w = mouseX - startX;
    let h = mouseY - startY;
    
    drawingLayer.stroke(0, 255, 0);
    drawingLayer.fill(0, 0, 255);
    if (selectedShape === 'rectangle') {
      drawingLayer.rect(startX, startY, w, h);
    } else if (selectedShape === 'circle') {
      let d = Math.max(abs(w), abs(h)) * 1.5;
      drawingLayer.ellipse(startX, startY, d, d);
    } else if (selectedShape === 'triangle') {
      drawingLayer.triangle(startX, startY, mouseX, mouseY, startX, mouseY);
    } else if (selectedShape === 'rhombus') {
      let centerX = (startX + mouseX) / 2;
      let centerY = (startY + mouseY) / 2;
      let offsetX = abs(w) / 2;
      let offsetY = abs(h) / 2;
      drawingLayer.quad(centerX, centerY - offsetY,
                        centerX + offsetX, centerY,
                        centerX, centerY + offsetY,
                        centerX - offsetX, centerY);
    }
  }
  startX = -1;
  startY = -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js" integrity="sha512-1YMgn4j8cIL91s14ByDGmHtBU6+F8bWOMcF47S0cRO3QNm8SKPNexy4s3OCim9fABUtO++nJMtcpWbINWjMSzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>