15

I would like to create this sound/sin wave that looks like the dynamic audio wave Siri in iOS 7 has:

1

2

3 4

I know how to create and animate UIBezierCurve sin shape and I googled a lot, but I haven't found and have no idea how to achieve this effect.

The line starts flat, than waves and ends flat. I'm not woking with any sound file(s), just the effect of random waving would suffice.

Braiam
  • 1
  • 11
  • 47
  • 78
Skiny
  • 405
  • 1
  • 4
  • 16
  • Hi Skiny... Right Now i am facing same problem.I was implemented using Bezier curve but i am not satisfied with that... so please give me suggestion if you are completed with this task ...Thanks in Advance.. – Alex May 20 '14 at 07:11
  • Hi Alex, as I commented below, I wasn't satisfied with the cubic curves, I played with it a bit, but it was only for my curiosity and another job came up, so I put this aside and haven't returned to that since. Sorry – Skiny May 20 '14 at 18:14
  • Sure, just sorry I couldn't help more – Skiny May 21 '14 at 09:19
  • Its ok dude no problem ...i will try it.. – Alex May 21 '14 at 09:27

3 Answers3

13

Maybe you could try the SCSiriWaveformView's library for iOS, based on OSX's SISinusWaveView:

https://github.com/stefanceriu/SCSiriWaveformView

CSolanaM
  • 3,138
  • 1
  • 20
  • 21
3

I think it would be very difficult to do this with a single Bezier curve, it's probably better to use a NURBS or B-spline curve.

For the example images you show, you could do it with 7 control points on a cubic.
Probably a uniform cubic, with clamped/bezier end conditions. In other words, the knot vector would be ( 0, 0, 0, 1, 2, 3, 4, 4, 4 ).

To describe the control point positions, we'll call them P0..P6.

P0 and P6 would be the endpoints of the curve.

P2..P4 would be equally spaced in X between P0 and P6. That is, P2 would be 1/4 of the way, P2 would be 2/4 of the way, and P3 would be 3/4 of the way between P0 and P6, in the X dimension.

P1 would keep the curve coming straight out of the side. P1's Y value should always be the same as P0's Y value. P1's X value should be 1/3 of the way between P0 and P2.

P5 is analogous to P1, same Y value as P6 and X value is 1/3 of the way between P6 and P5.

Then just animate Y values of P2..P4 and you'll get a bouncy line that's straight at the ends.

I'm not sure if iOS has a NURBS or B-spline implementation available for use. If there's not one available, The good news is that NURBS curves can be broken down into Bezier curves. For a simple example like this, it's possible to hard-code conversion from NURBS to Bezier, without implementing a full library.

tfinniga
  • 6,693
  • 3
  • 32
  • 37
  • Hi @tfinniga, thx for the tip. I did some experimenting with a cubic curve. Well, the results looked very ehm... weird, but it's just matter of editing values. Thx again :) – Skiny Nov 12 '13 at 18:08
1

I made it in SwiftUI, but the algorithm is not very different.

https://github.com/nilotic/SiriWave

enter image description here

Den
  • 3,179
  • 29
  • 26