Let's Make Robots!

A little help with processing code...

alright I started with some sample code and it worked great -- I was able to left and right click on the square and send one of 2bytes via serial to my picaxe board. Here is the sample code:

import processing.serial.*;
Serial myPort;  
void setup(){
// Click within the image and press
// the left and right mouse buttons to
// change the value of the rectangle
 myPort = new Serial(this, "COM15", 9600);
 }
void draw() {
  if (mousePressed && (mouseButton == LEFT)) {
    myPort.write(65);
    delay(100);
  } else if (mousePressed && (mouseButton == RIGHT)) {
    myPort.write(70);
 
  }
  rect(25, 25, 50, 50);
}


Now i am trying to expand on this to 4 squares and sending 4 different bytes with a left click on each square. However, I simply can't figure out how the code connects the square that is drawn to the click that pertains to it. I would assume it has to do with what things are included in the { }'s but man, I am stumped. Any thoughts? Here is my feeble attempt at it:

 

 

 

import processing.serial.*;
Serial myPort;  
void setup(){
   size(600,600);
// Click within the image and press
// the left and right mouse buttons to
// change the value of the rectangle
 myPort = new Serial(this, "COM15", 9600);
 }
void draw() {
  if (mousePressed && (mouseButton == LEFT)) {{
    myPort.write(65);
    delay(100);
  }
  rect(275, 200, 50, 50);
}

 if (mousePressed && (mouseButton == LEFT)) {{
    myPort.write(75);
    delay(100);
 }
  rect(275, 400, 50, 50);
 }

 if (mousePressed && (mouseButton == LEFT)) {{
    myPort.write(85);
    delay(100);
  }
  rect(200, 275, 50, 50);
}


 if (mousePressed && (mouseButton == LEFT)) {{
    myPort.write(95);
    delay(100);
  }
  rect(400, 275, 50, 50);
 }

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

This example had a HUGE disadvantage. You need to define each rectangle AND then you must also put the effective coordinates of each rectangle in a separate if/then condition. Blech.

void setup(){
  size(600,600);
}
void draw() {
  rect(275, 200, 50, 50);   // rect A
  rect(275, 400, 50, 50);   // rect B
  rect(200, 275, 50, 50);   // rect C
  rect(400, 275, 50, 50);   // rect um

  if (mousePressed && (mouseButton == LEFT)) {
    {
      println(mouseX + " " + mouseY);
      if (mouseX >= 275 && mouseX <= 325 && mouseY >= 200 && mouseY <= 250) {
        println ("you clicked inside rect A");
      }
      delay(100);
    }
  }
}


 

 

This bit of code would seem to do the trick and keeps things pretty clean.

You define the boxes prior to the draw function. I could see this working perfectly with some modification

http://www.learningprocessing.com/examples/chapter-5/example-5-5/

I knew there had to be a "button code"! I think you have found it, me matey! New "vitural control panel" here I come!

I modified the code to use a conditional to reduce the amount of coded needed...works great...just replace the println with what you want to do. myport.write command and such

 

void mousePressed() {
  if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
  clicked = (mouseButton == LEFT) ? 85:95;
  println(clicked);
  } 
}

EDIT: As a side note, this does not check for a center button click. it's left otherwise right or center button would do the same thing.

Full code

//LOTS OF SQUARES!!!
boolean button = false;
int clicked = 0;
int x1 = 20;
int y1 = 20;
int w1 = 50;
int h1 = 35;

int x2 = 80;
int y2 = 20;
int w2 = 50;
int h2 = 35;


void setup() {
  size(200,200);
}

void draw() {
  if (button) {
    background(255);
    stroke(0);
  } else {
    background(0);
    stroke(255);
  }
 
  fill(175);
  rect(x1,y1,w1,h1);
  rect(x2,y2,w2,h2);
}

// When the mouse is pressed, the state of the button is toggled.  
// Try moving this code to draw() like in the rollover example.  What goes wrong?
void mousePressed() {
  if (mouseX > x1 && mouseX < x1+w1 && mouseY > y1 && mouseY < y1+h1) {
  clicked = (mouseButton == LEFT) ? 85:95;
  println(clicked);
  }
  if (mouseX > x2 && mouseX < x2+w2 && mouseY > y2 && mouseY < y2+h2) {
  clicked = (mouseButton == LEFT) ? 65:55;
  println(clicked); 
  }
}

what are these extra numbers at the end? (in bold)

clicked = (mouseButton == LEFT) ? 65:55;

 

I'm misunderstanding the "clicked" part as well

if true, set clicked=65 if false clicked=55

it's like a shortend version of if/else...

 http://processing.org/reference/conditional.html

you defined clicked as an int --I didn't see it at first

 

with the original set-up the square is irrelavent. You can click anywhere on the background. Please disregard all the squares stuff...

New question:

could you point me in the direction of code I would need to create "objects"? to "click on"? I added question marks because I don't know the lingo.

 

A square would be considered an object once you defined it and ran the app.

This might be what you're looking for, but it starts getting a bit complex...

note the link...you're getting into chapter 22 territory before going through 1-21....

http://www.learningprocessing.com/examples/chapter-22/example-22-1/

 

http://gui4processing.lagers.org.uk/distribution/web/index.html

 

Theres a link to a gui library, is that what you are looking for? 

If its not or you are looking for how to write your own you would need to place squares on the screen using the coordinates to place them, and then write something to detect when the mouse is clicked over it. 

 

 

http://processing.org/reference/libraries/#interface

 

 

Heres a list of other libraries that you can use.

 

 

http://processing.org/reference/

 

And here a list of functions for processing incase you want to write your own or expand on the others.