## Help with JSUI coordinates and defining a circular area for onclick

Dec 26, 2009 at 7:39pm

# Help with JSUI coordinates and defining a circular area for onclick

Hi.

I was wondering if anyone here could help me find a solution to my problem.

I have created 12 framed circles, each embedded within the other. The smallest being 0.1 and the largest having a radius of 1.0. Creating 12 rings. I am trying to work it out so that when I click within the bounds of one of these rings it will fill. I am having difficulty translating the screentoworld Cartesian coordinates(-1. to 1.) into an area that has an arc for a boundry. How does one define an area that has an arc?
I was thinking that If I subtract the onclick x, y from itself, then wherever I click would always return and x,y of 0,0.
From there I just need a way to determine a circular area size from 0,0 and check whether the mouse event happens within the bounds of that area.
I’m just not sure how to go about doing this :(
Any help or example would be greatly appreciated!
Thank you for your time and attention!!
~W

#47423
Dec 27, 2009 at 11:00am

if i get you right, you might like to look at pythagoras’ theorem to calculate the distance of the click location to the origin of the circle(s) you want to test. if the distance is smaller than the radius, then you are inside the circle.

i’ve been doing something similar recently, so here goes a little example
(hm, lets see how the form treats js code…):

``````function bang() {
reset();
}

var numCirc = 12;					// number of circles
var colorCirc = [0.3, 0.3, 0.3, 0.1];	// color of circle not clicked
var colorClick = [1, 0, 0, 0.3];		// color of circle clicked
var bingo = 0;	// click flag

function reset() {
with(sketch) {
glclear();
moveto(0,0);
glcolor(colorCirc);
for(i=numCirc; i>0; i--)
circle((i)/numCirc);
bingo = 0;
}
refresh();
}

function onclick(x, y) {
// x,y: clicklocation, convert to world coordinates
var pos = sketch.screentoworld(x,y);
// calc distance (Pythagoras)
var dist = Math.sqrt( pos[0]*pos[0] + pos[1]*pos[1] );
// start from smallest circle, if distance within radius --> bingo!
for(i=1; i< =numCirc; i++) {
if(dist <= (i/numCirc) && dist > ((i-1)/numCirc) ) {
bingo = i;
sketch.moveto(0,0);
sketch.glcolor(colorClick);
sketch.circle(i/numCirc);
refresh();
post("circle: "+i+"n");
break;
}
}
}

function ondrag(x,y,butt) {
// detect mouse up
if(butt == 0 && bingo > 0)
reset();
}``````

hth,
volker

#170652
Dec 27, 2009 at 7:34pm

Hi. Thanks for the response! I had been trying to get it working using this cartopol conversion, but it doesn’t seem to return the same values as it does when sending the variables through a Cartopol object which returns the more solid results.