› ›

Instance Mode Trouble Shooting for 2+ Sketches on 1 Webpage

yovendofrutayovendofruta
edited March 2017 in p5.js Library Questions

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.

Tagged:

Best Answer

Answers

  • GoToLoopGoToLoop
    edited February 2017 Answer ✓

    https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

    https://forum.Processing.org/two/discussions/tagged?Tag=#multiple+canvas

    https://forum.Processing.org/two/discussions/tagged?Tag=#instance+mode

  • yovendofrutayovendofruta

    Thank you

  • yovendofrutayovendofruta

    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>
  • GoToLoopGoToLoop
    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. *-:)

  • yovendofrutayovendofruta

    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

  • yovendofrutayovendofruta

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

  • yovendofrutayovendofruta
    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.