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

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

var radius = Math.sqrt(real^2+imag^2);

var theta = Math.atan2(imag,real);

var deg = theta/Math.PI*180;

var output = [radius,theta,deg ];

After much fiddling, my solution was to just script a cartopol and send the variables through it and the results back into JSUI upon onclick, and have it delete the object right after the event. It works well, but I wasn’t completely happy with the solution as I knew that there was a way to process the variables without leaving JSUI.

I will have a look at your code example soon!! thank you so much for the help!!

Much appreciated!

]]>