Create an ellipse depending on mouse coordinates

Siunami

I'm looking to create an ellipse at a certain coordinate depending on the Mouse coordinates. Depending on the mouse position, the dot will be placed on one of the positions of the fret board. Thanks for the help!

PImage img;
float X_Space = 32;
float Y_Space = 33;
float X_Base = 63;
float Y_Base = 28;

void setup(){
 size(576,144);
 img = loadImage("Ukulele.png");


}

void draw(){
  image(img, 0, 0);
  ellipse(X_Base+(4*X_Space),Y_Base,20,20);

jas0501

Just imagine a circle over each intersection and then use OverCircle() to determine the position. On mouse release loop over the positions to find the location. A release between circles will be a dead zone.

x,y is the line intersection, the diameter, the distance between frets

       boolean overCircle(int x, int y,int diameter) 
       {
              return (dist(x,y,mouseX,mouseY) < diameter/2);
       }

GoToLoop

Faster alternative for overCircle(): ;;)

// forum.processing.org/two/discussion/6247/
// do-these-functions-exist

// forum.processing.org/two/discussion/6250/
// create-an-ellipse-depending-on-mouse-coordinates

boolean isMouseWithinDiam(int x, int y, int d) {
  return sq(x-mouseX) + sq(y-mouseY) <= sq(d>>1);
}

jas0501

Under the heading of

Make it work, make it right, make it run faster...

Surprised no one suggested an optimization for calculating the column based on x, then the row, based on y, and checking the specific circle, and not looping over the 60 positions.

However for user interaction over a small number of fret positions it could be over-kill.

koogs

no need for any distance calculations or any iterating - it's a grid with equal spacing in both directions (see lines 2-5).

just take the offset off the mouse position, integer divide it by the spacing. multiply it by the spacing and add the offset back on and that should've aligned it to one of the frets. (give or take half a spacing)

(think that's right - will supply a code example when i'm not at work)

GoToLoop

I've got an online example which places rects by offset in a double loop to form a grid: =:)
http://studio.processingtogether.com/sp/pad/export/ro.98-pSvW97Q-RE/latest

koogs

which is completely unrelated. he HAS the grid, it's a png, it's attached in the question.

koogs

ok, something like this. unfortunately the image attached doesn't quite match the numbers given - it might've been resized by the forum or during the download.

// ukulele
// acd 2014
PImage img;
float xSpace = 32;
float ySpace = 33;
float xBase = 45;
float yBase = 28;
private static final int RAD = 10; // radius of circle

void setup(){
  size(576, 144);
  img = loadImage("ukulele.png");
  smooth();
  ellipseMode(RADIUS);
}

void draw(){
  image(img, 0, 0);
  // don't draw if off grid
  if (mouseX > (xBase - RAD) && mouseY > (yBase - RAD)) {
    // maths!
    float ex = Math.round((mouseX - xBase) / xSpace) * xSpace + xBase; 
    float ey = Math.round((mouseY - yBase) / ySpace) * ySpace + yBase;
    ellipse(ex, ey, RAD, RAD);
  }
}