looking to detect drawn shapes

Jai

hello guys i come from Daniel's video Processing Tutorial and i was talking to him on there about this topic i posted, so ill just post what i posted on his comment section as he advised me to do.

looking for a algorithm that can detect what type of shape has or are being drawn in the window using the mouse? i would like to learn how to detect weather a circle has been drawn and if a line has been drawn from the middle of the screen? off set-it to either side of the screen on X or Y but starting in from home ? (middle of screen) "unless its a circle"

i need to do some IF statements saying to do something IF any of those conditions has been made

this is the code i came up with but some how its not working out for me what i wanted was for the background to be black and only turn red if i drag mouse to either side of the window "x" (left or right) and blue if i go to either side of the window "y" ( up or down ) i tried other logical operators such as || and && NOPE no luck

void setup() {
size(800, 360);
}

void draw() {
background(0);

if (mouseX > 499) {
background(255, 0, 0);

} else if (mouseX > 299) {
background(255, 0, 0);

}

if (mouseY > 266) {
background(0, 0, 255);

} else if (mouseY > 100) {
background(0, 0, 255);

}


stroke(255);
line(300, 0, 300, height);// X Left
line(500, 0, 500, height);// X Right
line(-30000, 175, 30000, height);// Y Top
line(-30000, -175, 30000, height);// Y Bottom
}  

Chrisir

whether

Chrisir

look at your > signs!!!!!!!!

Do all look correct?

Chrisir

this is a very confusing description of a simple problem....

Jai

im not following Chirsir , im saying if my mouse value is greater then any of the corresponding marked lines do something "background(0, 0, 255);...ect"

Jai

@Chrisir i even try something complex like this which to me is complex because i never used such a formula and though i know what im trying to say i dont think i translate that into code the same way i say it,

if ((mouseX > 499) ||(mouseX > 599) !(mouseX < 499) && !((mouseX < 599)){

Jai

(mouseX > 499) || (mouseX > 599) ok so between 499 & 599 theres a gap where non of this conditions should be met and on a window of 800x340 is smacked right in the middle just like the screenshot i posted....now is either 499 OR 599 and if the mouseX is greater then 499 screen should be black but if the mouse is inside of that 0-499 "far left" the screen should go background(255, 0, 0); other wise be black assuming were in the middle of the screen and therefor background(0);

&& (!(mouseX < 499) && (!(mouseX < 599)) ok here is me trying to say IF we are found in the middle of the screen dragging the mouse the screen should remain background(255, 0, 0);

so pseudo says "&&" and if mouseX is not less then 499 and "&&" mouseX is not less then 599 do background(0);

am i saying it wrong ? i know im doing something wrong im getting unexpected token: { and i think is because the parenthesis but is not telling me what about it is missing and it keep pointing at the brackets although those have matching open and closing brackets so im lost

and it wasn't the brackets it be me not getting the results im expecting based on my code

Chrisir

else if (mouseX > 299) { ??????

Chrisir

you posted this code:

void setup() {
size(800, 360);
}

void draw() {
background(0);

if (mouseX > 499) {
background(255, 0, 0);

} else if (mouseX > 299) {
background(255, 0, 0);

}

if (mouseY > 266) {
background(0, 0, 255);

} else if (mouseY > 100) {
background(0, 0, 255);

}


stroke(255);
line(300, 0, 300, height);// X Left
line(500, 0, 500, height);// X Right
line(-30000, 175, 30000, height);// Y Top
line(-30000, -175, 30000, height);// Y Bottom
}  

let's stick with this code and not bring in other code.

you use 4 times > here

but you should use 2 times > and two times <

Jai

OMG ARE YOU EFFIN SERIOUS!!!!!

Jai

i been breaking my head since 12am for just 2 "> <" ?

Jai

ughhhhhh i was just about to give up, thanks chris now im wondering what was so complex about this that daniel couldn't just tell me " you use 4 times > here " i gave him a copy of my code as well

Jai

ok now here is where im completely lost how do i go about doing this for a circle ? maybe this is what he meant was complex?

Chrisir

you mean whether the mouse is above or under the circle?

well, a circle is defined as all points have the same distance to the center

so you use dist() to check the distance

distanceFromCenter = dist (mouseX,mouseY, circleCenterX,circleCenterY); 

if (distanceFromCenter > radius)you are outside circle then you could check the x value or y value to see whether it's above or below

or use the angle:

// angle 

void setup()
{
  size(400, 400);   // always first line
  rectMode(CENTER);
  noStroke();
}


void draw()
{
  background(255); // white

  // atan2 returns the angle (in radians) 
  // from a specified point to the coordinate origin 
  // as measured from the positive x-axis
  float ang = atan2(mouseY-height*0.5, mouseX-width*0.5);


  // ---------------------------------------------------
  // using angle2 here 

  float angle2=ang;  
  if (angle2 < 0) 
    angle2 += TWO_PI;

  // text 
  fill(0); // black 
  text(degrees(angle2), 19, 19);

  // -------------------------------------------------
  // using ang here again  

  // and the rotating bar
  translate(width*0.5, height*0.5);
  rotate(ang);

  fill(200); // gray
  rect(0, 0, width*0.5, height*0.25);

  fill(255, 0, 0); // red 
  rect(width*0.16, 0, width*0.18, height*0.01);
}

Chrisir

I am off

see you tomorrow maybe

Jai

thank you chrisir this should get me in the right direction appreciate a lot

TfGuy44

My absolutely most favorite part about this is the way that you are drawing "horizontal" lines. :))

Here's a fixed version of the code you've posted so far:

void setup() {
  size(800, 360);
}

void draw() {
  background(0);
  if (mouseX > 500) {
    background(255, 0, 0);
  } else if (mouseX < 300) {
    background(255, 0, 0);
  }
  if (mouseY > 266) {
    background(0, 0, 255);
  } else if (mouseY < 100) {
    background(0, 0, 255);
  }
  stroke(255);
  line(300, 0, 300, height);// X Left
  line(500, 0, 500, height);// X Right
  line(0, 100, width, 100);// Y Top
  line(0, 266, width, 266);// Y Bottom
}

But this really has very little to do with what it sounds like you want to do. You want to detect what shape a user is drawing, right?

Jai

lol i knew i was doing something wrong the lines did not look straight to me but they kinda did so i did not knew if my eyes were playing with my hear for starring at the screen so long trying to figure out what Chrisir helped me on lol thanks TFguy44

Jai

@tfguy44 yes, i want to know what direction the mouse is heading in the draw window starting from the middle position

Chrisir

??

that's again something totally new....

anyway.....

then you want to compare pmousex and pmousey to mousex and mousey....

Jai

@Chrisir thanks ill look into that implementation

Jai

@Chrisir also how can i have the 0 degrees pointing at 12 o clock ?

in this line i thought maybe if i change it to jus read PI it would do only 0 to 180 which it did but im not getting negative readings because 90 degrees is set by your formula to be at 12 o clock and i would like 0 degrees at 12 and 180 degrees being 6 o clock.

 if (angle2 < 0) 
        angle2 += PI;

// angle 

void setup()
{
  size(400, 400);   // always first line
  rectMode(CENTER);
  noStroke();
}


void draw()
{
  background(255); // white

  // atan2 returns the angle (in radians) 
  // from a specified point to the coordinate origin 
  // as measured from the positive x-axis
  float ang = atan2(mouseY-height*0.5, mouseX-width*0.5);


  // ---------------------------------------------------
  // using angle2 here 

  float angle2=ang;  
  if (angle2 < 0) 
    angle2 += PI;

  // text 
  fill(0); // black 
  text(degrees(angle2), 19, 19);

  // -------------------------------------------------
  // using ang here again  

  // and the rotating bar
  translate(width*0.5, height*0.5);
  rotate(ang);

  fill(200); // gray
  rect(0, 0, width*0.5, height*0.25);

  fill(255, 0, 0); // red 
  rect(width*0.16, 0, width*0.18, height*0.01);
}

Chrisir

dunno

angle2=angle2-90;
if(angle2<360)
       angle2=360--angle2;

?

Jai

GoToLoop

angle2=360--angle2; => angle2 = 360 - angle2;

Jai

i keep getting syntax error asking me if im missing a semicolon

Jai

im not sure if you meant for me to adjust like so or what but this is what i did Loop

  float angle2 = angle2 - 90;
  if (angle2 < 360)
    angle2 = 360 - angle2;

and because of that im getting a

The local variable angle2 may not have been initialized

GoToLoop

At float angle2 = angle2 - 90;, you're declaring a variable called angle2.
But at the same time, you're trying to read from it before it even exists!
Perhaps you've meant the previous ang variable?: float angle2 = ang - 90; :-/

Jai

lol actually this is chrisir suggestion, my code was already working, this is just an addon from chrisir which it has potential once we can get this values set loop thanks for the point out chrisir did kinda questioned this edit your questioning or should i say that you spotted. ill try again

BUT now im getting some crazy digits after your suggestion

25 thousand degrees ? WOOOOOoooooW

Chrisir

// angle test
// with 0° being North for angle3

void setup()
{
  size(400, 400);   // size() always first line
  rectMode(CENTER);
  noStroke();
}


void draw()
{
  background(255); // white

  // atan2 returns the angle (in radians) 
  // from a specified point to the coordinate origin 
  // as measured from the positive x-axis
  float ang = atan2(mouseY-height*0.5, mouseX-width*0.5);

  // ---------------------------------------------------
  // using angle2 and angle3 here 

  // angle2 has 0° in the east (in radians)
  float angle2=ang;  
  if (angle2 < 0) 
    angle2 += TWO_PI;

  // angle3 is the angle with 0° being in the north (in radians)
  float angle3 = angle2+HALF_PI; // HALF_PI is 90° in radians 
  if (angle3>=TWO_PI)  // TWO_PI is 360° in radians 
    angle3 = angle3-TWO_PI;

  // text 
  fill(0); // black 
  text(degrees(angle2)
    +" -> "
    +degrees(angle3)
    +" -> "
    +int(degrees(angle3)), 19, 19);

  // -------------------------------------------------
  // using ang here again  

  // the rotating bar
  translate(width*0.5, height*0.5);
  rotate(ang);

  fill(200); // gray
  rect(0, 0, width*0.5, height*0.25);

  fill(255, 0, 0); // red 
  rect(width*0.16, 0, width*0.18, height*0.01);
}
//

Chrisir

my code was already working

hm.. actually that was my code that was working (which I in turn took from the forum mostly)

Remark

Look at this sentence from you:

this is just an addon from chrisir which it has potential once we can get this values set loop thanks for the point out chrisir did kinda questioned this edit your questioning or should i say that you spotted. ill try again

It's a mess. You don't proof read what you write. I suggest you use a point (full stop) or a comma where appropriate. Start a sentence with a Capital. Make a new paragraph (two line breaks).

The reason why I tell you this is that you can be only a good programmer when you have respect for the language you use be it processing or English.

You haven't spotted the difference between > and < and you haven't spotted the difference between weather and whether. Same thing.

The way you write also shows your respect for the person you're writing to. Just slow down when you write, ok?

Jai

@Chrisir respect coming out of me is implied not expressed, and if you cant see that the issue is that you might want others to solute you rather then just say "good day sir" NOT everyone you cross path with when to university or have a care in grammatically conventions most people just want to get their point across slang or what not, being humans grants you intelligence to make up for what is not there, so when your talking to anyone "anything that they leave out you fill in" i see this all the time specially on the internet so please dont be "that guy" so Christopher "Sir" dont be up tight just because people dont meet up to your expectations is called life and everyone is different, just take pride in knowing your unique and that makes you YOU. ok? ;)

my apologies if you did not feel i was respecting you by not using my commas and punctuation mannerly/conventionally but i think anytime anyone helps anyone its sorta implied that you respect that individual and mostly expressed by a simple thank you sir/mam AFTER the help is render, anything in between its consider a friendly talk assuming no negative conversations are taking place, but ill try to use more of the -right write alright?- "try saying that 3 times fast

Now getting back to business i tried your new code and i wonder what is it that your seeing on your end that you call "working" because now i see that the code, i dont know but it looks like you just keep adding to the code since it looks different comparing to the very 1st attempt "which by the way was just fine"

this code below is perfect all we need is to turn it ccw so that 0 is at 12 o'clock chrisir

// angle 

void setup()
{
  size(400, 400);   // always first line
  rectMode(CENTER);
  noStroke();
}


void draw()
{
  background(255); // white

  // atan2 returns the angle (in radians) 
  // from a specified point to the coordinate origin 
  // as measured from the positive x-axis
  float ang = atan2(mouseY-height*0.5, mouseX-width*0.5);


  // ---------------------------------------------------
  // using angle2 here 

  float angle2=ang;  
  if (angle2 < 0) 
    angle2 += PI; "ALL I CHANGED WAS THE TWO_PI TO SAY JUST PI "

  // text 
  fill(0); // black 
  text(degrees(angle2), 19, 19);

  // -------------------------------------------------
  // using ang here again  

  // and the rotating bar
  translate(width*0.5, height*0.5);
  rotate(ang);

  fill(200); // gray
  rect(0, 0, width*0.5, height*0.25);

  fill(255, 0, 0); // red 
  rect(width*0.16, 0, width*0.18, height*0.01);
}

/****************************************************************/

Here in this code i got it to do this using the function known as constrain this here is what i like from this code you found Chrisir the constrain being the scale of 0 at 12 o'clock and ccw will be negative 90- and cw from 0 will be 90

float mx = 0.0;

void setup() {
  size(200, 200);
  noStroke();
  frameRate(10);
}

void draw() {
  background(0);
  fill(204); 
  rect(40, height / 2 - 15, 120, 25); 
  float dif = mouseX - mx;
  if (abs(dif) > 1.0) {
    mx += dif / 4.0;
  }
  mx = constrain(mx, 50, 149);
  noStroke();
  fill(255);
  rect(50, (height / 2) - 5, 100, 5);
  fill(204, 102, 0);
  rect(mx - 2, height / 2 - 5, 4, 5);
  int val = int(map(mx, 50, 149, 0, 180));
}

Chrisir

??

I posted a new code. Did you run it?

It gives you the angle with 0 degree being north now - the value is in the variable angle3.

Jai

i did ran it and im not getting 0 at north im getting 3 sets of numbers in degrees

Jai

im not getting -90 ccw 0 at north and 90 on cw, i think its because you're still using TWO_PI rather then just PI or HALF_PI

Chrisir

It's you're, not your.

Jai

@Chrisir in this formula i found that it is excectly what i need but again im still not getting 0 at north "its on the right cw" and when i head from north ccw i get negative numbers "this is great" but it dont go to 90 it goes to 181

float angle2=ang;  
  if (angle2 < 0) 
    angle2 += HALF_PI;

Jai

you're right, sorry.

Chrisir

Hello,

I am sorry, I am not sure what you mean.

I think the sketch by me does what you want.

Look at the full sketch I posted directly before my little speech about language.

(After your "WOOOOOoooooW").

It's a full working sketch. The entire sketch (sorry, English is not my first language).

This sketch prints 3 numbers separated by "->" in the upper left corner.

The 2nd and the 3rd number are what you want.

In the code it's angle3.

I just downloaded the sketch and ran it again to make sure.

• Do you mean "north" as in "upper part of the screen"?

Best, Chrisir ;-)

Jai

Yes Chrisir north is always up lol "north pole" you know UP north im in America so the north pole is up north through Canada.

also lets not forget please that i need negative number being ccw to read -90 degrees and cw reading 90 degrees Chrisir.

This is why i advised to use HALF_PI as we only need to monitor anything facing you from -90 to 90 where 0 degrees is straight ahead Chrisir

We dont care about anything behind or anything on the opposite of what would be opposite to anything in (front -90, 0, 90)

Jai

behind meaning 90, 180, -90

Jai

See Chrisir, like this.

Jai

Chrisir

just change the code as it pleases you, Sir.

I was assuming a normal compass :

https://upload.wikimedia.org/wikipedia/commons/6/61/Kompassrose.svg

but just change your code as you like -

Chrisir

I don't understand your graphic:

would south be 180 degree and also -180 degrees?

or in other words, do you want

• the right side of the circle go from 0 over 90 to 180 degrees and

• the left side of the circle go from 0 over -90 to -180 degrees?

Jai

i dont want to read any 180 no where just -90 & 90 and 0 being the center point "off center from the center to ccw -90 or cw 90 , maybe your getting confused because you're assuming i wanted or was aiming to make a compass when im not, this suppose to be a alignment visual tool

Jai

the screenshot i posted was just a reference since we were speaking in north and south pole since you did not understood me when i said 0 degrees being at 12 o clock, this tool will be used to get the angle of alignment from me facing the platform i want to align so there no need for a 180 because there nothing behind me im trying to align, and if there was i would just turn around chrisir and therefor ill be again facing it dead on

Chrisir

angle3 or degrees(angle2) has the value you want

// angle test
// with 0° being North for angle3



//the right side of the circle go from 0 over 90 to 180 degrees and

//the left side of the circle go from 0 over -90 to -180 degrees?

void setup()
{
  size(400, 400);   // size() always first line
  rectMode(CENTER);
  noStroke();
}


void draw()
{
  background(255); // white

  // atan2 returns the angle (in radians) 
  // from a specified point to the coordinate origin 
  // as measured from the positive x-axis
  float ang = atan2(mouseY-height*0.5, mouseX-width*0.5);

  // ---------------------------------------------------
  // using angle2 and angle3 here 

  // angle2 has 0° in the east (in radians)
  float angle2=ang;  
  if (angle2 < 0) 
    angle2 += TWO_PI;

  // angle3 is the angle with 0° being in the north (in radians)
  float angle3 = angle2+HALF_PI; // HALF_PI is 90° in radians 
  if (angle3>=TWO_PI)  // TWO_PI is 360° in radians 
  { 
    angle3 = angle3-TWO_PI;
  }

  if (angle3>PI) 
    angle3=map(angle3, PI, TWO_PI, -PI, 0);

  // text 
  fill(0); // black 
  text(degrees(ang) + "===> " 
    +degrees(angle2)
    +" -> "
    +degrees(angle3)
    +" -> "
    +int(degrees(angle3)), 19, 19);

  // -------------------------------------------------
  // using ang here again  

  // the rotating bar
  translate(width*0.5, height*0.5);
  rotate(ang);

  fill(200); // gray
  rect(0, 0, width*0.5, height*0.25);

  fill(255, 0, 0); // red 
  rect(width*0.16, 0, width*0.18, height*0.01);
}
//

Jai

@chrisir is their a reason why you have it set to show all those other sets of values on the top right ?

Chrisir

No.

Jai

lol ok well then you shouldn't have it's like your telling me something indirectly by doing that, thanks anyhow Chrisir.

By the way who wrote the example sketch of the processing ? i found some mistakes in it specially in the implementation of the Arduino, i would like to direct my comment and findings to that individual.