Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    p5.js and Magic Mirror

    General Discussion
    2
    9
    2490
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      leejaeuk last edited by

      Hello developeing Eng…
      I wondered about use way p5.js.
      I’m used raspberry pi 3B & installed Magic Mirror and I also insert other modules .

      but I want to make a my custom module from p5.js.(or p5.js.example)
      How can I insert HTML.js to node.js and are there any way to insert Magic mirror?
      please give me any information about that…
      Thank you!

      R 1 Reply Last reply Reply Quote 1
      • R
        raywo Module Developer @leejaeuk last edited by

        @leejaeuk Have look at my GameOfLife Module. It uses p5.js.

        L 1 Reply Last reply Reply Quote 1
        • L
          leejaeuk @raywo last edited by

          @raywo Thank you for your response!
          i have seen that code and i have several question of your code!

          My insert code of p5.js is (https://p5js.org/examples/sound-frequency-spectrum.html)

          and your code, maybe “https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js” is adding a p5.js library(right?)

          next, i think function : makeSketch is main code of p5.js.
          but i have no idea , how can i added ‘sound-frequency-spectrum’ code. it is little bit complicate for me…

          is it okay just change [ pFive.setup = function(), pFive.draw = function()]?

          R 1 Reply Last reply Reply Quote 1
          • R
            raywo Module Developer @leejaeuk last edited by

            @leejaeuk The getScript function is responsible for making p5.js available to your code. Thats why it reads like

            getScripts: function() {
                return [
                  "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"
                ];
              },
            

            Keep in mind that p5.js runs in the client. That’s why you need it in your module’s js file.

            The easiest way to incorporate your sound frequency code would be to insert it in the makeSketch function.

            makeSketch: function(conf) {
              return function(pFive) {
                YOUR CODE HERE
              }
            }
            

            Your code will have a setup and a draw function. These need to be prefixed with pFive. Just look at my code to get the idea.

            L 2 Replies Last reply Reply Quote 1
            • L
              leejaeuk @raywo last edited by

              @raywo
              i will try it!
              i’m really thank you for your kindness
              really appreciate!

              1 Reply Last reply Reply Quote 0
              • L
                leejaeuk @raywo last edited by leejaeuk

                @raywo

                raywo, i tried your suggestion
                initially, your module(gameoflife) is well doing
                and i fixed your code.

                this is fixed code MMM-GameOfLife.js

                  var mic, fft;
                
                  pFive.setup = function() {
                    pFive.createCanvas(710,400);
                    pFive.noFill();
                
                    mic = new p5.AudioIn();
                    mic.start();
                    fft = new p5.FFT();
                    fft.setInput(mic);
                  };
                

                and

                0_1522287293605_b6f2966c-8941-4a66-ab9d-27ac2c701ccb-image.png

                but it didn’t work well. So i just write createCanvas and pFive.background (255) then white 710 400 size window is display well in mirror but full code is not work. i think

                    mic = new p5.AudioIn();
                    mic.start();
                    fft = new p5.FFT();
                    fft.setInput(mic);
                

                code is not appropriate… please fix my code !

                L 1 Reply Last reply Reply Quote 0
                • L
                  leejaeuk @leejaeuk last edited by

                  also i changed

                  mic = new p5.AudioIn();
                  mic.start();
                  fft = new p5.FFT();
                  fft.setInput(mic);
                  

                  new p5.AudioIn(); ,new p5.FFT(); -> p5.AudioIn(); p5.FFT();,
                  and -> pFive.AudioIn(); pFive.FFT(); and -> new Five.AudioIn(); , new pFive.FFT();

                  but all code didn’t work 😞

                  1 Reply Last reply Reply Quote 0
                  • L
                    leejaeuk last edited by

                    @raywo
                    i’m still not solved this problem please help me…

                    R 1 Reply Last reply Reply Quote 0
                    • R
                      raywo Module Developer @leejaeuk last edited by

                      @leejaeuk You should create a GitHub repository for your code so that someone can have a look at it.

                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy