An html widget implemented in javascript for playing p5js sketches. It supports the following features:
- Play & Stop buttons
- Multiple sketches may be placed on a single webpage or blog post
- Easy to include in blog posts, sketch appear where placed
Live example here.
- Upload
p5js-player.js
to your website. - Include the script on your webpage or blog post with code like:
<script type="text/javascript" src="path/to/p5js-player.js"></script>
- Place widget on your webpage or blog post with a
div
element:
<div class="p5js-player" width="400" height="250" sketch="local/001_bouncing_points/index.html"></div>
The div
tag must contain the following attributes:
class="p5js-player"
, this is what identifes the div element is the player widgetwidth
, the width of the sketch canvas, reserves spaceheight
, the height of the sketch canvs, reserves spacesketch
, the url to a.html
file with your p5.js sketch
The sketch .html
file should include the p5.js and your sketch.js and any other files
you may be using. To reduce the amount of padding, specify 0 for margin
, border
, and
padding
.
For example, here's an example .html
:
<html>
<head>
<style>
body
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript" src="../lib/p5.js"></script>
<script language="javascript" type="text/javascript" src="../lib/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</body>
</html>