Question of the day (NO GOOGLING):

The dumpster was painted purple. Why is this funny?
[bonus question: was it really painted purple? Prove it.]
P5.js and the DOM
Javascript CSS and HTML5 all have to happen on a page in a certain sequence - this sequence is called the DOM (Document Object Model). In p5.js we can also tap into the DOM and communicate directly with the CSS and HTML. This is cool.
If you want to do this you'll need to use the "p5.dom.js" library, so uncomment the line of code that access the library that is currently turned off in the p5.js example.
				<script language="javascript" src="libraries/p5.dom.js"></script>
It is easy to make a button that is in the HTML and not on the canvas but changes the animation within the script. First, create a custom function in your p5.js code. I called mine in the code below "bs" (for ball size), but now that I'm typing I see the irony. Who cares, I'm keeping the bs function.
				function bs() { 
Now in the HTML make a button that calls that function when it's clicked.
			<button onclick="bs()"> make p5.js print "hey"</button>
Of course you can make your button do something more exciting, and also, you can send values to your function if you want.
You can create a div from within p5.js and position it on the page, or alter a preexisting div that was made in the CSS. All of that happens in the code below. Heres a link to the p5.js DOM reference


	<meta charset="UTF-8">
	<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
	<script language="javascript" src="libraries/p5.dom.js"></script>
	<!--<script language="javascript" src="libraries/p5.sound.js"></script>-->
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
		body {padding: 0; margin: 0;} 
			background-color: rgb(100, 200, 100); 

	<button onclick="bs()">change size</button>
	<div id="info"> This div was created in the HTML and CSS! </div>

The P5.JS

var canvas, text;
var ballsize = 200;
var ballX = 200; 
var speedX = 2;
var joeDiv; 

function setup() {
		canvas = createCanvas(600, 200);
		canvas.position(300, 50);
		text = createDiv('This Div was created <br> within the p5.js sketch');
		text.position(50, 50);"background-color", "rgb(255, 0, 0)");
		joeDiv = select('#info');
function draw() {
		background(120, 180, 200);
		ballX += speedX; 
		if(ballX > width ){
			speedX *= -1; 
			text.html("Joe Is Good!");"background-color", "rgb(255, 0, 0)");"background-color", "rgb(255, 0, 255)");    
		if(ballX < 0){
			speedX *= -1; 
			text.html("Joe Is Very Good!");"background-color", "rgb(255, 255, 0)");"background-color", "rgb(255, 255, 0)"); 
		ellipse(ballX, height/2, ballsize, ballsize); 
function bs() { 
		if(ballsize == 200){
			ballsize = 20; 	
			ballsize = 200; 

If you look in the examples, there are scripts that are specific for using with the mobile devices. A cool thing we can do is access the XY and (if your phone has a compass) Z rotations of the phone. Notice in the examples on the p5.js page they use createCanvas(displayWidth, displayHeight); but I found that on my phone (android) createCanvas(windowWidth, windowHeight); worked way better. What say you iphone folks? Here's a link to this code on the server.

var r, g, b, x, y, z;
var text; 
function setup() {
	createCanvas(windowWidth, windowHeight);
	//createCanvas(displayWidth, displayHeight);
	r = 100;
	g = 100;
	b = 100;
function draw() {
	background(r, g, b);
	text("X " + x, 60, 60);
	text("Y " + y, 60, 160);
	text("Z " + z, 60, 260);
	x = rotationX; 
	y = rotationY; 
	z = rotationZ; 
function deviceMoved() {  
	r = map(rotationX, -180, 180, 0, 255);
	g = map(rotationY, -90, 90, 0, 255);
	b = map(rotationZ, 0, 359, 0, 255);