p5.js and Magic Mirror

leejaeuk

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!

raywo

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

leejaeuk

@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()]?

raywo

@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.

leejaeuk

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

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 !

leejaeuk

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

leejaeuk

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

raywo

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