P5 instance mode syntax question (createInput() constantly gets error'd not defined)

p5.js Beginners
#1

Hello

I have an instanced version of p5.js on my site. I am trying to get a canvas with a createInput method to accept some input from user. This is how it’s defined

var sketch3 = function( controller ) {
    controller.setup = function () {
        controller.createCanvas(100, 100);
        controller.background('grey');
        let inp = controller.createInput('');
        inp.position(0, 0);
        inp.size(100);
        inp.input(myInputEvent);
    }

    controller.draw = function () {
        console.log('you are typing: ', this.value());
    }
}

var myp5 = new p5(sketch3, 'sketch3');

and the html

<html>
  <head>
  
  <link rel="stylesheet" type="text/css" href="../css/site.css">
  <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>



  <script language="javascript" type="text/javascript" src="../javascript/libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="../javascript/sketch.js"></script>
  <!-- <script src="../javascript/navbar.js"></script> -->


  </head>
  <body>
    <main>
      <div class="content-container">
        <div id="sketch3"></div>


      </div>
    </main>
  </body>
</html>

I know other functions work okay and i referenced them in similar ways but i cant seem to get the page to find the definition for createInput(). Is there something wrong with what i am doing here?

#2

Hi! Welcome to the forum!

I get myInputEvent is not defined error, but it seems different from the error you get. I guess you are using an old version of p5.js when dom was a separate module.

I highly recommend posting the code on the web editor when you ask questions because it helps others easily run the code without adjusting the path etc, and helps to spot errors like this (web editor uses the library from cdn with explicit p5.js version - on the other hand it seems you are using the local copy with unknown version)

https://editor.p5js.org/micuat/sketches/N0esBN8kl

2 Likes
#3

It seems my error was related to having an older version, I’m not sure why the older version wasn’t working since createInput was a valid method as far as i can tell. but yeah the second error was because i didnt copy in the boilerplate function from p5 docs. if you have any more info to direct me on what you mean here

I guess you are using an old version of p5.js when dom was a separate module.

I assume you just mean it wasnt a function defined to be used in instance mode but im not educated enough to know for sure. Appreciate the assistance all the same. It was the boiler plate code for the createInput method but i have made a web editor version per your request.

https://editor.p5js.org/NayrbEroom/present/y-ptlGR1g

#4

It’s just historically DOM functions were in a separate file (p5.dom.js) so you had to add this file to index.html; otherwise whether it’s global or instance mode, you don’t have access to those functions. But in current versions they are integrated in the “core” library you don’t have to manually add them.

also if you share code please point to the editor not present or full screen mode! (you can actually see the code if you replace “present” in the url with “sketches”)

by the way we won’t judge you if you are educated or not :slight_smile: after all we are here to learn.