Setting Up Processing with p5.js JavaScript Mode

Setting Up Processing  with p5.js JavaScript Mode
In this Processing p5.js tutorial, we will build a startup Processing sketch template that we can use as a starting point for new projects. Along the way, we will learn a little about how to use the Processing environment. Although I will be coding in the p5.js Editor for demonstration purposes, some of you might want to use the original Processing environment. So in this tutorial, we will discuss how to switch to the JavaScript p5.js mode in that environment.

  • Download and install Processing
  • Start a new sketch in Processing
  • Switch to the JavaScript p5.js mode
  • Add comments to the code
  • Add the createCanvas() function
  • Add the background() function

Install for Mac OS X
You can download a copy of Processing from the processing.org website. Click the Download link in the left side menu of the website to go to the download page. Download the zip containing the latest version for your operating system.

  1. Unzip the zip file and you will get the Processing.app file. Move the .app file to the location of your choice.

  2. Click on the .app file to open Processing. If this is the first time, you will get a new sketch file in the editor. If not, click File - New to start a new sketch.

  3. Install the JavaScript Library
    Now we can install the JavaScript library so that we can work in the JavaScript mode.

  4. Open the menu at the top right corner of the Processing editor and choose Add Mode (see screenshot).

  5. In the Contribution Manager window, select p5.js Mode and click Install (see screenshot). Close the window to go back to the Processing editor.

  6. Open the top right menu again and choose p5.js, to switch from the Java mode to the p5.js JavaScript mode (see screenshot).

  7. When you start a new file in JavaScript mode, you will see the editor change a little (see screenshot). Processing generates two new files for you, the sketch.js file and the index.html file. We will be adding our code to these files. You will get two tabs, one for each file. If you click on the index.html tab to view the code on the page (see screenshot), you will see two script tags at the top. One script tag references (tells the browser to read) the p5.min.js library and the second references the sketch_xxx.js script. Notice that Processing has generated a temporary name for the sketch file, starting with sketch_ and followed by a few random numbers and letters. We will be renaming this file when we save it.

    Let's Start Coding
    Let's start with the sketch file, by adding a few lines of text at the top that will identify the file's purpose. As this text is for humans to read, we will tell the browser to ignore the text by placing special characters around the text. This is commonly referred to as commenting out the text.

    There are two ways to add comments to the code, depending on how many lines of text. A single line of text can be easily commented out by placing two forward slashes at the front of the text.

    // single line comment

    If you have more than one line of text, you will put special characters at the beginning and end of the text block. At the beginning, we will put a forward slash followed by an asterisk. At the end, we will reverse the two characters. This tells the computer to ignore everything in-between.

    /*
    Multi-lined comment
    Multi-lined comment
    */


  8. In the editor, add two new blank lines above the existing code (see screenshot).

  9. On the first line, add the opening /* characters.

  10. Add another blank line and add the two lines of text. Use your own name in the copyright text.

  11. On a new blank line, add the closing */ characters.

  12. /*
    Processing Startup Sketch
    Copyright (c) Year Your Name Here
    */


    We will be adding more text to this comment text later. Let's take a look at the two blocks of code below. The first block is the code for the setup() function. This function will set up the sketch program in general, such as setting the dimensions for the canvas. The second block of code is the draw() function. This code contains instructions for drawing on the canvas, such as setting the background color or drawing a shape.

    Now, we will add some code that will set the width and height of the canvas. Let’s tell the program that we want to create a canvas that will be 300 pixels wide and 500 pixels high. We will do this with the createCanvas() function, which takes two parameters for the width and height in pixels. These numbers will be placed inside the parenthesis (see screenshot).

    createCanvas(width, height);

    function setup() {
      createCanvas(300, 500);
    }


    Every programming language has its own syntax or rules for writing code. Notice that we put the pixel width first, followed by a comma. Next we put the pixel height. Also notice the we finished the line of code by adding a semi-colon.

    The second block is the code for the draw() function. It contains code that will draw on the canvas. We will add code that will make the canvas pink. You can work with colors using several color modes, which we will discuss later. But for now we will use a Hexadecimal color string. The syntax for this code is to start with the pound sign, followed by the six letter color code. As this is a string of characters, as opposed to numbers, we need to place apostrophes around the string (see screenshot).

    function draw() {
      background('#ffe6ee');
    }


    That’s it. Let’s run the code.

  13. Click the Run button and wait for the browser window to open. You will see a solid pink rectangle that is our canvas (see screenshot). Close the window.

  14. Rename and Save
    Let’s save this sketch as a startup template.

  15. From the Menu, click File - Save As.

  16. In the pop-up window, choose a folder where you wish to save the file or keep the default folder.

  17. Rename the file to StartupSketch and click Save.

Processing will create a new folder with the same name as the file, i.e. StartupSketch (see screenshot). Inside the folder will be the index.html and StartupSketch.js files, along with some supporting files.

In our next tutorial, we will draw on the canvas.

Coding Art in p5.js Processing - Tutorial Series Index

Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.

Processing.org
https://processing.org/

P5.js
https://p5js.org/

Processing Foundation
https://processingfoundation.org/





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.