PyCafe - Panel - P5.js Fourier Series Visualizer

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import panel as pn
import param

from panel.custom import JSComponent


class P5Sketch(JSComponent):

    num_components = param.Integer(default=5, bounds=(1, 15))

    _esm = """
    import p5 from "https://esm.sh/p5"

    export function render({model, el}) {
      function sketch(p) {
        let time = 0;
        let wave = [];

        let run = true;

        p.setup = () => {
          const canvas = p.createCanvas(model.width, model.height)
          canvas.canvas.style.visibility = 'visible'
          canvas.mousePressed(() => {
            if (p.mouseX >= 0 && p.mouseX <= p.width && p.mouseY >= 0 && p.mouseY <= p.height) {
              run = !run;
              if (run) { p.loop(); } else { p.noLoop(); }
            }
          }
        )};

        p.draw = () => {
          p.background(0);
          p.translate(150, 200);

          let x = 0;
          let y = 0;

          const n = model.num_components;

          for (let i = 0; i < n; i++) {
            let prevx = x;
            let prevy = y;

            let n = i * 2 + 1;
            let radius = 75 * (4 / (n * Math.PI));
            x += radius * Math.cos(n * time);
            y += radius * Math.sin(n * time);

            p.stroke(255, 100);
            p.noFill();
            p.ellipse(prevx, prevy, radius * 2, radius * 2);
            p.stroke(255);
            p.line(prevx, prevy, x, y);
          }
          wave.unshift(y);
          p.translate(200, 0);
          p.line(x - 200, y, 0, wave[0]);
          p.beginShape();
              p.noFill();
              for (let i = 0; i < wave.length; i++) {
                p.vertex(i, wave[i] );
              }
          p.endShape();

          time += 0.05;

          if (wave.length > 250) { wave.pop(); }
        }
      }
      new p5(sketch, el)
    }
    """


sketch = P5Sketch(height=400, width=600)
main=pn.Column(sketch.controls(["num_components"]), sketch, "**Mouse Press** starts/stops the animation")
pn.template.FastListTemplate(
    site="Awesome Panel",
    title="P5.js Fourier Demo",
    main=[main],
    main_layout=None,
    theme_toggle=False,
    theme="dark",
    header_background="#111111",
    main_max_width="650px",
).servable()
Py.Cafe

p5js-fourier-series-visualizer

P5.js Fourier Series Visualizer
