Portfolio

Step 1: Activate your UW shared web hosting

1. Visit uwnetid.washington.edu
2. Click on "Computing Services" on the left sidebar
3. If under "Inactive Services", check the box next to "Dante/Vergil Account"
4. If under "Inactive Services", check the box next to "Student Web Publishing"
5. Click "Subscribe"

Step 2: Browse to your website

1. Open a browser and visit http://students.washington.edu/<UWNetID>/, replacing <UWNetID> with your own UWNetID
2. You should see a page with some text and an under construction icon

Step 3: Change Cyberduck Preferences

1. Open Cyberduck
2. In the top-left corner of your screen, open the Cyberduck menu and select "Preferences"
3. In the "General" tab, make sure that the "Use Keychain" box is selected and your Default protocol is "SFTP (SSH File Transfer Protocol)"
   
4. Switch over to the "Editor" tab, make sure that the "Always use this application" box is checked, and then use the drop-down menu to select "Choose..." and find Visual Studio Code in your Applications folder
   

Step 4: Create a server connection using SFTP

1. In Cyberduck, click the plus symbol (+) in the lower-left corner (circled in image below)
2. Make sure "SFTP (SSH File Transfer Protocol)" is selected in the drop-down menu at the top
3. [optional] Change the Nickname field
4. Type vergil.u.washington.edu into the Server field
5. Enter 22 into the Port field
6. Enter your UWNetID into the Username field
7. You should see your new "bookmark" show up in a row in the original Cyberduck window
   
8. Exit the dialog box by clicking the red circle and then double-click your new bookmark
9. When asked for your password, make sure that the "Add to Keychain" button is selected so that it will save your password
   
10. If you get an unknown fingerprint popup, check the "Always" box before clicking "Allow" so that it won't prompt you for this in the future
    

Step 5: Organize your remote filesystem

1. Your Cyberduck window should now show a public_html folder: double-click it to enter
2. Click the Action icon (⚙ ) in the top-middle of the Cyberduck window and select "New Folder..."; name it "img", which is short for image
3. Create a second new folder called "js", which is short for javascript
4. Double-click the img folder and create a folder called "project-images"
5. Click the triangle pointing up (▲) to go up a folder
6. Double-click the js folder and then create a folder called "projects"
7. Right-click the following button and choose "Save link as..." to download p5.js to your desktop
8. Drag the p5.js file from your desktop into the Cyberduck window to upload it to your js folder
9. Go back to the public_html folder and it should look like the following (minus justin.jpg)
   

Step 6: Upload an image of yourself

1. Find an image of yourself that you would like to add to your portfolio (justin.jpg in the example above)
2. Drag this image into the Cyberduck window to upload it to the img folder
   • Option 1: double-click into the img folder first and drop the image anywhere
   • Option 2: drop the image directly to the right of the img folder name, making sure that the folder is highlighted when you release your mouse

Step 7: Edit your index.html file

1. Right-click on index.html and choose "Edit with > Code"
2. Change one of the images on your site to be the picture of yourself:
   • You will need to change the src field within the img tag in the HTML to be img/<image name>, where <image name> is the name of the image file you just uploaded (e.g. <img align=left src="img/justin.jpg">)
   • [optional] add a height field within the img tag in the HTML to adjust the display size of your image (e.g. <img align=left src="img/justin.jpg" height=200>)
   • Your TA will better explain how to do this - ask for help if you need it!
3. Change the text on the page, sharing details about yourself or why you are taking this class
   • For an example, see the Example section

Step 8: Submit your website URL

• Copy your portfolio URL and submit it to the following two Canvas assignments, which we will use when we grade your portfolio during the quarter:
  1. Portfolio Update 1
  2. Portfolio Update 2

Note: More resources can be found at: https://itconnect.uw.edu/connect/web-publishing/shared-hosting/

---

Checkoff

• Show your website to a TA.
  • It must display a picture of you that is stored on your UW server space.
  • It must contain information about yourself and why you are taking CSE120.
• Show your server space directory tree in Cyberduck to a TA.
  • Must contain the img, project-images, js, and projects folders in the correct places.
• Show your index.html file to a TA.
  • Must be styled correctly with html, head, body, title, and paragraph (p) tags.
• Your website URL is submitted to the TWO Canvas assignments linked above in Step 8.

Step 1: Connect to your website in Cyberduck

Step 2: Create a new javascript file for your project

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

Step 3: Edit your project javascript file

1. Right-click on your new file and choose "Edit with > Code"
2. Make the following changes to your code (as they apply):
   • Change the size() function to createCanvas().
   • Replace variable types in variable declarations with the keyword var. Note that definitions of colors (e.g. color(#,#,#)) should remain untouched.

     int i = 5; float f = 0.5; char ch = 'K'; color c = color(0,0,255); boolean b = false;

     ⇨

     var i = 5; var f = 0.5; var ch = 'K'; var c = color(0,0,255); var b = false;

   • All function calls in the global scope (e.g. at the top of your program) need to be moved into setup().

     float f = random(10,20); color c = color(0,0,255);

     ⇨

     var f; var c; function setup() { f = random(10,20); c = color(0,0,255); ...

   • Replace function return types (e.g. void, int) with the keyword function. This includes setup() and draw().
     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++ )

   • Arrays lose their datatypes and are replaced with the Array keyword. Also note the use of parentheses () instead of brackets [].

     int[] elliX = new int[7];

     ⇨

     var elliX = new Array(7);

   • If you are using keyPressed():
     • You no longer need a check for CODED.
     • The arrow keys now have the names UP_ARROW, RIGHT_ARROW, DOWN_ARROW, and LEFT_ARROW.
     • Letter keys are always capitalized (i.e. your program will never detect a 'k', only 'K').
   • If you are using Strings, you get the length using just the length keyword:

     str.length()

     ⇨

     str.length

3. Save your javascript file
   • IMPORTANT: Any time you edit your js file on your website, you will need to hard refresh your browser (Cmd+Shift+R on Mac; Ctrl-F5 on Windows) to see the changes.

Step 4: 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. taijitu.html)
3. Open your new html file in VS Code and paste the following into it:

   <html>
       <head>
           <script language="javascript" type="text/javascript" src="js/p5.js">
           </script>
           <script language="javascript" type="text/javascript" src="js/projects/taijitu.js">
           </script>
       </head>
   
       <body>
           <h2>PROJECT NAME</h2>
           <p>
               <b>Description:</b><br>
               YOUR DESCRIPTION HERE
           </p>
           <p>
               <b>My Experience:</b><br>
               YOUR EXPERIENCE HERE
           </p>
       </body>
   </html>
   

   • Notice that the first script tag is importing p5.js
4. Change taijitu.js in the second script tag to import the correct javascript file for your project
5. Update the body with your actual project name, description, and experience
   • Part of your portfolio grade will be based on including sufficient details in your description and experience sections
6. Save your html file

Step 5: 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:

   <br><a href="taijitu.html"><img src="img/project-images/taijitu.png" /></a>

   • Change taijitu.html and taijitu.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

• Your website displays a (non-broken) picture of your newly-added Processing project.
• Clicking on that picture takes you to a separate html page for that project.
• The project page has your working Processing project along with a project description and details.
  • If your project is not displaying, see the Debugging section down below for tips. Don't hesitate to ask a staff member, either!

Make sure your portfolio is properly updated: we will be checking three times during the quarter. You are encouraged to include as many assignments in your portfolio as you wish, but we will be specifically checking for the ones listed below. Please be aware that many of the later assignments are quite difficult to convert to p5.js so ask for assistance early!

We strongly recommend updating your portfolio as you complete assignments so that you don't forget the process and don't have to scramble to do it all at once just before the Updates.

Creating Your Porfolio (1/18)

Minimum project set:

• None, just need info, a photo of yourself, and the correct website organization.

Portfolio Update 1 (1/31)

Minimum project set:

1. Taijitu
2. Logo Design
3. Lego Family
4. Animal Functions

Portfolio Update 2 (2/21)

Minimum project set:

1. Taijitu
2. Logo Design
3. Lego Family
4. Animal Functions
5. Jumping Monster
6. Creativity Assignment
7. Controlling Elli
8. Word Guessing

---

The following webpage is an example you may choose to follow: http://faculty.washington.edu/jehsia/

Notes:

• Because I am faculty, my website's URL shows up at faculty.washington.edu instead of student.washington.edu
• The main page (index.html) contains an image of me along with details about myself and why I teach CSE 120
  • You can "View Source" to peek at the HTML
• This portfolio contains one project (Taijitu) that runs properly in the browser and includes a sufficient description and experience report

Unfortunately, the Processing --> p5.js transition is messy because the two languages are very different. Inevitably, your p5.js code will break and your project in your portfolio will not display (i.e. the drawing canvas will not appear on the HTML page). Oh no! What can you do?

In the Processing IDE, we had the Message Area, which is the normally-grey bar just below your code. This Message Area turns red if it finds an error in the line of code that your cursor is currently on (see example to the right).

If an error occurs during the execution of your program, then the error message(s) are printed to the Console, which is the black area below the Message Area. There is a similar Console in your browsers that will let you see your error messages in your p5.js projects, too!

Finding the Developer's Console

Google Chrome:

• Option 1: Right-click anywhere on the page and select "Inspect". A side panel will open up. On the top bar of this side panel, click the "Console" tab.
• Option 2: Press Cmd+Opt+J (Mac) or Ctrl+Shift+J (Windows)

Mozilla Firefox:

• Option 1: Right-click anywhere on the page and select "Inspect Element (Q)". A bottom panel will appear. On the top bar of this panel, click the "Console" tab.
• Option 2: Press Cmd+Opt+K (Mac) or Ctrl+Shift+K (Windows)

Apple Safari (Mac only):

• Note: You must first go to the "Safari > Preferences" menu, click on the "Advanced" tab, and then check the "Show Develop menu in menu bar" button.
• Option 1: Right-click anywhere on the page and select "Inspect Element". A bottom panel will appear. On the top bar of this panel, click the "Console" tab.
• Option 2: Press Cmd+Opt+C

Reading Error Messages

Error messages show up in red in the Console. Learning to read the error messages is difficult, as there is often extraneous information contained in the message. Focus on the messages that show your p5.js file (e.g. taijitu.js:1) indicated on the right -- the number after the colon indicates which line number the error occurred on.

Some common errors:

• size() is not a valid p5 function: Change the size() function for creating your drawing canvas to createCanvas().
• Unexpected identifier: Unconverted datatype. Look for a leftover int, float, boolean, char, or color in a variable declaration and change it to var.
• Unexpected token {:
  • You have an extra set of curly braces somewhere in your code, OR
  • Unconverted function return type. Change your function return type (void, int, etc.) to the keyword function.
• Unexpected end of input: Likely you have an unmatched { somewhere in your code.

General Workflow

1. Open your portfolio in your web browser and click on the image of the project you are debugging.
2. Open the javascript file (.js) in VS Code through Cyberduck (right-click, "Edit with > Code").
3. Open the Console in your browser and look for error messages.
4. Make changes to your code in VS Code and then save the file. Cyberduck should automatically upload your modified file to your website.
5. Hard refresh your browser (Cmd+Shift+R on Mac; Ctrl-F5 on Windows) to view your changes.
6. If your project shows up now, then you're done! If it still does not show up, then go back to Step 3.