30

I am trying to add p5.js to the background of one section in my webpage. I am new to javascript and can't figure out how to bind the two parts together.

0

4 Answers 4

50

You need to add code in your setup.

Make sure you have the function in a script tag in the html as well. Note you do not add # in the .parent().

var myCanvas = createCanvas(winWidth, winHeight);
    myCanvas.parent("idnameofdiv");
2
  • @kimchoky lol what are the odds two people would use the same 3 year old problem in the same day
    – Jodast
    Jan 10, 2019 at 3:12
  • 3
    Your welcome :) I think it should be marked as the answer but OP disappeared. Still solving problems 5 years later haha glad p5.js didn't change their implementation. Apr 29, 2021 at 20:57
6

if you are inserting multiple p5js canvas in one page and are already using the form new p5(sketch), you can just pass the id of your div as second parameter, like new p5(sketch, idnameofdiv)

Because the function sketch should be unique (if you don't use an IIFE), I like to put the id in the name of the sketch function as well

function sketch_idnameofdiv(p) {
  p.setup = function () {
    p.createCanvas(400,400);
  }

  p.draw = function () {
    // stuff to draw
  }
}
new p5(sketch_idnameofdiv, 'idnameofdiv')

if you don't need to insert multiple p5js canvas in one page, I guess you are looking for Michael Paccione's answer

5

P5.js gives you an html canvas that you can use for positioning your sketch.

Here is an example of using a canvas as the background of a div:

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
           position:absolute;
           top:0;
           left:0;
           width:100%;
           height:100%;
           z-index:-1;
        }
    </style>

</head>
<body>
    <h1>Heading</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <script src="processing-1.4.1.min.js"></script>
    <div id="canvasContainer">
    <canvas data-processing-sources="rectangles.pde"></canvas>
    </div>
</body>

This is Processing.js instead of P5.js, but the idea is the same. Try googling something like "html canvas as background" for a ton of results. Try something out, and post an MCVE if you get stuck.

4

To be more detailed about the answer:

function setup() is a function which executes ojnly once at the startup.

function draw() is a function which executes after setup() and it reloads on every frame of the picture.

The code goes like this:

<!DOCTYPE html>
<html>
<head>
  <title>P5.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
  <script>
    function setup() {
      var canvas = createCanvas(400, 400);
      canvas.parent('canvasForHTML');
    }

    function draw() {
      background(127);
    }
  </script>
</head>
<body>
  <h1>Canvas for visualization</h1>
  <div id="canvasForHTML"></div>
  <p>Move your mouse around to see circles.</p>
</body>
</html>

Check this: https://jsfiddle.net/sugandhnikhil/74Ltdy8z/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.