読者です 読者をやめる 読者になる 読者になる

Processing中毒者の嘔吐物

ProcessingやらopenFrameworksやら色んなプログラミングについて吐きます

p5.jsでcanvasの位置を変える方法

p5.js

以下のようにhtmlを書いて実行すると、"Processing"という文字の下にcanvas画面が出来上がります。
[index.html]

<!DOCTYPE html>
<html>
<head>
  <style> body {padding: 0; margin: 0;} </style>
  <script src="p5.min.js"></script>
  <script src="MySketch.js"></script>
</head>
<body>
<p>Processing</p>
</body>
</html>

[MySketch.js]

function setup(){
  createCanvas(960, 540);
  background(0, 30, 60);
  noStroke();
}

function draw(){
  fill(0, random(255), random(255));
  ellipse(mouseX, mouseY, 40, 40);
}

このように、p5.jsのcanvas画面はbody要素の一番下に配置されるようになっています。canvasだけを見せるページなら問題ありませんが、記事の途中にp5.jsを挿入したい場合があります。そういう場合はp5.js側でDOMを操作して、p5.jsで生成されるcanvasの親要素を変更します。まず以下のようにindex.htmlにcanvasの親要素となるdivをid付きで追加します。ここではidをp5Canvasとしていますが名前はなんでもいいです。
[index.html]

<!DOCTYPE html>
<html>
<head>
  <style> body {padding: 0; margin: 0;} </style>
  <script src="p5.min.js"></script>
  <script src="MySketch.js"></script>
</head>
<body>
<div id="p5Canvas">
  <p>Processing1</p>
</div>
<p>Processing2</p>
</body>
</html>

次にMySketch.jsで以下のようにしてcanvasの親要素を変更します。
[MySketch.js]

function setup(){
  var canvas = createCanvas(960, 540);
  canvas.parent("p5Canvas");
  background(0, 30, 60);
  noStroke();
}

function draw(){
  fill(0, random(255), random(255));
  ellipse(mouseX, mouseY, 40, 40);
}

createCanvas()はcanvasのサイズを決める関数ですが、実はcanvasのオブジェクトを返していて、ここではvar canvasに代入しています。そのcanvasオブジェクトに対してparent(String id)メソッドを実行するとcanvasの親要素を、指定したidを持つ要素に変更することが出来ます。実行すると"Processing1"という文字の下にcanvas画面があり、その下に"Processing2"という文字があると思います。