JavaScript Mode Instructions

JavaScript mode in Processing is a nice magic trick that allows you to run a Processing sketch in a web browser. However, there are lots of reasons why it may not work from obvious ones like no third party libraries to less obvious ones like no functions with the same name as a variable. To make matters worse, some of Processing's 2.0 API is not implemented for JS. Use JavaScript mode cautiously and don't let it get in the way of the important stuff like just making what you want to make.

Later in the semester, when you start building more complex Processing applications that involve hardware devices (such as arduino or a webcam) or code libraries, you will likely instead choose to simply document your Processing work in a blog post.

Step 1: Install JavaScript Mode

When you download Processing it does not come with JavaScript mode. You have to add it. Click on "Java" in the upper right and select "add mode".

Then select "Install" for "JavaScript Mode"

After you install JavaScript mode, restart Processing.

Step 2: Write your Processing code and run your sketch in "standard" mode.

• Launch Processing
• Go to FILE --> NEW
• Go to FILE --> SAVE AS and pick a name for your sketch
• Write your code!
• Run your code! Does it work? If yes, move onto Step 3.

Step 3: Switch to JavaScript Mode

Find the button in the top right of your Processing window that says "Java". Select this button and switch to "JavaScript"

Now when you run the sketch it will launch in a web browser.

Once you see it running in the browser, go to SKETCH --> SHOW SKETCH FOLDER (or ⌘K for short)

There, you will notice you have a folder called "web-export". It should have 3 files in it.

• sketch_name.pde -- this is your Processing source code!
• index.html -- this is the HTML file that displays the Processing sketch (using an HTML5 canvas) in the browser
• processing.js -- this is the secret Javascript file that knows how to translate your Processing code into javascript

Once this is completed you can move onto step 4 and upload the three files to the ITP server

Step 4. FTP your file to a server.

• You need some FTP software. A nice option is http://cyberduck.ch/. Other options are http://rsug.itd.umich.edu/software/fugu/, Fetch (available for free from: http://www.nyu.edu/its/software/), or [http://ftp.ssh.com/pub/ssh/ |SSH Secure Shell]
• Here is the info you will need to enter (screenshot is from Cyberduck)
  • Select SFTP (SSH File Transfer Protocol)
  • Server: server address like "mysite.com"
  • Username: your login
  • Password: your password
• Once connected follow these steps
  • Create a new folder FILE --> NEW FOLDER (⇧⌘N), called perhaps "ICM"
  • Create a new folder inside ICM, called perhaps "week1"
  • Drag the files from "web-export" into "week1"

Step 5: Test the sketch and link from the class wiki

• Go to your URL: http://www.mysite.com/icm/week1 (address is case specific)
• For an example, see mine here: http://itp.nyu.edu/~dts204/icm2011/week1/

Step 6: Enter the link on the class wiki

• Find homework link for your class.
  • Danny, Wednesday Morning Section Homework Afternoon Section Homework
  • Dano, Tuesday Homework,
  • Mimi, Wednesday Homework
  • Roopa, Tuesday Homework
  • Shiffman, Tuesday Homework, Wednesday Homework

Edit the page, entering the URL path of the applet we just made, the format is:

Name - [Project Title](http://urltoyourhomework.com/icm/week1)

• Don't forget to CLICK SAVE!!!!

Alternate methods!

• Don't forget you can always document your work with video, screenshots, written text, etc. and post a link to a blog post. Don't let JavaScript mode get in your way.