How can I set the container of my p5 sketch

holieveryday · May 2015

i want to load my p5 in a specific container, but failed, who will help please?

KevinWorkman · May 2015

How are you loading into a specific container? Can you post some example code that demonstrates where you're stuck?

holieveryday · May 2015

@KevinWorkman Thanks for your attention, and sorry about my poor english may bothered you. But i am happy to tell you that i solved the problem by myself. here is the question:


<head>
  <script language="javascript" src="../../lib/p5.js">
  
  
  
  
  
  <style> body {padding: 0; margin: 0;} 
</head>

<body>
    <div id="sketchContainer">
</body>

i have got an div and i want my p5 appears in the container. perhaps, the standard coding should be:

<script type="text/javascript">
   var testSketch = function (p) {
    p.setup = function(){
        p.createCanvas(500, 350);
        p.background(122);
    }
        p.show = function(){
            p.whatever
        }
   }
  var mp5 = new p5(function(){}, "sketchContainer");

  </script>

but it is so ugly, so perhaps you would like a more good-looking one:

<script type="text/javascript">

  var mp5 = new p5(function(){}, "sketchContainer");

  mp5.setup=function (){

    mp5.createCanvas(500, 350);
        mp5.background(122);
        mp5.noLoop();
  }

  mp5.draw=function (){

    mp5.ellipse(mp5.random(mp5.width),mp5.random(mp5.height),50,50);
    
  }
  </script>

ok, now, as what you have seen, you will call everything by mp5, mp5.random, mp5.width, mp5.noLoop, what a disgusting!

so perhaps you may what to try :

<script type="text/javascript">

  var mp5 = new p5(function(){}, "sketchContainer");

  mp5.setup=function (){
    mp5.createCanvas(500, 350);
    mp5.background(122);
    mp5.noLoop();
    mp5._isGlobal = true;
    //mp5 cannot be ignored until the next block executed
    for (var p in p5.prototype) {
      if (typeof p5.prototype[p] === 'function') {
        var ev = p.substring(2);
        if (!mp5._events.hasOwnProperty(ev)) {
          window[p] = p5.prototype[p].bind(mp5);
        }
      } else {
        window[p] = p5.prototype[p];
      }
    }
    for (var p2 in mp5) {
      if (mp5.hasOwnProperty(p2)) {
        window[p2] = mp5[p2];
      }
    }
  }

  mp5.draw=function (){
    
    mp5.ellipse(mp5.random(width),random(height),50,50);
    noLoop();
    
  }
  </script>

now, in the draw block, you can say either mp5.random or random, happy ending. but perhaps it is highly recommended you will not use mp5. because it will cause hard reading codes.

at last, perhaps p5 should be changed a little to support a sketch in the container and the methods can still be called in the window object.

GoToLoop · May 2015

http://forum.processing.org/two/discussion/8045/how-to-format-code-and-text

holieveryday · May 2015

@GoToLoop thanks , it works

KevinWorkman · May 2015

Thanks for your attention, and sorry about my poor english may bothered you.

You English did not bother me. Your question was just a bit too vague to really answer.

blindfish · May 2015

@holieeveryday: the question wasn't vague. I knew exactly what you wanted from the subject line ;)

One thing that is vague is the documentation on this feature, but what you discovered is hinted at under 'instance mode' here.

I don't have a problem having to include a reference to p5 within my sketch code, I just use 'p' instead of 'mp5'; and to be consistent you can use that in every sketch by passing 'p' as a reference in the p5 function call:

// global variable used to avoid polluting global namespace
var foo = foo || {}; // ...but choose something unique! i.e. not foo!

foo.p5 = new p5(function (p) { 
    p.setup = function() {
        //...
    }

    p.draw = function() {
        //...
    }
}), "sketch01");// id of target div

I think there are a couple of advantages to this. IMO it makes code easier to read: the 'p' reference makes it clear that you're calling a p5 method rather than a built-in JS/browser method. It also avoids any risk of namespace collision...

Looks like your last example essentially gives p5 global scope. I'm somewhat paranoid about doing that; as you can see from the above example. The above would allow you to run multiple sketches on the same page (I'm not saying that's recommended ;) ) without them colliding with each other...

Obviously the approach you take is down to your coding preference ;)

holieveryday · May 2015

@blindfish : I can not agree you more because it is standard in javascript that you create a new object and call functions with , for example, p. . but for processing, it is more popular if you call everything with window object or with nothing. and it is just what the p5.js source code do in which a p5 is newed but just give it a global scope, and that is why we can call everything in the default mode. by the way, if you have to add more than one sketches on your page, the reference name will never be ignored. Thanks for sharing your opinion

Howdy, Stranger!

Categories

In this Discussion

How can I set the container of my p5 sketch

Answers