tutorials / p5js / web

P5.js and Web Dev

tutorial p5.js javascript html css

P5.js is a JavaScript library that runs inside an HTML page. That means in addition to all the cool stuff P5.js gives us, we also have access to all of the stuff we can do with HTML, and all of the stuff we can do with regular JavaScript.

That means we can mix HTML content and a P5.js sketch, and we can mix regular JavaScript with P5.js code.

HTML

Here’s an example that shows a P5.js sketch mixed with HTML content:

<!DOCTYPE html>
<html>
	<head>
		<title>P5.js Example</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
		<script>
			function setup(){
				var canvas = createCanvas(200, 200);
        canvas.parent('sketch-div');
        background(32);
			}
			
			function draw(){
				fill(255);
				ellipse(mouseX, mouseY, 25, 25);
			}
		</script>
	</head>
	<body>
    <h1>Circles Sketch</h1>
    <div id="sketch-div"></div>
    <p>Move your mouse around to see circles.</h1>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The HTML contains a <div> with an id of sketch-div. Then in our P5.js code, we use the canvas.parent() function to tell P5.js to place the canvas inside that div instead of just appending it to the end of the page by default.

This means our P5.js canvas can be treated just like any other HTML element.

CSS

We can also use CSS in the webpages that hold our P5.js sketches.

<!DOCTYPE html>
<html>
	<head>
		<title>P5.js Example</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
		<script>
			function setup(){
				var canvas = createCanvas(200, 200);
        canvas.parent('sketch-div');
        background(32);
			}
			
			function draw(){
				fill(255);
				ellipse(mouseX, mouseY, 25, 25);
			}
		</script>
    <style>
      body{
        background-color: #00aaff;
        text-align:center;
      }
      
      h1{
        background-color: #ffffff;
      }
      
      p{
        font-size: 18px;
      }
      
      canvas{
        border: thin solid red;
      }
    </style>
	</head>
	<body>
    <h1>Circles Sketch</h1>
    <div id="sketch-div"></div>
    <p>Move your mouse around to see circles.</h1>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

This example adds CSS to style the webpage. We could store the CSS in a separate .css file.

Calling JavaScript from P5.js

We can also mix regular JavaScript with our P5.js code. Let’s say we had a regular JavaScript function like this:

function updateLabels(x, y){
	var xLabel = document.getElementById('x-label');
	xLabel.innerHTML = 'X: ' + x;

	var yLabel = document.getElementById('y-label');
	yLabel.innerHTML = 'Y: ' + y;
}

This is a plain old JavaScript function, without any P5.js code. We could call this from regular JavaScript code, maybe from an event callback function. And since P5.js code is just JavaScript code, we can also call this function from P5.js code:

<!DOCTYPE html>
<html>
	<head>
		<title>P5.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js">         </script>
    
    <script>
      function updateLabels(x, y){
        var xLabel = document.getElementById('x-label');
        xLabel.innerHTML = 'X: ' + x;
        
        var yLabel = document.getElementById('y-label');
        yLabel.innerHTML = 'Y: ' + y;
      }
    </script>
		
	<script>
		function setup(){
			var canvas = createCanvas(200, 200);
	canvas.parent('sketch-div');
		}
		
		function draw(){
	background(32);
			fill(255);
			ellipse(mouseX, mouseY, 20, 20);
	
	updateLabels(mouseX, mouseY);
		}
	</script>
	
	</head>
	<body>
    <div id="sketch-div"></div>
    <p id="x-label"></p>
    <p id="y-label"></p>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

I’ve separated the code into two separate <script> tags just to show that they can be separated. You could also do something like put the regular JavaScript in a scripts.js file and the P5.js code in a sketch.js file. That doesn’t make a ton of sense in this example because you’d probably just put all of your code together. But the point is that P5.js code can call regular JavaScript code, because that’s what P5.js code is!

Calling P5.js from JavaScript

We can also go the other way and call P5.js code from regular JavaScript code.

<!DOCTYPE html>
<html>
	<head>
		<title>P5.js Example</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
		<script>
      
		function setup(){
			var canvas = createCanvas(200, 200);
			canvas.parent('sketch-div');
			background(32);
		}
			
		function addCircle(){
        	fill(random(256), random(256), random(256));
        	ellipse(random(width), random(height), 20, 20); 
        }
      
        function buttonClicked(){
        	addCircle();
        }
		</script>
	</head>
	<body onload="setupListeners()">
    <div id="sketch-div"></div>
    <button onclick="buttonClicked()">Click me!</button>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

This code creates a <button> element with an onclick that calls the buttonClicked() function. The buttonClicked() function is just a regular JavaScript function, but it calls the addCircle() function, which adds a random circle to the P5.js sketch. Note that we could just call addCircle() as the onclick handler directly, but I wanted to show calling P5.js code from JavaScript code.

Homework

Next: Libraries