Week 1 is all about gaining motivation and finding a good process for experiencing processing. As we saw in class, there are some environment components that are necessary in order to use Processing with JavaScript. I ended up bundling those components together for you as an archive and providing a link to the archive on the syllabus. Please make sure you are comfortable using that bundle on any computer you want to experience Processing development upon. Once you get your first example working on a computing platform (with a browser since JavaScript requires a browser in this context), you can start swapping out the code in the primitives.html files with an example from the Processing examples page.

Each example is intended to demonstrate features of the Processing language. we focused on three basic examples to get our rhythm going for the next six weeks together. Please download the week one archive as it includes all the final code for the three examples we reviewed together. I'll remind you of some of what we discussed last night here:

In regards to primitives.html, you can see how we used an HTML STYLE element to provide CSS directives to our Processing canvas

		<style>
		canvas {
			position:absolute;
			top:200px;
			left:300px;
		}
		</style>

That CSS code gives us the freedom to move the Processing canvas wherever we want it on the web page (in this case, 200 pixels from the top and 300 pixels from the left of the top-left corner of the browser body). We learned the stroke lets us create a one-pixel colored border around the perimeter of a primitive shape (note all the available primitives and the attributes you can define to uniquely create your primitive shape). We did not mention the PI and TWO_PI attributes of the arc() function. Those define a starting angle and ending angle for the circular arc perimeter of the shape.

Unlike using Processing with some other languages, using Processing with JavaScript requires that the web page have a canvas defined in HTML for the Processing script to use to draw upon. The HTML canvas element looks like:

<canvas width="640" height="640"></canvas>

and you will see it within any web page that is going to use JavaScript syntax for Processing commands.

In regards to lines.html, we focused on how attribute values for a primitive (in this case the most basic of primitives, points and lines) can be generated mathematically (or as a broader concept, procedurally) either as predefined variables (like the integer d) or as mathematical statements in the use of the function directly (like where p1+d is used in creating the first line). We also learned how to use the translate() function to change the coordinate space for Processing commands that follow it in sequence. In regards to curve.html, we just started exploring curves through the curve() and bezier() functions. Curves are a great example of how Processing provides great flexibility in drawing primitives procedurally. We had to check the API notes to see which method the curve() function uses to define a curve.

The Processing API Reference will be our definitive reference for tracking our progress in learning the available functions Processing offers for our visual constructs. I suggested you spend this week exploring both the examples and the API to get yourself motivated and technologically framed for what we'll be considering going forward in class. I also asked you to make sure you could take an example we did not cover in class and implement it on your personal class work environment. We'll see how you did with that soon.