TUTORIAL HOW TO USE OPEN PROCESSING DSDN142 CREATIVE CODING CREATE YOUR USER ACCOUNT In your internet browser open the website url http://www.openprocessing.org/ and click on “register”.
1. You need to register a username and provide a password. Please use a username that has following syntax: dsdn142_yoursurname_x (x is the first letter of your first name). 2. Provide your full name and your email address. 3. Try to get the two spam protection words correct (this is sometimes hard). 4. Click on register.
CREATING AN AVATAR You may want to use an avatar so you can be recognised. This stage is optional but useful. OpenProcessing uses Gravatar, a universal avatar site.
TASK: Using your experience with OpenProcessing, register for an account at Gravatar. Upload an avatar image. IMPORTANT: Although Gravatar will display your image by your email address, it is NOT yet your avatar. You must select the image, as indicated below.
PREPARING TO UPLOAD You will develop files on your computer, but submit them on the OpenProcessing website. First, export your sketch from Processing. Use File → Export, press “Ctrl + E”, or click the Export button seen below. Do not use File → Export Application. OpenProcessing does not want those files.
Processing kindly opens a window for the Applet you have just created. Navigate up one level, and ZIP the entire Applet folder (see the tutorial on ZIP files). As you can see in the picture below, if you used Export Application, you will have more folders. Do not use application folders. Only the Applet folder is necessary.
Now it's time to upload files.
UPLOADING SKETCHES In your internet browser, go to your profile page at OpenProcessing. (You can find this by logging in or by clicking on your portrait.) Click on the link titled 'upload from processing':
First, enter a name:
Then click 'Browse' to locate the ZIP file you made earlier:
Finally, click 'Upload'.
CONFIRMING UPLOAD OpenProcessing will now load your sketch. Please be patient; this can take some time. If it works, click the button to save and display.
(If it doesn't work, you have some debugging to do. This is normal. Try again when you're fixed it.) You will then be taken to a new applet page.
FINAL TOUCHES Scroll down to see the description panel. Your sketch now has an icon, as indicated below:
But the default icon is no good. It says nothing about your sketch. You must change it.
Take a screenshot of your sketch in action, either using the screenshot tutorial or the save function in Processing itself (you will have access to code that can do this quickly). Crop the screenshot as you wish and save it as a JPEG or PNG. Optionally, you may resize it to 100x100, but the website will do this automatically. Click the “Upload Thumbnail” button, or on the icon itself, and you will get a dialogue to upload your new thumbnail. Do this now.
And that's it – your sketch is online and ready to be viewed.
ADDING SKETCHES TO THE CLASSROOM Your sketches will be collected in a part of the website called a classroom. To go there, click on the Classrooms link at the top of the page, then scroll down and select our class (Creative Coding DSDN142 @ Victoria University of Wellington):
Here's the classroom. Click on “Select a Sketch”.
You can now select one of your sketches to upload. Do so (do not click the thumbnail of the sketch, as this will take you back to the sketch page itself).
SORTING SKETCHES Your sketch arrives in the classroom unsorted. You must place it in the correct category. Your sketches (and only your sketches) have a handle at the lower right. Drag this handle to place the sketch in the correct category.
In this example the file went into the tutor area. You will be submitting to different categories. You have free access to these categories, so be careful. Don't put your file in the wrong place, or we might miss it! Please double check that your file is in the correct category. And that's it – you're done.