B CUSP 110B: Digital Thinking: Animation, Video Games, and the Social Web

B CUSP 110C – Digital Thinking

Exercise 3: Link in Applet to your personal web-page

In this exercise we will explore and experience:

· Step 1: Entering Processing code and running a Processing program

· Step 2: Saving and Opening your Processing program

· Step 3: Exporting the Processing program to an Applet (an application you can run from your web-browser)

· Step 4: Uploading and linking your Applet to your personal homepage

Let’s begin!!

Step 1: Entering Processing code and running a Processing program

· Download Processing 1.5.1 from:

o http://processing.org/download/

o scroll down to download from Stable Releases

o Select “Standard” for lab machines

· Make sure you remember where you download the zip-file

· Unzip the zip file, find the “processing” program inside processing-1.5.1 folder.

o Double click the program to begin processing

· Type in the “snow angle” code from lecture:

void setup()

  size(400, 400);

  background(192, 64, 0);

  stroke(255, 255, 255);

void draw()

  line(150, 150, mouseX, mouseY);

· Make sure you can run the program. Viola! Cool eh?

Step 2: Saving and opening your Processing program. We are going to save your typing into a Processing program file (so that you can use it again later), and make sure we can open the file to run the same Processing program you have typed in. To save your Processing program as a specific file name, this is what you do

· Go to: FileàSave As …

· Find a suitable location for storing your program (e.g., Desktop)

· Enter a logical file name, e.g., EX2

· EX2.pde: is your program, or source code file! Make sure you keep track of this file! For all of our Processing programming exercises and homeworks, this is the file you must submit. Do not forget to type in your name in this file so that we can find out whose submission it is.

Opening your Processing program:

· Now, quit Processing by closing the Processing window.

· Double click to open the Processing program again.

· Trying opening EX2 and run the same program again: by going to FileàOpen and finding EX2.pde file!

· See, you can save and open your program! Once again, remember

o Type in your name into your source code file

o Make sure you keep track of this file. This file contains all of your work!!

o Remember to save your program, and save often!

Step 3: Exporting the Processing program to an Applet.

· FileàExport Applet

· Export to your Desktop: ~~use a logical name. In the following example, I have named my applet “EX2”.~~ MAKE SURE: you use the same name as you name your pde file!! (in my case, this is EX2)

· Now, on your Desktop you will see a new folder with the name you used (in my case EX2), and inside this folder, I can see:

· Double click on the index.html file to run your snow angle program in the web-browser! Cool eh?

o You are running an Applet created from your Processing code

· The Applet is actually contained in the EX2.jar file. This is the only important file.

· We will update the personal web-page you have created so that you can show-off your Processing program!

Step 4: Uploading and linking your Applet to your personal homepage. To accomplish this step, we must accomplish:

· Step 4a: Download your personal index.html file from your personal website to your desktop (Warning: do not confuse your personal index.html with the one inside EX2).

· Step 4b: Update the content of your personal index.html to reference to the Applet file.

· Step 4c: Upload your modified personal index.html file and your applet file to your person website.

Before we begin, let’s create a folder on your desktop as a temporary working space:

· Create a new folder on your desktop and name it “TEMP”

· Drag your Applet (EX2.jar in my case) into the TEMP folder.

Let’s begin!

Step 4a: download your personal index.html file to your TEMP working folder

· Open connection to dante with WinSCP (refer to Step-4 of Exercise 2).

o Reminder, after you connected to dante, the window to the left is your local machine, and the window to the right is from dante.

o Again, you want to open the public_html folder on dante.

· We want to transfer your personal index.html file under the public_html folder from dante to the TEMP folder on your desktop.

o This transferring can be accomplished by dragging the index.html file from dante (the right-window of WinSCP) to the TEMP folder on your desktop (left-window of WinSCP).

o This is the index.html file we worked on previously.

Now you can open the TEMP folder to see your index.html file, together with the Applet file we moved here earlier.

· Double click on the index.html file to open it in the web-browser

o Why can’t you see the image of your personal web-page?

o The simple answer is: because the image file is not in the TEMP folder!! We are not going to worry about this problem because we will be uploading this file back to dante, and we know the necessary image file is present on dante! Right?

Step 4b: Update the content of your personal index.html to reference to the Applet file.

· We want to edit the index.html file inside the TEMP folder.

· Edit index.html with NotePad++ (refer to Step-3 of Exercise-2), go to the very end of the file:

· We want to create a level-2 header, so type in the following text:

<h2> My Exercise:</h2>

· We want to refer to the applet file, so type in the following text:

o Of course you need to replace “YourApplet” with the actual name of your applet file (keep the .jar and .class extensions).

· Now, double click the index.html file in your TEMP folder to see and run your applet!!

You have successfully linked in your applet to your web-page!! Now, let’s update

Step 4c: Upload your modified personal index.html file and the your applet file to your person website! By now, you should know how to do this, update both of the files (index.html and your applet file) in the TEMP folder onto dante.

To Turn In
Nothing! Send Jack an email with the URL to your personal website (i.e., http://students.washington.edu/YourNetID). Jack will double check to see your applet and give you credit accordingly.

Wrap Up

In this exercise you have practiced:

· Editing, running, saving, loading Processing source code file.

· Creating, testing an applet from your processing source code file.

· Transferring files to (upload) and from (download) a web-server (dante).

· Modifying your personal webpage to embed an applet application.

To Turn In Nothing! Send Jack an email with the URL to your personal website (i.e., http://students.washington.edu/YourNetID). Jack will double check to see your applet and give you credit accordingly.

Wrap Up

To Turn In
Nothing! Send Jack an email with the URL to your personal website (i.e., http://students.washington.edu/YourNetID). Jack will double check to see your applet and give you credit accordingly.