P5.js not working in blogger

p5.js Beginners
1

Hi,
Does p5.js work on blogger.com platform? It is not working for me. Tried with simple p5.js with canvas and included the cdn link but does not work. Has anyone tried p5.js on blogger?

1 Like
2

Hi @processing_user,

What do you mean by “It is not working for me” ? Do you have any error messages in the web console? Is the script really executed?

3

I think the easiest way is to embed the sketch to your page as an iframe. For example, if you are on p5.js web editor, select share and there is an HTML code for embed that you can directly paste into your blog page (HTML view)

4

thanks, iframe works but still how can i do it without iframe?

5

in blogger platform we just paste the html code and javascript in page or blog. with other js with html/css it works perfectly but with p5.js the same thing does not work

6

All right can you tell us what is not working?
Can you verify if the CDN link is working?
Are the script tags correctly ordered? (See this)
Are there any errors in your JS code? (Press F12 to open the developer console and paste any errors here)

1 Like
7

hi, the following is the code on single html page:

<html>
<head>
  <style>   
  canvas {
    outline: black 3px solid;
  border-radius: 12px;
}
    </style>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
</head>

<body>
  <script>
  function setup() {
createCanvas(480, 120);
}


function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(155);
}
ellipse(mouseX, mouseY, 60, 60);
}
  </script>
</body>
</html>

the cdn link is working.
below is picture of blog page in blogger.com(free blog platform):

1
11306Ă—585 89.2 KB

8

Thank you for that, it looks fine.

Can you do the following when you are on your blog’s page?

9

hi, no errors can be seen:

2
21330Ă—565 125 KB

10

the blog shows only rectangle:

1
1987Ă—542 27.4 KB

11

this worked for me

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>

<div id="p5canvas"></div>

<script>
  function setup() {
createCanvas(480, 120).parent("p5canvas");
}


function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(155);
}
ellipse(mouseX, mouseY, 60, 60);
}
</script>

the problem is the editor on blogger is not the entire html page, but a portion of the page that renders the content. So you cannot add tags like <html> and <body>. The other issue is that if you don’t select parent() of the canvas, it will appear at the bottom of the page. You need to place <div> where you want to show your canvas, and attach the canvas to that div.

3 Likes
12

awsome, :+1: tested and good to go, many thanks

1 Like
13

you’re welcome! I don’t earn any points by this but if you could set the post above as “solution” it might help people visiting here in the future :slight_smile:

2 Likes