CSE120 Sp17 Lab 3 - Adding Processing Projects to Your Website

Goals

Adding Processing Projects to Your Website

Step 1: Browse to your website in Cyberduck

  1. Open Cyberduck
  2. Click "Open Connection" in the left-hand corner
  3. Select SFTP (SSH File Transfer Protocol) in the drop-down menu at the top
  4. Type in vergil.u.washington.edu as the server name
  5. Enter 22 as the Port number
  6. Enter your UWNetID as your username
  7. Enter your UWNetID password as your password
  8. Click "Connect"
  9. If you get an unknown host key popup, click "Allow"

Step 2: Create new folders [DO THIS ONLY THE FIRST TIME!]

  1. Double click the public_html folder
  2. Click the gear icon (Action) in the top menu and select "New Folder..."
  3. Name the folder "js", which is short for javascript
  4. Double click the new js folder
  5. Download p5.js to your desktop and then drag it into the Cyberduck window to upload it to the js folder
  6. Create a new folder called "projects"
  7. Navigate back out to public_html and then into the img folder
  8. Create a new folder called "project-images"
  9. Your Cyberduck window should like something like this from your public_html folder:

Step 3: Create a new javascript file for your project

  1. Navigate into the projects folder (inside of js)
  2. Click the gear icon (Action) in the top menu and select "New File..."
  3. Name the file <proj name>.js, where <proj name> is the name of your project (e.g. robot.js)

Step 4: Edit your project javascript file

  1. Click on your new file and then click on the Brackets symbol (Edit) in the top menu
  2. Open this p5.js converter website
  3. Copy your project Processing code from Processing into the left box and then click "Convert to p5.js"
  4. Click "Select all converted code" and copy the converted code into your javascript file in Brackets
  5. Unfortunately, there are a few things you may still need to change manually.
    • Move global variable assignments (declarations are okay) into setup(): 
      int x = 5;

void setup() {
   ...
}
      		 ⇨ 
      var x;

function setup() {
   x = 5;
   ...
}
    • Remove variable types from all function arguments (and for loops): 
      void something(int i, float f, color c) {
   ...
}
      		 ⇨ 
      function something(i, f, c) {
   ...
}
      		 
      for ( int i=0; i<max; i++ )
      		 ⇨ 
      for ( i=0; i<max; i++ )
    • Replace any lingering instances of the variable type color with var in variable declarations. Definitions of colors (e.g. color(#,#,#)) should remain untouched. 
      color c = color(0,0,255);

void setup() {
   ...
}
      		 ⇨ 
      var c;

function setup() {
   c = color(0,0,255);
   ...
}
    • Ask your TAs for assistance with arrays.
    • Check if you had anything along the lines of "print", as the "int" part will have been replaced by "var".
    • If you are using keyPressed(), remove the check for CODED and replace the key names with UP_ARROW, RIGHT_ARROW, DOWN_ARROW, and LEFT_ARROW.
  6. Save your javascript file

Step 5: Create a new HTML file for your project

  1. Navigate back out to your public_html folder
  2. Create a new file called <proj name>.html, where <proj name> is the name of your project (e.g. robot.html)
  3. Open your new html file in Brackets
  4. Paste the following into your html file: 
    <html>
    <head>
        <script language="javascript" type="text/javascript" src="js/p5.js">
        </script>
        <script language="javascript" type="text/javascript" src="js/projects/robot.js">
        </script>
    </head>

    <body>
        <p>Project description and details</p>
    </body>
</html>
    • Notice that the first script tag is importing p5.js
    • Change robot.js in the second script tag to import the correct javascript file for your project
    • Update the body with your actual project description and details
  5. Save your file!

Step 6: Add a screenshot of your project to index.html

  1. Run your project in Processing
  2. Take an interesting partial screenshot of the running project
    • Partial screenshot directions for Mac and Windows
  3. Save your screenshot to your desktop with your project name and using .jpg or .png as the file extension
  4. Drag the image file into the project-images folder (inside of img) in Cyberduck to upload it
  5. Now edit your index.html to include the following below all of your other text in the body: 
    <a href="robot.html"><img src="img/project-images/robot.png" /></a>
    • Change robot.html and robot.png to the correct file names for your project
  6. (Optional) Adjust the layout of your images and text in index.html using HTML
    • We will not be covering more HTML in this course, so you will have to teach yourself
    • There are many online resources for HTML, such as this one

Checklist