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

volker böhm

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 ((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

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.

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!