Week 7: Web programming using free cross-platform application

80 minutes: Introduction to Processing: Geometric primitives (ellipse, rect, line, triangle), basic interactive functions (mousePressed, keyPressed), etc. Link to download software: http://processing.org/download/.

>Screen some art made in Processing/Java before starting tutorial

Instructor selects: http://www.processing.org/exhibition/index.html

Recommend: Golan Levin’s The Dumpster, a data-visualization of romantic breakups online: http://artport.whitney.org/commissions/thedumpster/

Recommend: John Simon’s online works: http://www.numeral.com/appletsoftware/online.html

PROCESSING: INTRODUCTION TO COMPUTER PROGRAMMING FOR ARTISTS TUTORIAL

WARMUP: Instructor will hand out blank paper.  Draw a square that has a dimension of
roughly 600 x 600 pixels, or 6×6”.  Create a composition within the square that has 4 rectangles
and two circles. (5 minutes).  You are going to translate this drawing into an electronic drawing.

BASIC SYNTAX	BASIC PRIMITIVES	COLOR AND STROKE
//title your drawing void setup(){ //set up the window for drawing size(200,200); //size of window background(0); //black bkground } void draw(){ //put your shapes to draw here }	//ellipse ellipse(x, y, width, height); //rectangle rect(x, y, width, height); //line line(x1,	fill(value1, value2, value3); //uses RGB color model or fill(value1); //uses a grayscale range stroke(value1, value2, value3) //uses RGB color model

IN-CLASS PROBLEM 1: Make an electronic version of the drawing you created in the
warm-up activity.  Your instructor will explain how coordinates work in Processing.

IN-CLASS PROBLEM 2: Create a drawing with 4 lines with window at size(400,400).  Each
line starts in one of the four corners of the applet window.  Each line ends wherever the mouse
would be.  Use mouseX and mouseY to store mouse coordinates.  (try using noLoop() in the
setup block with this).

ADDITIONAL DEMOS

Your instructor will demonstrate basic usage of the following time permitting:

FUNCTIONS FOR USER INPUT— mousePressed()

VARIABLES + RANDOM— float c;
c = random(0,255);
//gives you a random number between 0 and 255

NUMBERS VARIABLES FOR MOUSE POSITION

mouseX  //x position

mouseY  //y position

EXPORTING YOUR APPLET TO THE WEB

File>Export (window opens with an
html page already made for you with the accompanying jar or JAVA files. Drag and drop the
html file to an open browser window to see your applet in action.

RESOURCES: http://processing.org/reference/ and  http://www.processing.org/learning/

HOMEWORK/Sketch 7: Applet #1 (you make an interactive piece using Processing; it could function
as a button or as an interactive image on your website)

>Reading
Introduction to Processing: http://processing.org/learning/gettingstarted/
Sample code to browse and try: http://www.processing.org/learning/basics/index.html