How do I bind p5 canvas to an html page?

fkkcloud · October 2015

So, I am working with AngularJS website for medical big data visualization @ UCSF and trying to use p5.js. I hope to bind the canvas only to a specific part like so below but its not working.

What am I missing?

html
        <body>
          <div id="canvasHolder"></div>
        </body>

CSS
        #canvasHolder{
          width:700px;
          height:450px;
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top:0;
          bottom:0;
        }

Js
            var canvas = createCanvas(width, height);
            canvas.parent('canvasHolder');

GoToLoop · October 2015

Variables width & height are properties of the p5.Renderer created by createCanvas():

It's got nothing to do w/ the corresponding HTMLDivElement's own width & height CSS properties whose id is "canvasHolder":

In order to grab the latter, you're gonna need function select() from library "p5.dom.js":
http://p5js.org/reference/#/p5/select

It's gonna wrap the HTMLElement found as a p5.Element though:

From there, we can directly access its properties like width, height & elt! :-bd
Dunno anything 'bout AngularJS. But here's my attempt w/ regular HTML/CSS/JS: :P

<meta charset=utf8>
<meta name=viewport content=width=device-width,user-scalable=no,initial-scale=1>
<style>body { border: 5px solid green; padding: 0; margin: 0; }</style>

<script src=http://p5js.org/js/p5.min.js defer></script>
<script src=http://p5js.org/js/p5.dom.js defer></script>

<style>

  #canvasHolder {
    width: 700px;
    height: 450px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

</style>

<div id=canvasHolder></div>

<script>

// http://forum.Processing.org/two/discussion/13051/
// how-do-i-bind-p5-canvas-to-an-html-page

// GoToLoop (2015-Oct-16)

function setup() {
  const canvasHolder = select('#canvasHolder'),
        canvasWidth  = canvasHolder.width,
        canvasHeight = canvasHolder.height;
 
  console.log(canvasHolder);
  print(canvasWidth + ', ' + canvasHeight);

  createCanvas(canvasWidth, canvasHeight).parent('canvasHolder');
 
  fill('blue').stroke('red').strokeWeight(2.5).background(0).noLoop();
  rectMode(CENTER).rect(width>>1, height>>1, width>>1, height>>1);
}

</script>

blindfish · October 2015

@fkkcloud: I don't think select() is what you're looking for. There's a far simpler solution: look for the 'instance mode' example on this page. This allows you to specify a target element for the p5js canvas. It also has the advantage of limiting the scope of p5's core methods which otherwise are global. That's likely to be of more concern if you're rolling it into a page with other dependencies such as Angular.

If you override the native width/height of the canvas via css I'm guessing it will just stretch, but you might want to test for unforeseen consequences: e.g. Misaligned hit detection etc...

fkkcloud · October 2015

I guess another reason is that, canvasHoldler id can not be selected when its within ng-view since I am using AngularJS for routing pages..

Should I put sketch stuff in controller of that page?

blindfish · October 2015

Sorry I see that what you tried is more or less equivalent to my suggestion. I've not used angularJS (on my todo list) but if you're using it to manipulate the DOM you'll obviously have to ensure the target element is in place when you fire up p5...

Howdy, Stranger!

Categories

In this Discussion

How do I bind p5 canvas to an html page?

Best Answers

Answers