# Siri style waveform design with p5 sound

**URL:** <https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529>\
**Category:** Libraries\
**Created:** [June 3, 2020, 5:22pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529 "2020-06-03T17:22:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![eurobob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eurobob/32/9466_2.png) [@eurobob](https://discourse.processing.org/u/eurobob)\
**Post date:** [June 3, 2020, 5:22pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/1 "2020-06-03T17:22:00Z")

</div>

How would I go about creating an animation similar to this?:

[https://dribbble.com/shots/5401314-Voice-interface-design](https://dribbble.com/shots/5401314-Voice-interface-design)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [June 3, 2020, 7:00pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/2 "2020-06-03T19:00:33Z")

</div>

Hi bob, welcome to the forums!

I can see what you’re talking about, and I don’t think it’s gonna take too long to piece together, but it all really depends on how much experience you have with js, and p5.sound.

This might be a good start:

[![](https://img.youtube.com/vi/jEwAMgcCgOA/hqdefault.jpg "17.9: Sound Visualization: Graphing Amplitude - p5.js Sound Tutorial") ](https://www.youtube.com/watch?v=jEwAMgcCgOA)

If you’re looking for just a filler animation, you might be able to just throw some colored sin waves together.

If you’re looking for something that actually responds to an input, you’ll want to get familiar with the AudioIn object:

> **[reference | p5.js](https://p5js.org/reference/#/p5.AudioIn)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![eurobob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eurobob/32/9466_2.png) [@eurobob](https://discourse.processing.org/u/eurobob)\
**Post date:** [June 3, 2020, 8:01pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/3 "2020-06-03T20:01:49Z")

</div>

Thanks Tony. I found this in the meantime and managed to connect it to my audio file instead of a mic input:

[https://therewasaguy.github.io/p5-music-viz/demos/05\_fft\_scaleOneThirdOctave/](https://therewasaguy.github.io/p5-music-viz/demos/05_fft_scaleOneThirdOctave/)

Source code here:

> **[therewasaguy/p5-music-viz](https://github.com/therewasaguy/p5-music-viz/tree/master/demos/05_fft_scaleOneThirdOctave)**
>
> Workshop on music visualization with p5.js from Eyeo '15, previously MozFest '14, NYU ITP - therewasaguy/p5-music-viz

Very much on the same lines of the video you shared, but with curved vertexes, smoothed points, and octave splitting.

I’m pretty experienced with JS, but this library is very new to me. Haven’t worked with anything similar either. I think I could maybe hack around this one third octave idea, but I’m not sure exactly which bits I need to be altering.

I assume I would probably want to split the frequency range into different sections to create multiple waves, and then using them to draw sin waves as you say, instead of a curve vertex?

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [June 3, 2020, 8:12pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/4 "2020-06-03T20:12:27Z")

</div>

> [@eurobob](#):
>
> I assume I would probably want to split the frequency range into different sections to create multiple waves, and then using them to draw sin waves as you say, instead of a curve vertex?

That sounds like a great idea! I’ve actually never made anything with the sound library either but, on the graphics side, that sounds like it should achieve what you’re looking for. Unless this has some deadline, I would just experiment and see what looks best haha.

---

<div class="post-metadata">

**Author:** ![eurobob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eurobob/32/9466_2.png) [@eurobob](https://discourse.processing.org/u/eurobob)\
**Post date:** [June 3, 2020, 11:24pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/5 "2020-06-03T23:24:41Z")

</div>

@tony well this is a lot of fun!

Although I’ve found myself at something of a block. Here’s what I’ve got so far:

![Screenshot 2020-06-04 at 00.19.58](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/471ba5d7be599140bd7892aa8ac1cc04cf1fc64b.png)

Using this code:

```auto
sk.colorMode(sk.RGB);
    let from = sk.color(218, 165, 32);
    let to = sk.color(72, 61, 139);
    let a = 0.0;
    let inc = sk.TWO_PI / 40;
    for (let i = 0; i < sk.displayWidth; i++) {
      let inter = sk.map(0, sk.displayWidth, i, i, 1);
      sk.strokeWeight(10);
      sk.stroke(sk.lerpColor(from, to, inter));
      sk.line(i * 10, 150, i * 10, 150 + sk.sin(a) * 100.0);
      a = a + inc;
    }

```

What i really want to do is instead of having a line at each point, I want one smooth line that follows the data points. And the gradient should apply to the vertical axis, with say purple at the tops and bottoms, blending towards orange in the middle?

Do you have any experience with something like this that might put me in the right direction?

---

<div class="post-metadata">

**Author:** ![eurobob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eurobob/32/9466_2.png) [@eurobob](https://discourse.processing.org/u/eurobob)\
**Post date:** [June 3, 2020, 11:33pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/6 "2020-06-03T23:33:51Z")

</div>

I also tried using a vertex shape, but the fill isn’t working as i’d like

![Screenshot 2020-06-04 at 00.32.42](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/196e8916090aec1ff80ffac2d1e0b620f2f560b1.png)

---

<div class="post-metadata">

**Author:** ![eurobob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eurobob/32/9466_2.png) [@eurobob](https://discourse.processing.org/u/eurobob)\
**Post date:** [June 3, 2020, 11:44pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/7 "2020-06-03T23:44:10Z")

</div>

Vertex alignment figured out. But still absolutely no idea how to get the gradient to work  
 ![Screenshot 2020-06-04 at 00.42.41](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f4525d3bca89eea696ec18e67a6aa6a206178485.png)

```auto
sk.beginShape();
    sk.vertex(0, 200);

    let a = 0.0;
    let inc = sk.TWO_PI / 25;
    for (let i = 0; i < sk.displayWidth; i++) {
      var y = sk.map(sk.sin(a), -1, 1, 150, 250);
      sk.vertex(i * 10, y);
      a = a + inc;
    }

    sk.vertex(width, 200);
    sk.endShape();

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [June 5, 2020, 5:10am UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/8 "2020-06-05T05:10:25Z")

</div>

Neat!

This is unfamiliar territory, but don’t worry, you’re not the first to play with gradients. I found this thread from a couple years back:

> [@How to do this kind of gradient on shapes](https://discourse.processing.org/t/how-to-do-this-kind-of-gradient-on-shapes/799):
>
> here are bunch of shapes floating here and there. so i need to apply this kind of a gradient on them. can anyone tell me how to do these kind of thing will be appreciated. Here is the SS: Many Thanks! blush -scoopz

Maybe you can find something useful from this?

---

<div class="post-metadata">

**Author:** ![eurobob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eurobob/32/9466_2.png) [@eurobob](https://discourse.processing.org/u/eurobob)\
**Post date:** [June 5, 2020, 5:04pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529/9 "2020-06-05T17:04:06Z")

</div>

Ended up sacking off the gradient idea for something a little more stylized. I was wanting to simply do a transparency gradient anyway so this did a nice similar-ish effect.

![RPReplay-Final1591310444](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/816b6c80eb1dc9bd5a2368d884152cd182e41583.gif)

Here’s the code if anyone is interested in future:

```auto
let s = sk => {
  const width = sk.windowWidth;
  const height = 300;

  sk.setup = () => {
    context = sk.getAudioContext();
    const sound = sk.loadSound('file.mp3');
    var canvas = sk.createCanvas(width, height);
    canvas.parent('canvas');
    sk.noFill();
    fft = new p5.FFT(0.8, 1024);
    fft.setInput(sound);
    sound.play();
  };

  sk.draw = () => {
    sk.background(255);
    sk.colorMode(sk.RGB);
    sk.strokeWeight(3);

    fft.analyze();
    var bass = fft.getEnergy('bass', 'lowMid');
    var mid = fft.getEnergy('mid', 'highMid');
    var treble = fft.getEnergy('treble');

    var inc = sk.TWO_PI / 100;
    var multipliers = [0.7, 0.65, 0.6, 0.55, 0.5, 0.45, 0.4, 0.35];

    var waves = [
      {
        range: bass,
        amplitude: 0.5,
        from: sk.color(228, 229, 248, 255),
        to: sk.color(228, 229, 248, 0),
      },
      {
        range: mid,
        offset: 400,
        from: sk.color(195, 192, 240, 255),
        to: sk.color(195, 192, 240, 0),
      },
      {
        range: treble,
        offset: 900,
        from: sk.color(180, 213, 255, 255),
        to: sk.color(180, 213, 255, 0),
      },
    ];

    waves.map(({range, offset = 1, amplitude = 1, from, to}) => {
      for (var multiplier of multipliers) {
        sk.beginShape();
        sk.curveVertex(width, height / 2);
        let a = 0.0;
        var energy = sk.map(range, 0, 255, 0, amplitude, true);
        sk.stroke(sk.lerpColor(from, to, multiplier - 0.1));
        for (let i = 0; i < sk.displayWidth; i++) {
          var y = sk.sin(a) * multiplier * (height * energy) + height / 2;
          sk.curveVertex(i * 10 - multiplier * offset - width, y);
          a = a + inc;
        }
        sk.curveVertex(width, height / 2);
        sk.endShape();
      }
    });
  };
};

const P5 = new p5(s);

```

Really love how intuitive this library is. I initially picked up for a quick fix, but I can see myself experimenting loads more with this!