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();
}
};
}
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();
}
};
}
- Many times coding defects are related to tactical decisions. The code might be correct but the design decisions behind it might need re-thinking. Consider beginning your problem statement with an overview of what your strategy is for when menu items are enabled. You might be surprised at how, by explaining to someone else, you uncover something you did not notice before yourself. In other words, describe broadly first to help newcomers understand your project. (When you are elbows-deep in a project, it is easy to fet that no one else has experience with what you've been laboring with.) Try – eppineda Commented Mar 2 at 6:07
1 Answer
Reset to default 1To 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/ajax/libs/p5.js/1.11.2/p5.min.js" integrity="sha512-1YMgn4j8cIL91s14ByDGmHtBU6+F8bWOMcF47S0cRO3QNm8SKPNexy4s3OCim9fABUtO++nJMtcpWbINWjMSzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>