0

I'm making an iOS app for sound synthesis. And I need a custom slider by which user can adjust the sound frequency. The slider has unique design - wave form (an example is shown in the picture).

Custom slider

How to make slider with complex curve?

rmaddy
  • 314,917
  • 42
  • 532
  • 579
12pm
  • 498
  • 1
  • 3
  • 10

1 Answers1

2

12pm - I can't think of any immediately obvious, simple, way to do this in iOS. I'd look around for a package and if you're lucky there will be one! Otherwise it's just a case of plain hard programming.

You may possibly have to use beziers (Find the tangent of a point on a cubic bezier curve) to define the travel path. Or maybe, "simply" two half-circles.

From there use a "normal" slider concept to get the X position of the finger, but just position the "y" value of the red ball, per your equations. That will work OK.

For a better approach (I doubt it will be necessary), the NEXT more complicated approach is: ALSO note the Y value of the finger. WHEN THE FINGER IS NEAR the "difficult" parts", THEN INSTEAD consider the Y value. Do you see what I mean?

Finally the "ultimate solution" .. you need to get in to finding the "closest point on a curve" (i.e., give some point). This is classic game programming math. So follow something like

http://hal.archives-ouvertes.fr/docs/00/51/83/79/PDF/Xiao-DiaoChen2007c.pdf

Check out any of these classic books for that type of thing

http://www.amazon.com/Mathematics-Programming-Computer-Graphics-Edition/dp/1435458869

http://www.amazon.com/Real-Time-Collision-Detection-Interactive-Technology/dp/1558607323

However, IMO it would be "thoughtless engineering" .. .solution "A" or "B" is typically perfect!

Community
  • 1
  • 1
Fattie
  • 27,874
  • 70
  • 431
  • 719
  • Thank you for your answer, Joe Blow. If I understand you right, only X coordinate of the finger will influence on slider position. But I need that user can change slider value only by moving finger by the direction of yellow curve. – 12pm May 23 '14 at 12:02
  • 1
    It's hard to explain, but trust me, it will work, fairly well, 100%. Mathematically, you have only a 1:1 mapping, so it's 100% safe to measure ONLY the X position of the user's finger. There are more complicated solutions, but - quite simply - until you perfectly implement this solution, you won't be able to implement the more complex solutions. I hope it helps! – Fattie May 23 '14 at 12:05
  • Fantastic! Thank you very much, Joe. I've done this in 6 lines of code. I use two half-circles to define the path, like you wrote. And calculate only Y position by simple formula: `double multiplier = 2 * M_PI / lenght * (-1); double angle = (coordinateX - minX) * multiplier; float coordinateY = diameter * sin(angle) + shiftY;` – 12pm May 23 '14 at 15:41
  • It's nothing, i just wish I could help more. Right-on with tour formula. Check my edit also .... – Fattie May 23 '14 at 15:45