Guidelines for removing a 2D Primitive in processing

I am facing issues with deleting 2D primitives. I attempted to create a rectangle in front of these primitives to conceal them. However, I need to hide them when clicking somewhere, which leads me to believe that the draw() function is overriding the mouseclicked.

In my code snippet, "maFenetre" represents what I intend to hide/delete.

float windowHeight = 700;
float windowBar = 50;
float xIcon = 80;


float x = random(0, 500);
float y = random(0, 800);


color red = #FF0000;
color white = #FFFFFF;

void setup() {
  size(1500, 1500); 
  background(#C1C1C1);

  
}

void rectangle(){
  rect((x + windowWidth) - xIcon, y, xIcon, windowBar);
}

void maFenetre(){
      
  
  //window
  noStroke();
  fill(#89E0FF);
  rectMode(CORNER);
  rect(x, y, windowWidth, windowHeight);
  
  //crossbar
  rectMode(CORNER);
  fill(white);
  noStroke();
  rect(x, y, windowWidth, windowBar);
  
  if ((mouseX >= (x + windowWidth) - xIcon && mouseX <= x + windowWidth) && (mouseY >= y && mouseY <= y + windowBar)) {
    fill(red);
    rectangle();
   
}

   //expand bar
   
   if ((mouseX >= (x + windowWidth) - xIcon * 2 && mouseX <= (x + windowWidth) - xIcon) && (mouseY >= y && mouseY <= y + windowBar)) {
     fill(#CEDDDE);
     noStroke();
     rect((x + windowWidth) - xIcon * 2, y, xIcon, windowBar);
   
  }
 
 
 //shrink bar
 
   if ((mouseX >= (x + windowWidth) - xIcon * 3 && mouseX <= (x + windowWidth) - xIcon * 2) && (mouseY >= y && mouseY <= y + windowBar)) {
     fill(#CEDDDE);
     noStroke();
     rect((x + windowWidth) - xIcon * 3, y, xIcon, windowBar);
   }
   
   
   //shrink icon
   
   stroke(#000000);
   strokeWeight(2);
   line((x + windowWidth) - xIcon * 2.65, y + windowBar/2,(x + windowWidth) - xIcon * 2.35, y + windowBar/2);
   
   
   //expand icon
 
   stroke(#000000);
   strokeWeight(2);
   noFill();
   rectMode(CENTER);
   rect((x + windowWidth) - xIcon * 1.5, y + windowBar/2, 20, 20);
 

  //close icon
  stroke(#030303);
  strokeWeight(2.5);
  line((x+windowWidth)-xIcon*0.62,y+windowBar*0.35,(x+windowWidth)-xIcon*0.38,y+windowBar*0.75);
  line((x+windowWidth)-xIcon*0.62,y+windowBar*0.75,(x+windowWidth)-xIcon*0.38,y+windowBar*0.35);
    
}

void draw() {

  maFenetre();

}


void mouseReleased(){
  if (mousePressed == ((mouseX >= (x + windowWidth) - xIcon && mouseX <= x + windowWidth) && (mouseY >= y && mouseY <= y + windowBar))){
  }
    else{
      noStroke();
      rectMode(CORNER);
      fill(#C1C1C1);
      rect(x-1, y-1, windowWidth+2, windowHeight+2);
  }

}

Answer №1

Modifying the visibility of an object in a drawing program. Introduce a boolean variable to control whether the object should be displayed or not. Update this variable based on user interaction:

boolean displayMyObject = true;

void draw() {
    // [...]

    rectMode(CORNER);
    if (displayMyObject) {
        rect(x, y, w, h);
    }
}

void mouseReleased(){
    if (mouseX >= x-w/2 && mouseX <= x+w/2 && mouseY >= y-h/2 && mouseY <= y+h/2){
        displayMyObject = false;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Two Dropdown Selections to Create a Unique Name using Angular

I am facing a challenge with 2 dropdown values and input fields, where I want to combine the selected values from the dropdowns into the input field. Below is the HTML code snippet: <div class="form-group"> <label>{{l("RoomType")}}</labe ...

Tips for finding the correct file path for a .js file when utilizing the require function

I am currently working on an ExpressJS project and I am facing an issue with using a .js module inside another. Despite using require to retrieve the .js module, it appears that the path is incorrect which is preventing me from locating the module. How can ...

The issue with MUI material autocomplete not functioning properly when onBlur is triggered

Although the onFocus parameter is working fine in material autocomplete, I'm facing an issue with the onBlur parameter. Can someone explain why this might be happening and provide a correct solution to implement it? <Autocomplete onBlur={() ...

Find the names of keys which have a value of true in reactjs

Greetings, I have a JSON file that contains information about different components. I am trying to extract only the Dashboard and Datatable sections where the "visible" attribute is set to true. { "MTs": { "Dashboard": { "id": 1, "visible ...

Utilizing Pusher to transfer user deposit and withdrawal information from client to Node.js (Express) server: A step-by-step guide

I have subscribed to "my-channel" and connected to "my-event" on the client side. pusher.html <!DOCTYPE html> <head> <title>Pusher Test</title> <script src="https://js.pusher.com/5.0/pusher.min.js"></script> < ...

The invocation of res.json() results in the generation of CastError

An issue occurs with CastError when using res.json() with an argument: CastError: Failed to cast value "undefined" to ObjectId for the "_id" field in the "Post" model Interestingly, using just res.status(), res.sendStatus(), or res.json() without argument ...

Struggling to maintain context with axios in React despite diligent use of arrow functions

In my component, I have a function for posting data. Although it works well, the context of my component is lost in the success message. This is puzzling because I am using arrow functions. Why does the "this" context get lost in this situation? The issu ...

Troubleshooting: jQuery custom password rule implementation issue

I'm a beginner with jQuery and I'm using the jQuery form validator to validate my form. The issue I'm facing is that I need to ensure the password contains at least one digit. After some research on Google, I came across an example on the ...

Successful Ajax Form Submission but Fails to Receive Response

I am currently working on a feature where users can select a record from a menu to delete it from the database. Below this menu, there is a table displaying all records from the database. Even though the record gets deleted and reflects in the table upon m ...

JavaScript Removing Event Listener with Callback and Parameter

I am currently attempting to implement the following: el.addEventListener('scroll', callFunc); el.removeEventListener('scroll', callFunc); However, I want to use a callback function with parameters like this: el.addEventListener(&apos ...

Concealing Social Security Numbers using AngularJS

I am currently working on masking SSN numbers using AngularJS. Expected Outcome: Before applying mask (onFocus) After applying mask (onBlur) Users are only allowed to enter numbers, and the SSN formatting is handled by filters. Below is a sample of the ...

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

Can a correctly typed text alter the image?

I am working on a feature where the image changes when the user enters the correct text, indicating that it was typed correctly. However, I am facing an issue where if the first two characters are entered correctly but the third one is not, the image still ...

Mocking objects in unit test cases to simulate real-life scenarios and test the

How do I pass a mocked event object and ensure it is validated? onCallFunction() { const eventValue = event; if (!eventValue.relatedTarget || !eventValue.relatedTarget.last.contain('value')) { super.onCallFuncti ...

Search for a specific folder and retrieve its file path

Is there a way for me to include an export button on my webpage that will allow users to save a file directly to their computer? How can I prompt the user to choose where they want to save the file? The button should open an explore/browse window so the ...

I am experiencing an issue with my meteor insert not functioning when triggered by a click event. Oddly, no error messages are being

When a user clicks, data or an object from one collection is being transferred to another. The image below represents the individual object that is being moved. https://i.sstatic.net/PVX2q.png This click event is crucial in this process. Template.postsV ...

Building a single-page app optimized for mobile viewing with Foundation framework

Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...

utilizing javascript to compare the data in a gridview with the value entered in a

I am looking to compare the values entered in my textbox with the existing values in a gridview. I have achieved this on the server side using the following function: protected void isRecordAlreadyExist(TextBox txt_Value, int res) { ds_main = new Data ...

Encountering a Issue in Transmitting Data from Laravel Controller to Ajax using Jquery GET Method with

Currently, I am utilizing Laravel 5.4 as the Backend server technology. Below is the Controller code snippet from my Backend: $locations = Neighborhood::where('House_id', $id)->get(); $json = json_encode($locations); return respon ...

Transforming numerical figures into written form within a specified range: A step-by-step guide

I have a unique custom range design that I have personally customized. Beneath each step of the range, there is a value displayed in a stylish green box. https://i.sstatic.net/vzeRK.png My query is regarding how I can replace the numeric values with tex ...