Computation 1
Introduction to Processing: Drawing with Code
Here is a link to the material and exercises we will be covering.
We will be following Andrew Hladkyj's excellent tutorial, which you can download here.
Assignment
Create 5 different Processing drawings and embed the applets into 5 html pages
1. Create a new HTML page for each drawing.
You will embed the Java applet you export from Procccessing into each page.
2. Open the Processing app and create a visual using the code demonstrated in class and in the Processing Examples (under the File menu or on processing.org
3. Experiment with the various shapes, positioning, transparency, drawing order, etc.
Check each sketch to make sure it works by using the Run command (The circle icon with the arrow or under the Sketch menu).
Keep notes describing which sketches you mocified and how. It's important to include your sources, and cite the original "authors" since you aren't the person who actually developed this code.
4. In the File menu, select Save
A folder will be created with the Processing .pde file
5. In the File menu, select Export
An applet folder will be created inside your Processing workfile folder
6. In the applet folder, look for the file with a .jar extension. Make a copy of it to your process website folder that contains the new HTML
page you created in the first step.
7. In the applet folder, find the index.html file created by Processing
Open it in Dreamweaver.
8. In Dreamweaver's Code View, highlight the code from the line just under the second div tag, starting with the first instance that reads
<!--[if !IE]> --> all the way down to, and including the last instance of <!--<![endif]--> just above a closing div tag, near the bottom of the page.
9. Paste the code into the content area of the new HTML page you created.
NOTE: You have more freedom and control of your layout if you re-purpose the box divs you used in your grids to place your applets where you want them.
10. Save your HTML file
The Preview in Browser command does not always work with these applets, so open your file from the File menu in your browser.
Remember: Your HTML file and the .jar file should be in the same folder.
NOTE: You must able to cite the source of your Processing code - the title of the example you modified and, if applicable, the name of the person who originally developed the sketch you used.
Linking to your assignments
Option 1: Create a landing page called Computation 1 with its own internal navigation (links) to your Processing drawing pages.
Option 2: Add links to each page your global navigation.
Example: The left navigation in the Grids section of this site expands to reveal additional pages inside.
NOTE: you can combine both options and you can use graphics or text for your links.
Make sure the names of your html pages match the names of the links. It's OK to give them interesting, creative names, as long as there is a main Computation 1 page where they can all be found.
Submitting Your Assignment
Put this assignment in your Project Site.
You can continue to keep each assignment in its own folder - in this case, a folder called Computation 1 - which you keep inside your main Project Site folder, or keep all of your html files in the root folder of your Project Site. As long as I can tell that you have turned in the required work for each assignment and I can get to it easily from your Project Site, I will count it as submitted.
Review these guidelines if necessary.
Here is a link to my Processing pages.
Always test your site on another computer.