Now I have the below code for me to draw the triangle, but the shape expand direction is not what I want. I would like to have the equilateral triangle expand symmetrically from the mouse position. How should I adjust this?
function DrawTriangle() {
this.icon = "assets/triangle.jpg";
this.name = "DrawTriangle";
this.color = "black"; // Default color is black
var startTriX = -1;
var startTriY = -1;
var drawingTri = false;
this.draw = function() {
if (mouseIsPressed) {
if (startTriX == -1) {
startTriX = mouseX;
startTriY = mouseY;
drawingTri = true;
loadPixels();
} else {
updatePixels();
stroke(this.color); // Set the stroke color to the selected color
strokeWeight(5);
// Calculate the height of an equilateral triangle
var triHeight = (mouseX - startTriX) * Math.sqrt(3) / 2;
// Draw an equilateral triangle using the mouse position as the third vertex
triangle(startTriX, startTriY, mouseX, mouseY, startTriX + (mouseX - startTriX) / 2, startTriY + triHeight);
noFill();
}
} else if (drawingTri) {
drawingTri = false;
startTriX = -1;
startTriY = -1;
}
}
}