Sunday, December 26, 2010

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.
 



 

Saturday, December 18, 2010

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.
 
 

 

Sunday, December 12, 2010

Early Project Ideas




Currently I am working on
  • a schedule for the development of the course content
  • researching the course content
  • the project-ware (such as this wave) that will keep all project members informed of my progress and able to comment on the development of the course content

Klipfontein Project Discussion


The Klipfontein project was a successful experimental project that Marion and I undertook with the students from the FAM Designing Interactions Course in 2007/8, I have emailed a previous student Debbie Turner to ask her if she is willing to submit her project as an example, and inspiration for the new students. The Klipfontein project gave the students the opportunity to create an interactive digital narrative about the history of the Klipfontein Road in Cape Town. This project was completed by groups of approximately 2 or 3 students in Flash.
For the 2011 Introduction to Programming module I'm considering (as per Marion's suggestion) the possibility of making a variant of the Klipfontein Project the main project.
My reasons for considering this project are

  • the ability to incorporate researching data and data mining as a part of the project, this plays a vital role in data visualization
  • the intention of instilling a sense of accomplishment for the students, in seeing their data evolve into something meaningful particularly regarding presenting their projects to the UCT oral history project as was the case with the 2008 students.
  • This would mean the approach to the course is somewhat different than that of previous years, as Brad would need to incorporate pre-programmatic data collection and management into his lectures. I will also include a section on data collection in the notes that Brad will be able to use as a base for his lectures. Visualizing Data by Ben Fry has proven to be a valuable resource for this research.
  • Students will need to understand the key concepts that make a data visualization project successful, and be guided by Brad in data acquisition, data parsing (organizing), filtering and representation. Brad we will need to discuss how you feel about this, and any ideas you have for a main project? 

Previous Documentation Examples and Current Documentation Relationships

To give you an indication of what the documentation I am aiming to create will be like,
This is a link to a very specific tutorial I created for embedding a movie in flash and creating a custom movie player interface in AS2

 
http://www.lyndondaniels.com/2010/learn/flash/FlashEmbedTut.html
 


The following link is a more extensive approach to documentation on a course I developed in 2008/9 called "Programming Primer"
http://www.lyndondaniels.com/2010/learn/prog/prog07.html
 

Please note the example at the end of the above listed page which gives students a short exercise, that requires that they apply the concepts taught in class in order to complete recreating the exercise themselves.
 

With the 2011 documentation I aim to achieve a balance between these two formats, offering a comprehensive technical guide to programmatic concepts and exercises that test their understandings of these concepts and require the students apply these understandings in order to complete the exercises.
Brad since you will be overseeing these exercises, and based on your industry experience I'd like to have your feedback on what you think will be most useful for students here.
Your input here would be most sincerely appreciated :)
 

Finally, Another part of the curriculum will involve a questionnaire that will test the students' knowledge as each main section of the course is completed. This Questionnaire will consist of approximately 10 Questions that are to be completed in half an hour (or less) during class time. Assistance from other students, lecturers, course-ware or the Internet should not be permitted during the Quiz.
The idea is that students will be given a sheet of paper with the questions printed on the paper, students then write their answers to the questions on the paper and hand it back to Brad.
Brad has already confirmed that he will be willing to mark the quiz.

Proposed Meeting for Thursday 16th Dec 2010

Brad and Lyndon
Topic: Main Project Suggestions and Course Structure

As I will be passing through Durban on Thursday 16th Dec, would it be possible for us to meet to discuss the main project and course structure. Unfortunately I cannot commit to a specific time right now due to certain other complications, but it will be in the latter part of the day somewhere between 14h00 to 16h00. I would hope for the meeting to take up not more than an hour.
Brad, please let me know if you are available?
I'll post a summary of the meeting (if it happens) on this blog so that Marion can engage in the discussion and take it further, where necessary.