Instance Mode Trouble Shooting for 2+ Sketches on 1 Webpage

I am attempting to implement more than one sketch on an html page using instance mode, but keep getting errors thrown at me in the Processing IDE. I am using p5js.

Here is the sketch I am attempting to convert to instance mode.

var img;
  function preload() {
      img = loadImage("https://dl.dropboxusercontent.com/u/55913541/1.jpg");
 }
function setup() {
  var myCanvas = createCanvas(1000, 600);
  myCanvas.parent('1stContain');
  mic = new p5.AudioIn()
  mic.start();
}
function draw() {
  background(255);
  if(mouseIsPressed) {
    micLevel = mic.getLevel();
    var c = color('#f99991');
    var v = color('#fdfaee');
    background(v);
    textFont("Helvetica");
    text("do", 500*micLevel+200, 600*micLevel+300);
    fill(c);
  }
  else {
  micLevel = mic.getLevel();
  image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
  }
}
`

Here is my attempt 

`
var sketch = function ( p ) {
var img;
  function preload() {
    img = loadImage("https://dl.dropboxusercontent.com/u/55913541/1.jpg");
  }
  p.setup = function() {
    var myCanvas = p.createCanvas(1000, 600);
    myCanvas.parent('1stContain');
    mic = p.new p5.AudioIn()
    mic.start();
}
  p.draw = function() {
    p.background(255);
  if(mouseIsPressed) {
    micLevel = mic.getLevel();
    p.var c = color('#f99991');
    p.var v = color('#fdfaee');
    p.background(v);
    p.textFont("Helvetica");
    p.text("do", 500*micLevel+200, 600*micLevel+300);
    p.fill(c);
  }
  else {
    p.micLevel = mic.getLevel();
    p.image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
  }
}
}
new p5(sketch);

I keep getting the error "SyntaxError Expected; but found myCanvas" In the long run I am trying to get 10+ sketches running together on one html page. When I try to implement two (using non instance mode) only the second one shows on the page. I can also include my HTML code if that will help.

Answers

  • I am attempting to get one sketch to work in an html page first in instance mode, but I am still having trouble. I believe I am close but am not sure if my syntax for mousePressed is correct or not. I have seen tutorials that show it as p.mousePressed = function() {}, but I have never seen it in an if statement for instance mode.

    <!DOCTYPE html>
      <html>
      <head>
      <link rel="stylesheet" type="text/css" href="CSS/STYLE.css">
      <script src="Resources/p5.js" type="text/javascript"></script>
      <script src="Sketches/PH2/libraries/p5.sound.js" type="text/javascript"></script>
      <title>painthead</title>    
      </head>
      <body>
      <div id="PH2Contain"></div>
      <script>
      var PH2 = function( p ) {
      var img;
      p.preload = function() {
        img = p.loadImage("https://dl.dropboxusercontent.com/u/55913541/1.jpg");
      };
      p.setup = function() {
        p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
          mic.start();
      };
      p.draw = function() {
        p.background(255); 
        if (p.mousePressed = function()) {
          micLevel = mic.getLevel();
          var c = p.color('#f99991');
          var v = p.color('#fdfaee');
          p.background(v);
          p.textFont("Helvetica");
          p.text("do", 500*micLevel+200, 600*micLevel+300);
          p.fill(c);
        };
        else {
          micLevel = mic.getLevel();
          p.image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
        };
      };
    }
    new p5(PH2, 'PH2Contain');
    </script>
      </body>
      </html>
    
  • edited March 2017

    Always place "use strict"; as the 1st top statement for every <script>:
    https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

    That's gonna help you to catch some hard-to-spot bugs, like undeclared variables. L-)

    Consider move your <script> to a separate ".js" file so it's more organized. O:-)

    If instance mode is still hard to program, write your code in global mode 1st. Once successfully working, convert it to instance mode. *-:)

  • Okay, thanks. I have added "use strict" but am still getting nothing. The sketch has been created already and I am just trying to convert. Here it is.

    function preload() {
      img = loadImage("https://dl.dropboxusercontent.com/u/55913541/1.jpg");
    }
    
    function setup() {
      createCanvas(1000, 600);
      mic = new p5.AudioIn()
        mic.start();
    }
    
    function draw() {
      background(255);
    
      if (mouseIsPressed) {
        micLevel = mic.getLevel();
        var c = color('#f99991');
        var v = color('#fdfaee');
        background(v);
        textFont("Helvetica");
        text("do", 500*micLevel+200, 600*micLevel+300);
        fill(c);
      } else {
        micLevel = mic.getLevel();
        image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
      }
    }
    

    Also, how do I go about calling the .js file (if I don't include the actual written script in the html) without it showing up automatically? I have tried by including it in the header of the html like

    <!DOCTYPE html>
    <html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="CSS/STYLE.css">
        <script src="Resources/p5.js" type="text/javascript"></script>
        <script src="Sketches/PH2/libraries/p5.sound.js" type="text/javascript">
        <script src="Sketches/PH2/libraries/PH2.js" type="text/javascript">
    </script>
        <title>painthead</title>    
    </head>
    

    but it automatically shows up without being called. Thanks for all the help. I am a supernoob trying to learn :P

  • Would love to get these sketches up and running if anyone has any insight, thanks!

  • edited March 2017

    If anyone is curious here is the fix! For some reason declaring colors as

    var c = p.color('#fdfaee');

    was breaking the code no matter where I placed it.

    <div id="PH2Contain"></div>
            <script>
    
    
            var PH2 = function ( p ) {
                var mic;
                var img;
                var myCanvas;
    
    
                p.preload = function() {
                    img = p.loadImage('1.jpg');
                }
    
                p.setup = function() {
                    myCanvas = p.createCanvas(1000, 600);
                    mic = new p5.AudioIn()
                    mic.start();
                }
    
                p.draw = function() {
    
                   if (p.mouseIsPressed) {
                        micLevel = mic.getLevel();
                        p.background('#fdfaee');
                        p.textFont("Helvetica");
                        p.text("do", 500*micLevel+200, 600*micLevel+300);
                        p.fill('#f99991');
                    }
    
                    else {
                    micLevel = mic.getLevel();
                    p.background(255);    
                    p.image(img, 200*micLevel*50, -50*micLevel*50, p.width/1.5, p.height);
                    }
                }
    
            }
            myp5 = new p5(PH2, 'PH2Contain');
    
    
        </script>
    
Sign In or Register to comment.