P5.JS CreateSelect () не изменяет выбранную опцию при вызове в функции рисования ⇐ Javascript

[Anonymous]

Я работаю над классовым проектом, чтобы создать приложение для рисования, используя p5.js. Одна из моих функций - это инструмент для рисования разных форм и включает в себя использование раскрывающегося меню для выбора формы для рисования на холсте. Я использую функцию CreateSelect () для создания меню. Он работает нормально и рисует каждую опцию формы при использовании вне функции рисования, но это означает, что выпадающее меню видно, даже если инструмент формы не выбран. (Не разрешено) Я смотрел на это часами и не могу понять, где я ошибся. Консоль не показывает никаких ошибок, когда я пытаюсь нарисовать или выбрать другую форму. У кого -нибудь есть какие -либо советы о том, с чего начать исправлять? Или то, что мне не хватает? < /P>
Любая помощь очень ценится! //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();
}
};

}


Подробнее здесь: https://stackoverflow.com/questions/794 ... w-function