Setting up your Processing + HYPE project in VS Code

vscode_processing_hype_setup.md

Setting up your Processing + HYPE project in VS Code

Mac

Install & configure Processing

1. First download and install Processing. Once it's installed run it!
2. In Processing, go to the Tools menu and click "Install processing-java". This will add processing-java to your $PATH. To test this works, open your Terminal.app and type processing-java on the command line. You should see a block of text showing processing commands and options. If you see that, go to the next step.
3. With Processing open, verify where Processing is looking for your sketches. Open Preferences (⌘ + ,) in Processing and at the top of the dialog, you'll Sketchbook location. This is where Processing expects to find all your Sketches. It's also where your Libraries for Processing are added. So change the location if you need to, but otherwise, remember this path!

Download HYPE

1. Visit the HYPE project page on Github and download it.
2. Unzip and copy the HYPE folder into the libraries folder in the Processing sketchbook. You will need to create this libraries folder if it does not exist. The folder structure for your Sketches location looks something like this:

Processing
  libraries
    HYPE
      examples
      library
        HYPE.jar
      reference
      src

3. After HYPE has been successfully installed, restart the Processing application.

Configure VS Code for Processing & HYPE

1. Open VS Code.
2. Either click on the Extensions button or type ⌘ + ⇧ + P to open the command palette and type install extension and hit enter. The Extensions panel open.
3. Search for Processing VSCode and install the Processing extension contributred by Luke-zhang-04. Here's the Marketplace page or that extension
4. Once you've installed this extension, restart VS Code.

Whenever you run want to run a sketch, you will run this extension. To do this, open the command palette and type Processing, then from the resulting menu output, select Processing: Run open Processing Project. You'll see a little gear icon to the left of that menu item, btw. You can add a keybind for the action there. I have mine set to CMD + SHIFT + R. Now when you are ready to run a sketch, you can just type that shortcut and your sketch should run!

If everything worked correctly, you should see your Processing output open just as it would if you were working right within the Processing app.

PC

Install & configure Processing

1. First download and install Processing. Once it's installed run it!
2. In Processing, type CTRL+ , or go to File > Preferences.
3. In the Preferences dialog, you can specify where you want to keep your Processing sketches. If you're happy with the default, you're good to go, but you can change it to anything you'd like.

Add Processing to your system PATH

1. Now that Processing is installed, you need to add Processing to your PC's PATH. To do this, first open System Properties. To access this dialog, right-click on the Start button and select System from the context menu. Then under related links, click Advanced System Settings. Alternatively, you can also use Windows Search from the taskbar to search for Advanced System Settings.
2. With the System Properties dialog open, make sure you're on the Advanced tab, and click the Environment Variables... button.
3. Inside of the User variables section, find the entry for PATH and double-click it. The Edit environment variable dialog will open.
4. In the Edit environment variable dialog, click New. A new entry for PATH is created. Here, enter the directory path for your Processing installation (For example, C:\Program Files (x86)\Processing\processing-4.0b2). Once you've added your Processing installation path, click OK.
5. Click OK on the Environment variables dialog.
6. Finally click OK on the System Properties dialog.

Download HYPE

1. Visit the HYPE project page on Github and download it.
2. Unzip and copy the HYPE folder into the libraries folder in the Processing sketchbook. You will need to create this libraries folder if it does not exist. The folder structure for your Sketches location looks something like this:

Processing
  libraries
    HYPE
      examples
      library
        HYPE.jar
      reference
      src

3. After HYPE has been successfully installed, restart the Processing application.
4. To ensure you got this all right, open Processing and under Sketch > Import Library you should see HYPE in the Contributed section. If you don't see it, review the above instructions to make sure you didn't miss a step!

Configure VS Code for Processing & HYPE

1. Open VS Code.
2. Either click on the Extensions button or type CTRL + ⇧ + P to open the command palette and type install extension and hit enter. The Extensions panel open.
3. Search for Processing VSCode and install the Processing extension contributred by Luke-zhang-04. Here's the Marketplace page or that extension
4. Once you've installed this extension, restart VS Code.

Whenever you run want to run a sketch, you will run this extension. To do this, open the command palette and type Processing, then from the resulting menu output, select Processing: Run open Processing Project. You'll see a little gear icon to the left of that menu item, btw. You can add a keybind for the action there. I have mine set to CMD + SHIFT + R. Now when you are ready to run a sketch, you can just type that shortcut and your sketch should run!

If everything worked correctly, you should see your Processing output open just as it would if you were working right within the Processing app.