Get error message withP5.dom.min.js and min.js

p5.js Libraries
1

Hi, I’m using various js like P5.sound.js and dom js in my Html, try to work on show the sound wave on the page, and got errors: 1.amplitude is not defined 2.d._validateParameters is not a function #5242 please help me!

截屏2021-05-13 上午1.57.53
截屏2021-05-13 上午1.57.531684×1360 351 KB

2

Not possible to debug without at least seeing your main.js.

3

Hi! Welcome to the forum!

As KumuPaul said please post your code, and the html file would be helpful too because p5.dom.js is currently integrated in p5.js and no longer exists, so maybe you have a mixup of libraries.

4

Thanks for your kindly remind. I will post them! I was constantly meet those issues. The bugs were happening whenever I wanted to initial the camera in my sketch, but it worked well when they were in a separate sketch. A new issue is I want to use p5.speech.js, but I find I can’t reference it. Any thoughts?
this is the code from HTML:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js example</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
     <script src="lib/p5.js"></script>
     <!-- <script src="lib/p5.dom.min.js"></script> -->
     <script src="lib/p5.sound.js"></script>
     <script src="lib/p5.speech.js"></script>
     <script src="lib/p5.speech.js"></script>
     <script src="lib/scenemanager.js"></script>
  </head>

  <script src=gamejs/main.js></script>
  <script src=gamejs/scene01_intro.js></script>
  <script src=gamejs/scene02_question.js></script>
  <!-- <script src=gamejs/scene02.js></script>
  <script src=gamejs/scene03.js></script> -->

this is the main.js

//scene manager

let mgr;

//video

let video;

let font;

let polygons;

let polygonsX = [];

let polygonsY = [];

var fontfile = "data/Krungthep.otf";

//sound array

let mySounds = [];

let mySound1;

let mySound2;

let mySound3;

// let mySound4;

// let mySound5;

// let mySound6;

// let mySound7;

// let mySound8;

// let mySound9;

// let mySound10;

//sound wave

let f1 = 20;

let f2 = 51;

let size = 600;

fft = new p5.FFT();

function preload() {

font = loadFont(fontfile);

//sound

//mySound1 = loadSound('../text-confirm.mp3');

mySound1 = loadSound('../01-12ft-intro.mp3');

mySound2 = loadSound('../02-12ft-question1.mp3');

mySound3 = loadSound('../03-systemerror.mp3');

//剩下的sound都在这里

}

function setup() {

createCanvas(windowWidth, windowHeight);

textFont(font);

frameRate(60);

amplitude = new p5.Amplitude();

//create sound array

mySounds = [mySound1, mySound2, mySound3]

// , mySound4, mySound5, mySound6, mySound7, mySound8, mySound9, mySound10]

//scence manager

mgr = new SceneManager();

mgr.showScene(intro);

// mgr.showNextScene();

}

// On window resize, update the canvas size

function windowResized() {

resizeCanvas(windowWidth, windowHeight);

}

// Render loop that draws shapes with p5

function draw() {

// scene

mgr.draw();

}

this is scene02.js. which need use camera

function question() {
    console.log('iam here');
    
    var video;
    var snapshot = [];
    this.enter = function(){
        video = createCapture(VIDEO);
        video.size(640, 480);
        video.hide();
        setTimeout(askQuestion, 5000);
        setTimeout(systemText, 10000);
        setTimeout(systemError, 10000);
    }

    function askQuestion() {
        //alex introduces itself, 15 sec audio
        mySound2.play();
    }

    function systemError(){
        mySound3.play();
    }

    function systemText(){
        textSize(50);         
        noStroke();
        fill("#ffb0ea");
        textAlign(CENTER, CENTER);
        text("system error/n the next programe will be excuted ", width / 2, height / 2);
    }
}

this is current console:

截屏2021-05-13 下午8.30.37
截屏2021-05-13 下午8.30.371406×444 159 KB

5

Hey, thanks for the infomation! i comment the reference of dom.min.js out, but still got errors.

6

Sorry, @momo, but there is still insufficient code here to reproduce whatever error you are encountering. Fortunately I figured out that SceneManager is a public library. I still had to do a bit of inference because of missing code, but what you’ve shared so far is basically workable.

Live version: https://openprocessing.org/sketch/1194051

let video;
let font;
let polygons;
let polygonsX = [];
let polygonsY = [];

var fontfile = "Oswald.ttf";

//sound array
let mySounds = [];
let mySound1;
let mySound2;
let mySound3;

let f1 = 20;
let f2 = 51;
let size = 600;

// This isn't used, but it might be better to initialize this in the setup
// function. Some p5 library resource may not be declared at the time your
// script is evaluated.
// Also you should use let here.
fft = new p5.FFT();

function preload() {
  font = loadFont(fontfile);

  //sound
  mySound1 = loadSound('TADA.WAV');
  mySound2 = loadSound('CHIMES.WAV');
  mySound3 = loadSound('CHORD.WAV');
  //剩下的sound都在这里
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont(font);
  frameRate(60);

  // Not used, but this ought to be declared with let somewhere
  // global variables are bad practice
  amplitude = new p5.Amplitude();

  //create sound array
  mySounds = [mySound1, mySound2, mySound3];

  //scence manager
  mgr = new SceneManager();
  mgr.showScene(intro);
  // I added this because otherwise there was no reference to the question scene
  mgr.addScene(question);

  // mgr.showNextScene();
}

// Added a way to move to the next scene for testing
function doubleClicked() {
  mgr.showNextScene();
}

// On window resize, update the canvas size
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// Render loop that draws shapes with p5
function draw() {
  // scene
  mgr.draw();
}


function intro() {
  this.draw = function() {
    background(255);
    noFill();
    let i = floor(millis() / 2000) % 2;
    let angle1 = map(millis() % 1000, 0, 1000, 0, TWO_PI);
    let angle2 = map(millis() % 2000, 0, 2000, 0, TWO_PI);
    arc(width / 2, height / 2, 200, 200, i == 0 ? angle1 : angle2, i == 0 ? angle2 : angle1);
  };
}

function question() {
  console.log('iam here');

  var video;
  var snapshot = [];
  this.enter = function() {
    // added background to make the scene transition obvious
    background('gray');
    video = createCapture(VIDEO);
    video.size(640, 480);
    video.hide();
    setTimeout(askQuestion, 5000);
    setTimeout(systemText, 10000);
    setTimeout(systemError, 10000);
  }
  
  this.draw = function() {
    image(video, 10, 10, 128, 96);
  }

  function askQuestion() {
    //alex introduces itself, 15 sec audio
    mySound2.play();
  }

  function systemError() {
    mySound3.play();
  }

  function systemText() {
    textSize(50);
    noStroke();
    fill("#ffb0ea");
    textAlign(CENTER, CENTER);
    text("system error\n the next programe will be excuted ", width / 2, height / 2);
  }
}
7

Thank you so much, I followed your comments adjust my codes, another step is important that I found I’m not referenced the newest p5.js, after I redo this step, createVideo issus was solved.

1 Like