How to Write ProcessingJS Outside of Khan Academy

How To Write ProcessingJS Outside Of Khan Academy

If you’ve spent any time learning to code at khanacademy.org, then you’ve most likely started learning JavaScript and a library called, ProcessingJS. The library is a great way to get young sapling programmers doing some really cool things with very few lines of code – provided that you’ve preconfigured a friendly environment that hides all of the complexity of setting up a ProcessingJS project. Most KA students don’t know how to write ProcessingJS outside of Khan Academy, and so I’m going to show you exactly how it’s done.

Authors Note: This is an article I had started writing a couple years ago and never got around to polishing it. There’s no way I could finish off the final details as I simply haven’t used any of what’s taught in this article since then. But it still seems like it could be helpful so I’m publishing it :p

Introduction

There are a few things we’re going to cover before we jump into writing any code. If you want, you can skip this part and jump straight into setting up a ProcessingJS project.

First of all, let’s make sure it’s clear what ProcessingJS is, and what the difference between the KA version, and the version you’ll be using outside.

ProcessingJS is an interpreter written in JavaScript that takes Processing code and translates it into JavaScript so that it can be run in a web browser. Wait.. what?

That definition is probably confusing to a lot of you if you are still new to programming. What it means is that Processing is actually a language that has nothing to do with JavaScript or the web. Processing is a lightweight language written in Java (another language which is completely different from JavaScript) to make writing powerful visualizations fast and easy to do.

You can read a lot more into what Processing is by visiting the official website: https://processing.org/

ProcessingJS, on the other hand, is a program that was written in JavaScript to translate Processing code into JavaScript. So when you use ProcessingJS in a project, you are not even technically writing JavaScript. However, the ProcessingJS team has also provided a way to use the Processing functions through the JavaScript language.

Are you following me so far?

It can seem a little confusing but ProcessingJS is technically not a JS library. It is a tool for converting code written in Processing into JavaScript. But, since ProcessingJS is written in JavaScript, it’s possible to access Processing functions such as draw(), rect() and ellipse() through using regular old JS.

The important take away is that ProcessingJS as a JS library is a secondary feature. It’s primarily intended to be used as a way for Processing developers to get their projects to run inside of web browsers. Because of this, using ProcessingJS the way it is taught through Khan Academy is not a trivial task if you are just starting your journey as a programmer.

To make it worse, Khan Academy has also extended the “library” by including some nice custom additions that make it a little easier to start making programs – especially for their younger demographic (some students who try the Hour of Code are literally 5 – which is awesome!).

You might be wondering why I’m going into such depth trying to explain these points… It’s because these points affect you in two very big ways.

The first point – the fact that ProcessingJS is not primarily a library – means that there is no documentation for ProcessingJS for JavaScript programmers, with the exception of the docs on Khan Academy. All of the documentation is written in the Processing language, so it’ll be up to you to figure out how to translate that into JavaScript.

The second point – which is that KA has added a few things to make your introduction to programming a little easier – means that if you’re hoping to transport your KA projects outside and into a project of your own running on your own machine, then there is a good chance you’ll have to edit a lot of your code to get it working.

Alright – that’s enough priming… Let’s actually dig into the fun stuff and start setting up our ProcessingJS project.

How To Write ProcessingJS Outside Of Khan Academy… Finally

First thing is first. We have to create a directory for our project to live inside of. I like to use a directory called batcave on my computer, and it’s where all of my project directories go. I use to try and organize projects by having directories and subdirectories to categorize everything, but it actually became harder to keep organized as my project count grew. Now I just keep everything in one place, and it makes it much easier to search for projects I’m looking for.

Let’s call this project my-first-pjs.

Now from your text-editor (I’ll be using Atom for this tutorial), click File -> Open Folder -> my-first-pjs.

How to write ProcessingJS outside of Khan Academy - open my-first-processingjs gif

Atom will then open up a new window with my-first-pjs as the root directory for our project.

Now let’s make a new file and call it index.html.

In Atom right-click my-first-pjs -> New File and name it index.html.

Create new file index.html

Once the new file loads, Atom will open it up in your editor pane on the right.

Aside:

If you don’t already know what HTML is, that’s OK. You don’t need to know anything about HTML to follow this tutorial. Just know that this is the file we will be using to load our PJS project in the browser. However, I do suggest taking some time to learning some HTML basics. If you’re going to be making projects with JavaScript and PJS you’re going to also be working with HTML quite a bit. Eventually, you have to learn this stuff.

A good place to start is: http://www.w3schools.com/html/

There are also these other great resources:

The next step is to do our normal HTML5 scaffold. If you have Emmet installed you can simply type html:5 and press tab. If you don’t know what I’m talking about, then you can just copy and paste the code below:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>My First PJS</title>
</head>
<body>
 
</body>
</html>

Don’t forget to save!

Again, you don’t need to understand what any of that code means, but if you do – awesome! The only thing you need to pay attention to is the &lt;body&gt; and &lt;/body&gt; tags. It’s between these two tags that all of our code is going to go. It’s important that your code is not placed anywhere else.

Adding The Canvas

The first thing we need to add to this HTML document is something called a &lt;canvas&gt; tag. On Khan Academy, this is hidden from you, the student, but the &lt;canvas&gt; tag creates a box inside of a webpage that graphics can be drawn inside of. This is where all of the graphics created from your PJS project will be rendered.

So here’s what you have to add: &lt;canvas id=”my-canvas”&gt;&lt;/canvas&gt;

Your index.html file should now look like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>My First PJS</title>
</head>
<body>
 <canvas id="my-canvas"></canvas>
</body>
</html>

And then, save your changes by pressing ctrl + S.

The id part inside of the opening &lt;canvas&gt; tag is the name we will use later to attach our PJS project to the canvas.

Downloading ProcessingJS

The next thing we have to do is get the PJS source code so that we can use it’s commands (called functions) inside of our own project. Without the PJS source code, it’s impossible for the browser to know what rect() or ellipse() is supposed to mean. These functions are available to us by including the PJS source code in our project.

The way you get the source code is by visiting processingjs.org/download. There are two files: one called processing.js and another called processing.min.js. The difference between the two is that processing.js is the “human-readable” version of the source code. It’s the version that was actually written by a real person with the intent of being readable to other programmers. The processing.min.js file, on the other hand, is not human-readable at all. It’s the results of running a minifier on the source code, which will remove all white space, and rename variables and functions to archaic names like a b or c. The advantage is that it works the same, but the filesize is much smaller – which means it loads faster.

It doesn’t matter which version you pick. For this tutorial though I’m going to use processing.min.js. Once you click the link, you’ll be brought to a page that has nothing, except for the source code. Just click anywhere on the page and press ctrl + A to select all of the code. Then copy it with ctrl + C.

Now create a new file in your project called pjs.min.js

Create a pjs.min.js file

Once you do that, just paste in the source code.

paste-pjs-code

And save.

If we want to be able to use the ProcessingJS functions, we need to attach it to our HTML document. We do that by adding a <script> tag. Go ahead and add this line bellow your <canvas>: <script src=”pjs.min.js”></script>

Your HTML should now look like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>My First PJS</title>
</head>
<body>
 <canvas id="my-canvas"></canvas>
 <script src="pjs.min.js"></script>
</body>
</html>

Once you save your work, we’re ready to start writing the code for our project. For the purposes of keeping this tutorial beginner friendly, we’ll be writing the code directly inside of our index.html. It’s preferred practice to write the code in a separate file, but in order to do that with ProcessingJS, we have to run our project on a web server, which is out of scope for this tutorial. In a later tutorial, however, I’ll cover exactly how to do this in a fashion that’ll be easy for beginners too 😉

For now, we’re going to start by adding another pair of <script> tags. Just place them below the last pair that binds the ProcessingJS file to our HTML.

Your HTML should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>My First PJS</title>
</head>
<body>
 <canvas id="my-canvas"></canvas>
 <script src="pjs.min.js"></script>
 <script>
 // Our JavaScript will go here.
 </script>
</body>
</html>

Initializing Our Project

If you are a true beginner, who has barely started learning any programming at all, this next step might not make much sense. Since the goal of this tutorial is to get KA users writing PJS in their own local projects, I’m not going to cover this in any detail; only what you need, and where your own code will go.

We’ll take a step back in the next tutorial and look more specifically into what each line does. For now, this is what you need to add between your <script> tags:

 <script>
 function sketchProc(processing) {
   // set the canvas size
    processing.size(400, 400);
 }
 
 // grab the canvas element
 var canvas = document.getElementById("my-canvas");
 // attach the sketchProc function to the canvas
 var processing = new Processing(canvas, sketchProc)
 </script>

Again, in another tutorial, we’ll look at what each line is doing, but for now, you should be able to open your index.html in a web browser and see a gray square. The easiest way to open the file in Atom is to right-click and select copy full path from the menu.

Copy the full path to index.html

Then you can paste the path into your browser, and you’ll see the ProcessingJS app running 🙂

Paste the path in your browser

OK, so that’s a lot of setup to get a gray square on the screen, isn’t it? A good idea would be to save this as a sort of template project – that way you don’t have to go through this whole process each and every time you want to write some PJS. Instead, you could just copy this project and give it a new name, then start from here.

So what do you do next to create the pretty graphics and shapes you’re used to making on KA? Almost exactly the way you’ve already been doing it. You just have to write processing before each function. Example: for a 50×50 rectangle you would write processing.rect(0, 0, 50, 50); which would place the square in the upper left corner of the canvas.

Of course you also have to include processing.fill() above that line, or you won’t see anything.

Here’s how your code should look to get a red rectangle drawn at 0:0 with a size of 50×50 pixels.

 function sketchProc(processing) {
 
   // set the canvas size
   processing.size(400, 400);

   // draw a rectangle
   processing.fill(255, 0, 0);
   processing.rect(0, 0, 50, 50);
 }

 // grab the canvas element
 var canvas = document.getElementById("my-canvas");
 // attaching the sketchProc function to the canvas
 var processing = new Processing(canvas, sketchProc);

If you haven’t already assumed, all of the processing code you’re used to writing is going to go inside of the sketchProc() function… it’s also going to take a lot longer to write now, because you have to prefix all of your normal Processing functions with processing. Unless… you wrap your code inside of a special statement called with.

But before I go forward, I want to make it clear that this is not the recommended way of doing things. It’s just easier, less typing, and in my honest opinion, perfectly exceptable for personal projects that won’t ever be running on a live production server. In the next tutorial, we’ll look at an alternative to with. You can read the documentation here if you wish: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with

Anyways –

Here’s how you use with, so you can write less code in your ProcessingJS project.

 function sketchProc(processing) {
 with(processing) {
 
   // set the canvas size
   size(400, 400);

   // draw a rectangle
   fill(255, 0, 0);
   rect(0, 0, 50, 50);
 }}

 // grab the canvas element
 var canvas = document.getElementById("my-canvas");
 // attaching the sketchProc function to the canvas
 var processing = new Processing(canvas, sketchProc);

That’s starting to look a little more like the code you write on Khan Academy isn’t it?

From here you will be able to write ProcessingJS just like you do on KA save for a few convenience functions that only exist in their environment. You can either use alternative functions provided by the official ProcessingJS “library” or if you’re ambitious, you can try implementing those functions yourself.

Cheers!

Dan

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.