Radial Slider

Android Processing

mitlley

in Android Processing • 1 year ago

i'd like to do a radial slider like this to use on Android

http://hexler.net/docs/touchosc-controls-reference#faderrotary

but i'm new on Processing, any idea what i should do?, please help me

Replies(6)

v.k.

Re: Radial Slider

1 year ago

I would try this road... some circular functions

move mouse in Y to move control

void setup()
{
size(600, 600);
smooth();
noStroke();
}
void draw()
{
background(255);
float test = constrain(mouseY, 20 , 360);
float multp = 100;
float centerX = width/2;
float centerY = height/2;
float pointOneX = centerX + (cos(radians(90-test)) * multp);
float pointOneY = centerY + (sin(radians(90-test)) * multp);
float pointTwoX = centerX + (cos(radians(110-test)) * multp);
float pointTwoY = centerY + (sin(radians(110-test)) * multp);
fill(250,220,67,200);
ellipse(centerX, centerY, 200, 200);
fill(0);
ellipse(centerX, centerY, 190, 190);
fill(155,50,67);
fill(250,220,67,150);
triangle(centerX, centerY, pointOneX, pointOneY, pointTwoX, pointTwoY);
fill(0);
ellipse(centerX, centerY, 130, 130);
}

mitlley

Re: Radial Slider

1 year ago

Thanks you, that's a huge progress for me

i limite the movement to circle...

float pointOneX = 300.0;
float pointOneY = 410.0;
float pointTwoX = 262.3778;
float pointTwoY = 403.3662;
void setup()
{
size(600, 600);
smooth();
rectMode(CENTER);
}
void draw()
{
background(255);
float centerX = width/2;
float centerY = height/2;
if (sqrt(sq(width/2-mouseX)+sq(height/2-mouseY)) < 208/2){
float test = constrain(mouseY, 180 , 360);
float multp = 110;
pointOneX = centerX + (cos(radians(90-test)) * multp);
pointOneY = centerY + (sin(radians(90-test)) * multp);
pointTwoX = centerX + (cos(radians(110-test)) * multp);
pointTwoY = centerY + (sin(radians(110-test)) * multp);
}
fill(0);
ellipse(centerX, centerY, 198, 198);
fill(155,50,67);
//ellipse(pointOneX, pointOneY, 10, 10);
println(pointOneX);
println(pointOneY);
println(pointTwoX);
println(pointTwoY);
fill(255);
ellipse(centerX, centerY, 110, 110);
fill(250,220,67,150);
triangle(centerX, centerY, pointOneX, pointOneY, pointTwoX, pointTwoY);
fill(255);
ellipse(centerX, centerY, 100, 100);
fill(255);
noStroke();
rect(centerX+50, centerY, 100, 300);
}

some idea for the X?.. here there is another example

http://www.youtube.com/watch?v=cA6ol-jXW4U&feature=related

v.k.

Well another not good try... Same road. If you move your mouse slow enough it kind of work. Got handle the values to avoid jumps when linking to mouse... As i'm not clearin the screen, you would have to draw it to a PGrapics to use in a sketch. Another way i think could be drawing the circles with pixels[] array.

void setup()
{
size(600, 600);
smooth();
noStroke();
fill(0);
ellipse(width/2, height/2, 200, 200);
fill(0);
ellipse(width/2, height/2, 190, 190);
}
void draw()
{
//background(255);
float test = constrain(mouseY, 40, 360);
float multp = 100;
float centerX = width/2;
float centerY = height/2;
float pointOneX = centerX + (cos(radians(90-test)) * multp);
float pointOneY = centerY + (sin(radians(90-test)) * multp);
float pointTwoX = centerX + (cos(radians(110-test)) * multp);
float pointTwoY = centerY + (sin(radians(110-test)) * multp);
float pointG1X = centerX + (cos(radians(110-test)) * (multp));
float pointG1Y = centerY + (sin(radians(110-test)) * (multp));
float pointG2X = centerX + (cos(radians(130-test)) * (multp));
float pointG2Y = centerY + (sin(radians(130-test)) * (multp));
noStroke();
fill(155, 50, 67);
fill(215, 200, 52);
triangle(centerX, centerY, pointOneX, pointOneY, pointTwoX, pointTwoY);
fill(0);
ellipse(centerX, centerY, 130, 130);
fill(0);
triangle(centerX, centerY, pointG1X, pointG1Y, pointG2X, pointG2Y);
noFill();
stroke(0);
strokeWeight(6);
ellipse(width/2, height/2, 200, 200);
}

mitlley

Re: Radial Slider

1 year ago

it works fine for my purpose, i share with you my code till now...

float pointOneX = 427.0;
float pointOneY = 360.0;
float pointTwoX = 385.95758;
float pointTwoY = 352.76312;
float test;
float kolor = 255.0;
PFont myFont;
void setup()
{
size(854, 480);
smooth();
rectMode(CENTER);
myFont = createFont("verdana", 12);
textFont(myFont);
}
void draw()
{
background(255);
float centerX = width/2;
float centerY = height/2;
if (sqrt(sq(centerX-mouseX)+sq(height/2-mouseY)) < 208/2){
test = constrain(mouseY+50, 200 , 360);
float multp = 110;
pointOneX = centerX + (cos(radians(90-test)) * multp);
pointOneY = centerY + (sin(radians(90-test)) * multp);
pointTwoX = centerX + (cos(radians(110-test)) * multp);
pointTwoY = centerY + (sin(radians(110-test)) * multp);
}
kolor = map(test, 200.0, 360.0, 0.0, 255.0);
fill(50);
ellipse(centerX, centerY, 198, 198);
fill(155,50,67);
//ellipse(pointOneX, pointOneY, 10, 10);
println(pointOneX);
println(pointOneY);
println(pointTwoX);
println(pointTwoY);
fill(255);
ellipse(centerX, centerY, 110, 110);
fill(39, 87, 104,150);
triangle(centerX, centerY, pointOneX, pointOneY, pointTwoX, pointTwoY);
fill(255);
ellipse(centerX, centerY, 100, 100);
fill(255);
noStroke();
rect(centerX+100, centerY, 200, 300);
fill(39, 87, 104, kolor);
ellipse(9*width/10, height/7, 75, 75);
fill(176);
text("pointOneX = " + pointOneX, 105, 185);
text("pointOneY = " + pointOneY, 105, 200);
text("pointTwoX = " + pointTwoX, 105, 215);
text("pointTwoY = " + pointTwoY, 105, 230);
fill(120);
text("mouseY = " + mouseY, 105, 250);
text("test = " + test, 105, 270);
fill (200);
text("alpha = " + kolor, 505, 270);
}

v.k.

Re: Radial Slider

1 year ago

nice, i liked it. :-)

Well occurred to me an another way of doing it... Using an array to draw as many triangle as necessary...

PVector[] vertice1 = new PVector[360];
PVector[] vertice2 = new PVector[360];
float centerX;
float centerY;
int deg = 360;
PFont font;
void setup()
{
size(600, 600);
smooth();
noStroke();
float multp = 100;
centerX = width/2;
centerY = height/2;
font = createFont("Helvetica", 35);
for (int i = 0; i< vertice1.length;i++)
{
vertice1[i] = new PVector(centerX + (cos(radians(91+i)) * multp),
centerY + (sin(radians(91+i)) * multp));
vertice2[i] = new PVector(centerX + (cos(radians(91+i - 2)) * multp),
centerY + (sin(radians(91+i - 2)) * multp));
}
}
void draw()
{
background(255);
fill(0);
// background
ellipse(width/2, height/2, 200, 200);
// how many triangles to draw
deg = int(map( mouseY, 0, height, 0, 360));
noStroke();
fill(255, 227, 13, 130);
for (int i = 0; i< deg;i++)
{
triangle(centerX, centerY, vertice1[i].x, vertice1[i].y, vertice2[i].x, vertice2[i].y);
}
// inner circle
noStroke();
fill(0);
ellipse(centerX, centerY, 130, 130);
noFill();
stroke(0);
strokeWeight(6);
//border
ellipse(width/2, height/2, 200, 200);
textFont(font, 35);
text(nf(deg, 3), width/2 - textWidth(nf(deg, 3))/2, height -100);
}

mitlley

Re: Radial Slider

1 year ago

That's great, you really did it well ...

Thank you very much, you really helped me, I learned a lot of your code, if I do something new, I will share it with you, to know your opinion, thanks again

Radial Slider

Replies(6)

Re: Radial Slider

Re: Radial Slider

Re: Radial Slider

Re: Radial Slider

Re: Radial Slider

Re: Radial Slider

Statistics

Tags

Actions

Related Posts