Switching to JavaScript with P5.js

P5.js is a library of JavaScript code that converts most (but not all) of the syntax of Processing into JavaScript that displays in a rectangle on the web page. First, a little background on how to create a web page in HTML, CSS, and JavaScript.

First, though, we need an authoring environment. In class, we'll use Dreamweaver Creative Cloud, but you might want to use a free HTML coding environment like Komodo Edit, or Adobe Brackets. Or you could get Adobe Creative Cloud, which includes Dreamweaver, as a trial for 30 days, which will run us up past our final on December 10th. And, of course, you have access to our labs and the library which has Dreamweaver installed.

HTML

HTML is the language that web pages are written in. It is not so much a coding language – it doesn't have any logic or variables built into it. It's really a markup language to format text, images, video, and other objects you can see in a browser window. At its most basic, it looks like this:

<h1>Hello World</h1>

Which would have a web browser display something like this:

Hello World

Simply put, the left and right brackets (or greater-than and less-than signs) and what's between them are known as tags, and what's between them is the text that gets formatted by the tag. <h1>Hello World</h1> says Hello World is a top order Headline (similar tags are h2, h3, h4, etc).

There's a tag and associated coding structure to define the content of a web page. The way the page looks (not the content it contains) is defined by CSS, or Cascading Style Sheets.

CSS

CSS tells the browser how to format the elements of a web page. For example, we could style all h1 tags with this CSS declaration:

h1 {
  color:#ff0000;
  font-family:Impact;
  font-size:3em;
  text-shadow:0 6px 10px #999;
}

Which would tell the browser to display something like this:

Hello World

JavaScript

And the third language that influences how web pages look and behave is JavaScript. It's what makes a web page interactive and dynamic. It can take input from the mouse, the keyboard, the date and time, and all sorts of other things and manipulate the elements in a web page that were created by HTML and CSS. It can even create entirely new elements in a page. And unlike HTML and CSS, it has logic in it, so it can do if/then statements. In fact, it's full-blown coding language with all of the elements we've studied in Process, plus a few more.

And it will looks familiar too:

<script>
   function doThisThing(thingToDo) {
      if(thingToDo == "explode") {
         document.getElementById("bomb").innerHTML = "BANG";
      } else {
         document.getElementById("bomb").innerHTML = "whimper";
      }
   }
</script>

Here's a bit of regular JavaScript code to change the style of an h1 tag

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple JavaScript 01</title>
<script>
function changeH1() {
   if (document.getElementById("changeMe").style.color == "red") {
      document.getElementById("changeMe").style.color = "black";
   } else {
     document.getElementById("changeMe").style.color = "red";
  } 
}
</script>
</head>

<body>
<h1 id="changeMe">Hello World</h1>
<button onClick="changeH1()">Change h1</button>
</body>
</html>

And this is the result:
simplejs01.htm

P5.js

P5.js is a library that converts our familiar Processing code into code that will control the web page. It takes the syntax of Processing, and where it doesn't exist or is different in JavaScript, and interprets it so that JavaScript will understand and do the same function as Processing. There are, however, some things that are different and even simpler when using P5.js. But first, let's set up a web page so it can display a window (called a Canvas element) in which the code will be displayed as if it were the Processing Display Window.

And to do that, we have to set up the page's html file so it can access the libraries associated with P5.js...

Every web page's html code starts off with what's called a header, which is then followed by by the body which has the stuff being presented to the viewer. That header is where we link in the library. It looks like this before we link in P5.js:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>

<body>
</body>
</html>

There's several ways to link in P5.js. You can download it and put it up on your web-server (where you keep you web pages). But it's easier and possible safer to link to the files that make up p5.js by referencing them as they are hosted by elsewhere on the web

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
</head>

<body>
</body>
</html>

For more on getting set up with P5.js, go to https://p5js.org/get-started/

Once that's done, you can write a script, but let's look at a working example to see how it's done. testp5js_01.htm

And while we're at it, here's the docs for P5.js: https://p5js.org/reference/

The Code

<script>
  // Variables don't need to be typed
  myRadius = 80
  colorToggle = true;

  // Functions don't need to be typed, but you must explicitly 
  // declare them as functions
  function setup() { 
    // Sub createCanvas() for size()
    // and put it into a variable
    var canvas = createCanvas(640, 480); 
    // Use the parent property of the canvas object to
    // identify a div to put the canvas in
    canvas.parent('p5canvas');
  }

  function draw() {
    if (colorToggle) {
      fill(255);
    } else {
      fill(0);
    }
    ellipse(mouseX, mouseY, myRadius, myRadius);
  }

  // Best way to catch the mouse interaction...
  function mouseReleased() {
    colorToggle = !colorToggle;
  }
</script>

The Differences

This is kind of familiar, but there's some important differences:

JavaScript scripts are either part of the html page or kept as separate text files ending with .js. When they're in the page's html code, they're encapsulated with a special set of tags: <script> and </script>. When they're in a linked .js file, they're linked with this html code: <script src="myscript.js"></script>
Many variables don't have to be typed (int, float, char, string, etc.), and you can declare them with the generic var. In fact, you have to remove variables types and use var instead.
setup(), draw() and mouseReleased(), while the same syntax as Processing, they are preceded by a function command instead of <1>void or other data type.
size() is replaced with createCanvas(640, 480).
And there's a bit of jiggery-pokery about putting the canvas into a variable and using canvas.parent('p5canvas') to put the display window into an html element with the id of 'p5canvas', as in <div id="p5canvas"></div>.
There's probably more to worry about, but this works pretty nicely right out of the box...

P5.js Gotchas!

As you go along, you're likely to run across things that don't work that bloody well seem like they ought to. For example, declaring a global color variable like var myColor = color(255,0,0) ought to work, it's documented as working, but it doesn't work for you. When that happens, find a work-around. In the color case, it's as simple as hard-coding the color of something rather than keeping it in a variable.

Gotchas I've Found So Far

color variables don't work as globals. Hard-code them instead (i.e. use fill(255,0,0) instead of fill(myColorVar))
mousePressed environment variable doesn't work. Use a mousePress() and mouseReleased() functions instead to set a toggle variable.
You can't use the var declaration in a function's parameters setup (as in function myFunction(myX, myY) which works, vs. myFunction(var myX, var myY) which breaks).

TIP: Use /* and */ to wrap blocks of code while you do a translation from Processing to P5.js

How To: p5.js, JavaScript & Processing

Switching to JavaScript with P5.js

HTML

CSS

JavaScript

P5.js

The Code

The Differences

P5.js Gotchas!

Gotchas I've Found So Far

Canvas Hates JavaScript

JavaScript Buttons

P5.js Robots

More On Canvas