Help with Project on Placing shapes where mouse is at

Processing Coding Questions
1

I’m working on a project but for I can’t for the life of me understand why nothing is showing up on the canvas and am running out of patience. Can anybody tell me what’s wrong? The overall project needs buttons on the canvas to click on for a shape. Then clicking anywhere on the canvas will draw said shape. Attached is a drive folder of my code

https://drive.google.com/open?id=1xHS4C7kPiDO0yATHce0n-PxWPfkMBn2O

2

This is one of those issues that you can easily overlook, and when I tell you what is wrong you are going to kick yourself.

Your main draw() function is mistakenly called drawShape().

3 Likes
3

OH MY GOD I CANNOT BELIEVE THIS! Thank you so much!

If you don’t mind also helping, the shapes are not being placed where the mouse is at? I’ve had a problem with that and haven’t been able to figure it out now.
Also, the clear() doesn’t seem to be clearing the canvas.

Thanks for the help! Greatly appreciate it!

4

Use background([color]) to clear the canvas, this can be done every frame or, what would more likely be useful in your case, you could say background(255) when a certain key is pressed to clear all drawn shapes.

5

I seem to be doing something wrong? No matter where I add the backgroud(255), the shapes don’t clear up. I tried putting it in the ClearAllButton class, the switch case 6, and on the clearShapes()

6

To clear your sketch, you’ll need to remove all the shapes you’ve added to your ArrayList. if you don’t remove them, they’ll just be redrawn again immediately! Essentially, you aren’t clearing the screen so much as removing all the things that you are drawing.

2 Likes
7

Just downloaded and looked at your code (should’ve done it first instead of jumping to conclusions haha). TfGuy is right, clear the array and the shapes won’t get drawn.

EDIT: i looked more at your code, you should store the buttons in a separate array, otherwise every time you empty it you will have to re-add all the buttons.

1 Like
8

Thank you! All I need now is to figure out why the shapes aren’t being placed on my mouse position!

9

So, looking at Shape1, you need to add back in the push and pop matrix functions so that the location on your screen where you click is the same as where the vector points to. For example, if you have the canvas rotated 180 degrees and you click at (50, 50) your shape will actually get drawn at (-50, -50).

Next problem I noticed is that you have the abstract class that keeps track of xpos and ypos. Since these are kept track of there you don’t have to reinitialize them in the child class. Infact, becuase of the way processing works it will use the child’s version of xpos instead of the parent’s, which is another contributing factor to the wrong location of the shapes.

If you go through all your shapes and just double check that you’re pushing and popping whenever you are doing a transformation and that you aren’t overriding the variables stores in AbstractShape, everything should work. Best of luck.

1 Like
10

Sorry to bother again, but I am having trouble putting hte buttons in a separate array since when I do, they don’t call the shapes to be drawn? I’m pretty sure i’m missing something simple again

11

This is what your main looks like after splitting the shapes and buttons.

ArrayList<AbstractShape> components = new ArrayList();
ArrayList<AbstractShape> buttons = new ArrayList(); // seperate array for buttons

int selectedButton;

void setup() {
  //fill(255);
  size(600, 600, P3D);
  
  buttons.add(new Shape1Button(10, 10)); // add buttons to new array
  buttons.add(new Shape2Button(10, 30));
  buttons.add(new Shape3Button(10, 50));
  buttons.add(new Shape4Button(10, 70));
  buttons.add(new Shape5Button(10, 90));
  buttons.add(new ClearAllButton(10, 110));
  

}

void draw() {
  background(255);

 // println(components.size());
   
  // Iterate over the list and draw each shape object. 
  for (AbstractShape component : components) {
    component.drawShape();
  }
  
  for (AbstractShape button : buttons) { // draw the buttons
    button.drawShape();
  }
}

/** 
 ^ Add Shape when key is pressed where mouse is positioned
 */
void mousePressed() {

  for (AbstractShape i : buttons) { // removed if statement
      AbstractButton button = (AbstractButton)i;
      if (button.isMouseWithin()) {
        button.onPress();
        return;
      }
  }
  
  AbstractShape as = null;
  switch(selectedButton) {
  case 1:
    as = new Shape1(mouseX, mouseY);
    components.add(as);
    break;
  case 2:
    as = new Shape2(mouseX, mouseY);
    components.add(as);
    break;
  case 3:
    as = new Shape3(mouseX, mouseY);
    components.add(as);
    break;
  case 4:
    as = new Shape4(mouseX, mouseY);
    components.add(as);
    break;
  case 5:
    as = new Shape5(mouseX, mouseY);
    components.add(as);
    break;
  case 6:
    clear();
    break;
  }
}

void clearShapes() {
 clear(); 
}

I went through and fixed each object too. Here’s the link with everything working correctly(?) https://drive.google.com/open?id=1HM2Cudd3YqN6NJvuTd4vLHYFMYvGR_f5

1 Like
12

I managed to fix each object as well with no struggle, it was just the separate array confusing me! But thank you so much for you help, I really appreciate it!

1 Like