MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    p5.js and Magic Mirror

    Scheduled Pinned Locked Moved General Discussion
    9 Posts 2 Posters 4.2k Views 2 Watching
    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 Offline
      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 Offline
        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 Offline
          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 Offline
            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 Offline
              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 Offline
                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 Offline
                  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 Offline
                    leejaeuk
                    last edited by

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

                    R 1 Reply Last reply Reply Quote 0
                    • R Offline
                      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 Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy