This is a module where we start to review what we learned this semester, which includes the basics of programming and the nuts and bolts of writing software.
We can peak beyond the limits of the web editor to see the entire Web ecosystem that enables our P5JS sketches to run.
we need a HTML page, with links to p5js and other p5 libraries like p5sound and p5dom for working with sound and the greater web (like the camera or other elements of a webpage) respectively.
The p5js web editor is great, but it has its limitations. If you are working on a more complex project, or you want to export and save your work locally for achiving on your computer it makes sense to understand how to work with p5js outside the browser web editor.
To export your code from the web editor, go to File > Download. You may want to make a new folder first to hold the files, as it will export a lot of files! The files will be downloaded in a single zip file that you have to unzip/uncompress.
The files are:
Phew! That’s a lot of files. If we are working with sound files, image filesor other text data files we might have even more files.
When we code on our computer we use special software called a Text Editor. This is software meant to make it easy to code. There are dozens (actually, hundreds) of free and open source text editors available. We don’t use Word for example because it adds in style information (bolding, fonts, etc). When we code, we don’t want this information. There are also programs called IDEs, which stand for Integrated Development Environment. An IDE contains a text editor and additional features like a debugger and usually a compiler.
One free open source editor/IDE for working in Javascript is Visual Studio Code by Microsoft. Others include Brackets, SublimeText, NetBeans, Geany and many others.
On the left side is the Project View / File Selector. You can have multiple projects loaded up to work with in the editor. To add a project, go to File > Add Project Folder to add it to this pane. You can now click on a filename and it will open up for editing.
The right side by default is the editing window. When you click a file in the project view file selector it will open up here. You can edit and save files.
That’s the basics of the editor!
You can change the aesthetics of the editor and UI by going to Preferences and choosing Themes.
Due to browser security restrictions, web developers must use what’s called a local server to emulate as if their website were located on a remote server, when they are testing their scripts. It acts as if you visited mywebsite.com/mysketch.js but instead you go to the file located on your computer.
To do this, we run what is called a local server. There are multiple ways to do this. The easiest is to add that functionality to VS Code, as it does not come installed out of the box.
In VS Code, go to Setting and choose Extensions. Do a search for Live Server and choose the popular one (currently has 41 million installs) and click to install it.
To use this, make sure you added your entire project folder, not just opened a single sketch.js file. If it’s not open, go to File > Add Project folder. Now in the bottom right of your screen look for Go Live and click it. It will launch a web browser and if all is successful show your running sketch canvas.
To view any errors and the Javascript console depends on what browser you are using. On Chrome, go to View > Developer > Javascript Console. In Firefox go to Tools > Web Developer > Web Console. This is where you’ll see the contes of print() for example. If a file is not loading, it will list this here as well.
Processing was invented by Ben Fry and Casey Reas at the MIT Media Lab, based on Design By Numbers, and initially released in 2001. Processing is a programming language as well as the name of an Integrated Development Environment (IDE). It is a library for the language Java that simplifies the language, and like p5.js, orients the code around designing and sketching visually using code. When Reas and Fry released Processing originally they chose Java because at that time Java applets could be run in web browsers. Due to web browser restrictions this is no longer the case.
p5.js was initially created by Lauren McCarthy in 2013 as a way to build a web-native approach to Processing. It is technically a library in Javascript and runs on a webpage in a web browser.
The Processing Transition article explains some of the key differences between coding in p5js and Processing. Some of these major differences include:
p5.js is Javascript and thus is an asynthronous language. Although code is written sequentially, even if a line of code hasn’t finished executing, the next line of code will begin running. This is why we use preload and callbacks in p5.js. In Processing no preload is necessary as all lines of code (such as loading an image) must finish before the next line may begin.
Java is a language requiring type declaration. When you create a variable in Processing, you must specify the kind of variable you need. For example, these could include int (integer), bool (boolean), float (decimal percentage). In p5.js all variables are created with var and functions, images, strings, etc can all be stored as vars.
Processing is older so there are a number of libraries available specifically to use with it. You can load these from inside the Processing IDE. These include libraries for working with video, sound, the Kinect and much more. p5.js has just a few dedicated libraries at this time (including p5.play for creating games), but additionally it can work with almost any other Javascript library if you integrate them together in your code.
The most obvious difference is that Processing works in the Processing Editor and creates desktop java applets/applications. Out of the box, p5.js works in the web editor or on websites. With more advanced knowledge you could compile a p5.js sketch along with a web browser to make an Electron app that serves as a desktop application.
Processing is better for creating desktop apps, working with hardware (Raspberry Pi, or Arduino with Firmata library), creating more robust applications, working with legacy code, and for more camera pixel manipulation without browser restrictions.
p5.js is better for creating projects that live on and integrate with the web.
Your final project should have a separate document with the following info:
Your code should:
The project should: