Announcing www.processing.lyndondaniels.com

www.processing.lyndondaniels.com

After many months of hard work and anticipation I can finally announce the launch of www.processing.lyndondaniels.com

This website is the most up-to-date online repository for the products of the project outlined in this blog, that being a comprehensive 6 week course on an introduction to programming with Processing.

Within this repository you'll find 3 options for accessing the course content free of charge at both a student and educator level.

The course content includes a guide to creating interactive sketches using Processing but the fundamental concepts can be applied within many different higher level programming languages.

You'll also find examples and accompanying documentation that range in skill from simple Hello World programs to fully developed data visualizations that use Object Oriented Programming and read from external data sources.

So if you are interested in learning how to create online interactive media for your website, teach a course in higher level programming languages or wondering what all the hype surrounding Processing is about check out 

www.processing.lyndondaniels.com

Have fun making interactive art!

Lyndon Daniels

Documentation, Website Downloads and Time Schedule Update

Documentation Update

The second part of "An Introduction to Programming with Processing" has just been published in formatted version and is available for download at
http://www.lyndondaniels.com/programmingintro/
This version includes
• A revised license
• various data types,
• variables,
• mathematical operators,
• operator precedence,
• randomization,
• flow of control,
• conditionals,
• comparison operators,
• and compound conditionals.
As per course outline

The first part of the documentation has also been updated to include the new license and minor amendments such as spelling errors that have been identified have also been corrected. Also availabe at
http://www.lyndondaniels.com/programmingintro/

The Unformatted full second version has also been uploaded to my website and can be downloaded at the same location. 02 Unformatted Documentation 02
Please note that this is the completed unformatted version and includes

• more on conditionals, comparison operators and compound conditionals
• arrays,
• loops,
• user defined functions.
The section on transforms as noted in the course outline will complete the third documentation installment.

The fourth documentation installment will cover the remaining course content.

Time Schedule Update

The initial documentation delivery time schedule, due to circumstances beyond my control is currently being revised. My priority remains to deliver the documentation to the students within an acceptable and reasonable time-frame, this means that they must have the documentation specific to the content they are addressing in class, available before the commencement of the lectures specific to that content. As a result the documentation has been divided up into the sections listed above in "Documentation Update".
Unfortunately, this change in schedule is unavoidable but I am open to suggestions on improving it, particularly where it might effect any course content development and delivery.


The revised schedule currently will follow the suggested model below for the latest delivery date of formatted documentation and related exercises, but documentation and exercises may be released sooner in the event of a request (when possible):

27 Feb Documentation Part II
(see above)

6 March Documentation Part III
• branching examples
• arrays,
• loops,
• user defined functions.
• transforms
(see course outline for full descriptions)

13 March Documentation Part IV
• Working with external data
• object oriented programming
• delivery, distribution, user requirements and security implications.
(see course outline for full descriptions)


20 March Documentation Composite and Finalization
• Reserved for posting a composite of all documents. Any required updates to the documentation that might have been identified since it's initial publication dates, this will include finalization of page numbers, spelling corrections, and other minor amendments.



I feel this is the most logical method for releasing the documentation to the students as it focuses on the topic they are currently addressing in class. As all prior documentation will remain available, they are still able to revise older sections.
 
Comments and suggestions for improvements are welcome.

Website Downloads
 
All the updates relating to this post can be downloaded at
http://www.lyndondaniels.com/programmingintro/ 
identified by the date stamp (Latest 27/02/11)

Vula Resources also reflects these changes.

Main Exercises 1 and 2

Overview

The fist two exercises have been completed, including the procedural based interface and the guess my number game. Which only leaves one project example to be completed that being the social commentary visualisation. 

Online Design and Layout Program

please see the course outline for a description of this project.

 







This is the general idea of what I'd like the students projects to follow. With a strong emphasis on personalising and creating a customised interface. Please remember that this is intentionally a static sketch.

Guess My Number Game

Please see the course outline for a detailed brief.

This project worked out really well as I was able to incorporate all the elements of program design i was hoping to incorporate in this project in a useful and meaningful way incl. loops, conditionals, arrays, simple objects, various data types amongst other features.

Both sketches are completed but in need of better commenting, which I will address at a later stage.  I feel it necessary that these examples are uploaded now as they will give all participants a better idea of what i had in mind when writing out the course outline.


Sketches downloadable in .zip (retain directory structure).
http://www.lyndondaniels.com/programmingintro/

**Edit**
Make that the first two main programs and the class project "Hello World 1.2" program.
All available from above link.

Course Overview, Documentation and Time Frames

Course Overview

I have completed a first draft of a course overview. It is available for you comments and suggestions.
As blogger does not allow attachments it can be downloaded from my domain along with the rest of the files that follow
Lyndon Daniels Introduction To Programming with Processing

My main concern with the course outline is how applicable the main project currently is.
As you will see the class projects have been condensed into 3 projects. The third project which i refer to as "social commentary visualization" can be extended into a main project, if the Klipfontein project is to fall away.
Currently the course outline is designed so that the students have 3 Class projects and 1 main Project which is the Klipfontein Project.
Marion if I wanted to change this structure, would that be possible without causing too much of a problem on your side?
Currently either option is viable in terms of the documentation ie current option 3 class projects and 1 main project or option 2 which would be to have 3 larger scale class projects (as they have been identified in the course outline).
Your comments on this topic would be greatly appreciated.

Documentation

I am currently about just over a third complete with the documentation and have provided two versions for you to have a look at also at the same website address.

Lyndon Daniels Introduction To Programming with Processing 

The Formatted version has been edited to technical manual specifications and gives you an idea of how the documentation is going to be layed-out. Images have not been included in this version yet, if you would like to have an idea of what the images will look like please see the unformatted version, images currently without tags. The cover image still needs some work, but is about 80% complete.

The Un-Formatted version has not been edited past page 15 Software Development. I would prefer it if you directed any comments or questions you may have at the pages preceding this section.

Time Frames

Regrading the completion of the documentation. As the documentation has developed into something somewhat more comprehensive than I'd originally anticipated I am aiming to have it completed by the end of Feb 2011. How this will work in terms of the lectures is that I will have the documentation covering the first two weeks completed much sooner, in fact I am currently about 90% complete with the unformatted version of this section. As soon as this is done I will make it available for Brad, and Brad can distribute it upon commencement of the course. In the First week of March the rest of the documentation will follow to complete the entire course guide.

I have already discussed this possibility with Brad, who does not have a problem with this approach.

Marion please could you let me know if you are okay with this, approach?

My current time allocation in percentages of the total time dedicated to this project (for those interested)

Blogging 6%

Cover Image Creation 8 %

Email and Admin 1.25%

Formatting and Editing Documentation 7.25%

Unformatted notes creation, Image creation and Research 68%

Course Preparation 6% 

Research without documentation 3.5%

I should make a visualization of that data... kidding :) 

Sub-Module Projects

After much consideration I have come to the following conclusions on the sub-module projects (these are the smaller projects that students need to complete in order to progress to the next phase of the course, indicating an understanding of the previous phase).

In accordance with Marion's time schedule for the students I've estimated that each student should dedicate approximately 13 hours per week to this course. This is great news for me because I was initially estimating around 12 hours per week and structuring the course around this estimate. So the extra hour is appreciated. Of course I realise that this is a somewhat idealistic means of addressing a time frame for the students, as some students will comply and others might not. Nonetheless, if this can be presented to the students before the commencement of the course, they will know at the very least what is expected of them, taking into consideration their other courses running concurrently.

I would suggest that this time frame is noted as a minimum prerequisite for this course in the Course Outline, and further emphasised prior to the commencement of lectures. Please let me know if there is a problem with me suggesting this time-frame, Marion and Brad.

The sub-module projects

I have decided to structure the sub-module projects into four main encompassing groups.

1. Drawing
2. Interactivity
3. Animation
4. External Data

Drawing

The first submProj is an exercise in drawing to the screen with Processing. You can think of this as a very thorough “hello world” project, as it will not involve data typing, variables or the like. It is simply a command, argument, syntax and programming conceptualisation type project. 

Most of the course in this phase is centred around programming theory, the simple mechanics of programming, conceptual language levels, project planning, philosophical approaches to software (particularly OSS related) and finally an introduction to modern day programming with Processing. Particularly focussing on a procedural based programming approach. I am currently wrapping up this phase of the documentation and hope to have a formatted version of this soon so that Brad can familiarise himself with the documentation timeously and also to leave enough room for improvement.

The Drawing exercise will be to replicate the interface of a website-looking-front-end with code. I think this will be a useful exercise with regards to developing an understanding for the students of how to start designing the interfaces for their Klipfontein projects.

I have also considered the possibilities of

• letting students decide what interface they wish to replicate

• or giving the students a predetermined design and asking them to replicate it with code. Your suggestions and comments on this would be appreciated.

Please vote at the poll on the right.

Interactivity

The interactivity project will be an exercise that is more traditionally programmatic, in the sense that it will emphasise the usage of various data types, expressions, comparisons and the like. It is an old favourite of mine I call the Guess my number game. The purpose of this project is to focus on the programmatic side of the software development but also to balance that with a simple clean and effective interface for the game. After all there are very specific reasons we have chosen to do this course with Processing which is a visually oriented language by design and not a language that is more generic such as Java or C++. Subsequently, how the students visually represent their data is crucial, and should remain emphatic throughout the course.

Animation

The animation sub-module project will address the transformation matrix, push and pop matrix, and an introduction to 3D (keeping the 3D really simple as I do not wish to clutter the course with mathematical constructs unnecessary at this stage, I'll simply introduce some trigonometry and those that are interested can be encouraged to further their studies with additional reading, which I will gladly suggest).

External Data

The final sub-mod proj on eternal data will be the students introduction to object oriented programming. We have so far discussed the RSS feed project, but I am still open to suggestions.

Any comments or suggestions on the sub-module projects are greatly appreciated.

The Documentation Process

I thought that I might post a brief discription to the process of how the documentation that I am working on is being created, so that everybody is familiar with what I am doing.

Step 1 Research

Since this is an introduction to programming using a “higher level” language such as Processing, my research revolves more around a practical approach to understanding most modern day higher level, programming languages.

Amongst the languages I've been cross-referencing in my personal notes for this project other than Processing is Flash ActionScript, Python and C++.

In formatting the documentation for this module I aim to take special care in addressing Processing within the context of these other languages, what I mean by that is,

• for example when naming conventions differ between languages I'll note the alternate names and as each language emphasises and favours a particular concept over another languages approach, which address programming with a different set of utilities. I aim to identify these differences and provide the reader with an outline of why the approaches to dealing with programmatic situations differ even though the outcome might be the same.
• Various publications and online resources have been particularly helpful to me during this phase of research. The results of this research is approximately 50 pages of notes, in keyword form. Which then have to be cross-referenced with the other above mentioned languages. When the methodology differs significantly for doing similar things from one language to the next, I simply have to make a choice as to which method I find to be most sensible within the context of what this documentation aims to convey (ie a sense of understanding higher level languages). 
  

Although the method I choose to emphasise in my documentation might not be the quickest and require the least amount of keystrokes, using programming shortcuts and “tricks” is not what this module is about. Subsequently those that are more serious about programming are encouraged to discover these shortcuts, tricks and special techniques themselves to help develop and further their own skills as a programmer.

Here's a look at what the written notes look like.

 

This page is about creating arrays in Flash, this method differs somewhat substantially from the C++ methodology. In my notes I'll be emphasising the latter in Processing.

 

The second page is an example of syntax differences. Of course in addressing several different languages there are going to be many differences in syntax which subsequently overflow into methodology. What I am attempting to do with my documentation is not to focus on syntax as much as I aim to focus on methodology. The main reason for this being that good, solid programming principles can be applied to any language and adapted to suite any syntax that exists in a language of the same level. Another reason is that learning a language's syntax these days is pretty easy with the advent of the large amounts of free documentation and forums online for each specific higher level language.

 

Finally the third page is an example of an exercise for the reader to complete using the information learned in the preceding documentation. Documentation such as this can only be created once the other research has been completed and cross-referenced, particularly as the exercises must be as generic as possible (in terms of language differences), yet still specific enough for the reader such that one needs an understanding of the most relevant concepts of the preceding documentation in order to complete the exercise.

Step 2 Unformatted Documentation

Once the research has reached a level that I am pleased with, I can continue to create an unformatted version of the documentation. Step 1 does not need to be completed in it's entirety in order for me to start with Step 2 and I will constantly jump back and fourth between these two Steps refining each one until I am finally happy with the product and able to move onto Step 3 creating the formatted version of the documentation.

In the unformatted version of the documentation I basically read through my notes and think of the best way to deliver an understanding of a concept to the reader. I then proceed to type out this thought without editing it. Subsequently one paragraph might seem disjointed and non-contiguous from the next, so a lot of restructuring of the documentation needs to happen at this stage.

Here's an example of what the unformatted version of the documentation might look like

 

As you can see a lot of typing errors and bad punctuation, unpollished illustrations and minimal formatting make up the unformatted version of the documentation. Nonetheless everything that I need for the completed version is pretty much all there. 

Step 3 Completed Documentation

The completed version of the documentation has the correct formatting, that makes sense from one paragraph to the next. The paragraphs will also have an appropriate word count such that a few words are not left trailing behind on an entire page for themselves. The images are completed, and sized accordingly, and code listings are also taken into consideration such that they do not extend over multiple pages (unless the listing is excessive).

Here's an example of completed documentation from a previous project

In this example each code listing (which can also be referred to as a code “snippet”) is enclosed in a table, I'll be using a new format for code listings in my current documentation project which I feel will be easier to read and more visually appealing.

Here's an example of an exercise from a previous project

Once the project is completed the documentation (as with previous projects) will be freely available online with the exercises and distributed under a Creative Commons license.

 



 

Course Overview

Post Meeting Synopsis

The Meeting Brad and I had on Thursday was productive in terms of getting closer to locking down a specific course structure. 
The main topics that were discussed included

1. Current suggestions on courseware and course structure
2. Student exercises
3. Main project

Brief questions for Marion from the meeting

1. Will this module be run in the Mendi Lab?
2. Are the students taking this course 2nd year?
3. Would it be possible for me to get the email address of the lab technician so that I can confirm that Processing is loaded and works on the specified machines?

Course Structure
In order to clarify terms that I will be using in future posts I've included a suggestion for course structure below this paragraph using the first week of the module as an example. All submodules hereafter will follow a similar general structure. Brad and Marion please leave a comment regarding this suggested course structure, if you have any problems with it or any suggestions for improvement as they will be greatly appreciated:

Module : An Introduction to Programming with Processing (approx 5 Weeks)

SubModule: Programming Overview (1 week)

SubModule Project: Recreate the provided illustrated image as closely as possible using only code (Project issued at the beginning of the current module and due in at the commencement of the following module)

Quiz: 10 Question Quiz to be completed in class at the end of the module (30 mins)

Current Suggestions on documentation development

It was determined that the most logical approach to the course would be to have the documentation and lectures follow the same course structure. Please see the end of the post for a more detailed course overview of the first submodule.

Student Exercises

Each submodule has a submodule project that will test the students knowledge of the module as a whole leading to the current module they have just completed. Submodule exercises should not take up more than a few hours of student time outside of the training period. Marion, please could you confirm that students will have at least 1 hour per day (5 hours per week) after training to work on their main project and submodule projects? This time frame would be most suitable regarding the amount of time required for students to complete their projects and not cut into lecture-time. Unfortunately, any amount of time less than this would require course restructuring, which is still possible at this early stage but will need to be determined as soon as possible.

RSS Feed Visualization SubModule Project
Brad made an excellent suggestion for a more advanced submodule project that can possibly be issued during the Object Oriented Programming submodule in week six.


Currently this project has been referred to as "RSS Feed Visualization SubModule Project". The submodule project will incorporate getting the students to create a visualization of reatime data from an online server such as lastfm. Brad has already started work on his own visualization in Processing and has confirmed that he will be willing to share his example with me for the purpose of the course and documentation. Brad, please could you send me a copy of the pde and any additional information that might be of use to me regarding possibly using this as a submodule exercise. If you have any links explaining the techniques used they would be most useful, even if they are in other programming languages they could still be useful.
I find Brad's RSS Feed Viz Project to be an appealing idea as this will give the students a hands on experience regarding working with external data from a live source. The project can also be adapted to something useful for the students themselves as each submodule project with require that each student mines and filters their own data resulting in each RSS feed Viz project being unique. Ideally this is something that can be developed into a useful portfolio piece if the student chose to take the idea further.
Please also note that each student is given an allocated amount of data at the start of each month in terms of internet usage at UCT. As they will only require access to an XML file which will be the live component, this project and any other project that is a part of this module cannot require that the students request large amounts of live data.
Thank you, Brad most sincerely for your suggestion. I look forward to investigating the possibility of incorporating it as a submodule project.

Main Project

Currently our (Marion, Brad and Lyndon) discussions relating to the main project are.

• The Klipfontein project still seems the most viable and logical choice for a main project. Such a project would encompass all aspects of the module as a whole.  

Current Submodule Structure

Please note that not all submodules will follow the same structure listed below. This outline is simply to give you an indication of what I would like to include in the documentation for the first submodule. Please let me know as soon as possible if you are unclear about or would like to discuss further items listed below.

Introduction to Programming with Processing

Programming Overview (suggested time frame 1 week, approximately 4-5 hours of training, minimum required student time approximately 7-9 hours including submodule project)

The Hardware Software Cycle

Computer Architectures 64 bit processors and 32 bit processors etc

How does hardware work, electricity and binary

What is software?

What is a program, a statement, a command and how does this define source code?

Interacting with computers

Operating systems

Applications

Open Source vs Proprietary Software

Philosophy

Licences, CC GPL

Lower Level Languages

System Compatibility

Lower Level interactions

Computer Readable vs Human Readable Languages (the need for Higher Level Languages)

Procedural Programming (tailoring the data to the program)

Higher Level Languages

Compiled languages

System independence (operating systems, the Internet)

Abstraction

Speed issues compromises, how this is changing (dynamic runtime optimization)

Object Oriented Programming (tailoring the program to the data)

Software Development

What is software development?

What role does programming play in software development?

What is required to create a software program's source code?

IDE: Libraries, Symbolic links, Source code → Binary → Executable

Compiler: Conversion of code to a system specific code format

Run-Time environments: A means of end users interfacing with code, abstraction layers, code portability

Introduction to Processing

Brief history

Prototyping

Java

Web, Javascript, cross platform compatibility

processing.org forum and discourse

Downloading, installing and running processing (as most students would have never used an IDE)

PDE

Sketches

.pde

sketches folder

Basic mode (procedural programming)

Run

Compilation

Export

distribution

JRE

“hello world”, “hello line”, “hello mouse”

Definitions used in documentation

Planning a project

Pseudo Code

Refine Code

Visualize Code

Stepwise Code refinement Identify a task and break it down into steps, start identifying code logic within each step

Coded image

An introduction to processing drawing commands. The purpose of this sub-module is to teach students how to draw with code by using Processing's drawing tools but at the same time bearing in mind that there are key differences between drawing tools of a vector based application such as illustrator, flash etc in comparison to creating an image with code. The basic idea is to convey a sense of understanding that you define a program's logic. A square, circle or a line can clearly be distinguished for humans but are really no different to a machine as they are simply just different arrangements of pixels. The idea is to separate the students logic from the automation that comes from dealing with higher level applications like a vector illustration package and to deconstruct the “intelligence” of software, by assisting the students in realizing that level of automation that occurs in dealing with such higher level applications and how that needs to be programmed into software.

The main project for this submodule will be for the students to create a sketch in Processing where they use Processing's command based 2D primitive drawing tools to recreate an image as close as possible to the original image.

This project is listed as first because it will provide a basic introduction to code, with a visual representation of their code apon completion of their projects, I feel is more rewarding than creating a “hello world program” (A hello world section is however included in one of the lectures). Secondly this project will be done in Processing's basic mode and will result in a static sketch. This will give the students an understanding of procedural programming. Subsequently no mention of functions, methods or objects is necessary at this level (although would not hurt if they did have a basic introduction to some of these concepts), nonetheless these concepts need only be addressed at a later stage during the course, keeping things simple at this early stage.

Concepts that will be addressed within this submodule include

The processing run-time environment

The Cartesian graph system

Display window and pixels as a unit of measurement

basic mode sketches and the term static sketches, procedural programming

commands and parameters

syntax:: parenthesis, semicolons, commas (Applicable only to this submodule not math-based)

commands → statements → program

color, hex values, rgb values and alpha

size()

background()

line()

ellipse()

rect()

triangle()

point()

arc()

fill()

stroke()

noStroke()

noFill()

text()

width()

height()

Attributes

ellipseMode()

rectMode()

smooth()

Standardized coding practices

comments

whitespace

Errors and Exceptions

Syntax errors

Logical errors

Each submodule should be approximately 1 week at 6 hours of training per week. The students will be be assigned a submodule project at the end (or close to the end) of each submodule. Submodule projects will be structured so that one project complements the next where ever possible. This is a basic suggestion of the first submodule and is currently open for discussion before commencement of the documentation creation for this submodule, as I am currently working on the basic structure of the other submodules.