Mobile Code and The Department of Sharing

11059656_1812231805668907_6806948237917240861_o

The web initially took off thanks to the DIY efforts of many millions of self-taught web developers. Many people (including myself!) learned to build websites thanks to the ability to ‘view source’ in browsers. We learned by studying (and cutting and pasting) the HTML source code of the websites we admired.

The same openness and learnability is not there for mobile apps – unless their source code is released, that is. Even then very few users know how to go to look for it. My project Creative Code is inspired by a sense that we should also be able to “View Source”, tinker with and customise our mobile apps, thus driving interest in and knowledge of mobile coding on the most accessible platforms available. Through the series of customisable open source youth culture apps that we are building and testing for Creative Code we want to spark a DIY ‘appmaker’ DIY spirit among young people. While there are many comprehensive online resources available for this, they are somewhat inaccessible to the majority. Young people are fascinated by technology but they have shockingly limited opportunities to learn to code on computers – fewer than 1% of South African Grade 12s have the opportunity to study Information Technology at school level. After-school programmes like Creative Code are limited by young people’s very restricted access to computers. While people in urban areas generally have a level of internet access via mobile phones, they certainly do not want to spend all their airtime downloading Khan academy videos. Furthermore the web-based live-coding environments do not work on mobile browsers.

Until recently mobile coding seemed pretty far away – apart from some simple tutorials and visual tools teaching very young children the principles of programming. Recently this has changed with Mozilla’s Appmaker and Microsoft Research’s TouchDevelop, which, like APDE, allows on-device coding. We have elected to use APDE because it allows on-device coding in Processing, my favourite language (Java-based but designed around the needs of artists and other interesting people) and moreover it’s a mobile IDE which is not cloud-based. This may seem somewhat old-fashioned but it does means it can be used under our usual circumstances of limited or intermittent connectivity.

After four months of preparation, Creative Code is all set now to launch mobile coding lessons that can easily be edited and adapted on Android phones. We will try out these lessons during a series of three workshops that centre around developing animated, playable stories,  made with our new app, The Department of Sharing.

The idea of making interactive, sharable stories was inspired by discussions I had with two young writers, Anathi Nyadu and Vhuthu Muavha. I met them in January 2015 at a networking meeting for South African organisations working in the mobile literacies space (hosted by the Goethe-Institut Johannesburg). Anathi and Vhuthu were as engaged by games and instant messaging as they were by reading stories on their phones. They were at the meeting because their love of reading had led them to write their own stories, and publish them through the Fundza Fanz programme.

A global movement to develop mobile reading has taken off since the m4Lit project launched in South Africa in 2009. See, for example, the recent UNESCO study Reading in the Mobile Era surveyed users of Worldreader/Binu and presented new quantitative data around the prevalance and implications of reading on mobile devices in developing countries.

As a result, a wide range of organisations provide reading materials designed to be read on cellphones.

Anathi and Vhuthu brainstormed with me about how text-based mobile stories would be more attractive if they could be given more gamelike features such as interactions, branching and animations. This was where I first developed the idea for the Department of Sharing. It is a Processing app for making and sharing animated, playable stories.

Collocated sharing or ‘side-loading’ (copying stories to a friend’s phone via Bluetooth or cable) is a very important feature of the app. For example, when we were doing the research for m4Lit,  readers complained that they could not download mobile stories to read them later and share them with their friends. Similarly Daily Sun users post their phone numbers so that other readers can send them the videos published by the Daily Sun on Youtube via Whatsapp. (This way they keep their own copy on their phone and can watch it and share it without using their airtime). The Department of Sharing creates cc licensed stories which belong to anyone who might be interested in reading them and which promote creative commons licenses.

Department of Sharing runs in the Processing mobile IDE, APDE, which allows on-phone editing and vastly simplifies the process of exporting from .pde to .apk files  (a Herculean task  for beginners). The first sharable story was completed using artwork and a game story from Khazatown Blues, a Mario mod designed in 2014 by five Grade 12 students.

11076784_1812240552334699_4554294069612566405_o
Khazatown Blues was based on a Mario mod created by Talita Maliti, Ndilisa May, Vuyani Vorslag, Ludwe Zigwebile and Lwazi Fanana.

When published on Android phones, Department of Sharing stories are playable with written stories and simple interactive visuals. Since Android is popular but still not ubiquitous, it is really important to be able to give stories to people who are using simple feature phones rather than smartphones (running Android, Windows or iOS).  For this reason, stories created by the Department of Sharing can be exported in more basic formats – e.g. images or gif animations, such as the one below.

Created by the Department of Sharing
Created by the Department of Sharing. Visuals and story from Khazatown Blues by Talita Maliti, Ndilisa May, Vuyani Vorslag, Ludwe Zigwebile and Lwazi Fanana

The idea here is simple – there are plenty of cloud-based mobile reading libraries, including Yoza, Fundza, Worldreader, and the African Storybook Project. Yet it is surprisingly difficult for people to create their own mobile stories and share them with those around them without needing to use their airtime to access a website or join a cloud-based service such as Facebook or Binu.

11079372_1812229069002514_8108175197511084974_o
Here’s Lungile Madela at work configuring our Convergence Lab for the next series of story-making workshops with The Department of Sharing. The Convergence Lab includes a smart TV, a charging trolley and a pair of large cupboards  stocked with smartphones and tablets.

There is still a long journey ahead on the road to mobile coding, but I am very grateful indeed to UCT Strategic Equipment Fund and the Shuttleworth Foundation – without their support these big steps towards a mobile coding curriculum wouldn’t have been possible.

Creative Code

10402794_1604689329756490_5169906130444456826_n

Want to support the development of young creative coders in South Africa? You can make a donation via our crowdfunding campaign on Thundafund.

Creative Code is a prize-winning World Design Capital 2014 recognised project. Winner of a WDC2014  “Best Pitch” award (27 May 2014), Creative Code introduces school kids to computer coding, making coding and visual design more accessible through youth media, gaming and mobile phones. You can see some of our lessons here.

10426654_1611949372363819_6532782048809551458_n (1)
Winning pitch: The Creative Code team at a World Design Capital 2014 pitching session

A low-cost media literacy coding curriculum is presented through weekly lessons and longer workshops during summer and winter vacations.

1969207_1604772593081497_8104461804831843069_n
Khazatown Blues: A localised version of Super Mario

Projects  emphasize youth culture (mobile photography, pixelart games) and local visual languages and media  (beading, patterns and fabric design) to engage students with the logical and procedural dimension of visual design.

In contrast to the ‘black box’ approach of most digital literacy curricula, Creative Code emphasises tangible programming, embodied learning, web-making, visual design, FOSS development processes, and game design and development.

Our goals

Code craft

A central goal is to engage young people in meaningful creative digital design projects. Over the past eighteen months, the Ikamva Coders have produced several   original games and many visual designs. These experiences and learning processes  have been documented with the aim of producing curricula, learning materials,   and research into the representational and conceptual processes at work as   young people learn about coding and digital design.

10367581_1604771423081614_6908181342588480456_n

Logo for Khazatown Blues – a game developed by Grade 12 students from Creative Code.

Careers and further study

We also encourage and assist the coders in applying to courses of study involving digital media and Computer Science.  The Coders learn about various opportunities that are open to them – not only Computer   Science (where Maths can be a big barrier) but also the many creative career   paths which today require digital skills or coding.

10155885_1604760769749346_3500415213117074286_n

We mobilise code

Our key long-term aim, is to make our coding lessons accessible to young people via low-cost mobile phones and tablets, and to use our research to improve the accessibility of such introductory materials. Right now we’re experimenting with our own tablet apps, and with the great resources available for mobile coding from TouchDevelop.

10349948_1611939455698144_7711053691624311849_n (1)

Why coding lessons?

Only the most privileged young South Africans have opportunities to study Visual Art or Information Technology at school level. According to the Department of Basic Education, in 2013, only 4 874 of SA’s 562 112 Grade 12s studied Information Technology and only 6 755 studied Visual Art for the National Senior Certificate. This means that only around 1% of matriculants are getting a foundation in the subjects which would help lead them to careers in Digital Media or Computer Science.

Who are we?

Creative Code is run in partnership between the Centre for Film and Media Studies from the University  of Cape Town, and Ikamva Youth, a multi award-winning youth development  non-profit organization. Ikamva Youth relies on volunteer tutors and equips learners from disadvantaged communities with the knowledge, skills, networks and resources to access  tertiary education and/or employment opportunities once they matriculate.

We often work collaboratively with staff and postgraduate students from Computer Science and UCT’s Centre in ICT for Development.

10359412_1611932425698847_1743519451636904354_n
Bhavana Harrilal from the Centre in ICT4D and Paul Mesarcik from Thingking

The Ikamva Coders are twenty eight members of Ikamva Youth, ages fifteen to eighteen. They   participate in a volunteer-run after-school programme, attending extra-mural   homework and tutoring  sessions and holiday workshops.

Contact Us

Our Facebook page

https://www.facebook.com/creativecodeSA

You can make a donation via our crowdfunding campaign on Thundafund

https://www.thundafund.com/creativecode

We publish our artwork and games on our website

http://ikamvacodes.wordpress.com

More about Ikamva Youth

Ikamva Youth   http://ikamvayouth.org/

More Processing … this time for Kids

mapcoords mapcoords ms_pacman

Mozilla is running a free online collaborative course to explore new ways of teaching digital literacies through making and learning together. It’s called Teach the Web This leads up to the Mozilla #makerparty, which celebrates the web and making, two of my favourite things.

I’ve joined a group who are discussing ‘Creative Coding with Canvas’ and so am hoping to get some new ideas and tips about how to teach coding-shy design students and newbies about the HTML Canvas element. As my contribution to this group, I thought I’d share an introductory programming course that I’ve been running with a group of teens at the Ikamva Youth branch in Makhaza, Cape Town.  They call themselves the Ikamvacoders – what an inspiring group of young people.

Hard-working Ikamvacoders take a break
Hard-working Ikamvacoders take a break

The course introduces some basic programming topics using Processing and Processing.js, a language designed for visual expression. Processing is based in Java, but now makes it easy to export procedural art, interactive sketches, simple games and animations to Javascript, via processing.js, which uses  the HTML5 canvas element. Processing now also provides a very effective and easy Android mode.

Learning Processing from Pacman

Processing comes with absolutely beautiful tutorials, clearly explained examples and extensive online resources. In my experience, although these resources are aimed at non-programmers, they are generally pitched a bit high for absolute beginners, particularly for kids. The Ikamvacoders asked whether they could learn how to build a simple 2D game. This led me to develop some absolute beginner Processing tutorials around a Pacman theme.

As you’ll see the tutorials are still quite sketchy, and I hope to have some time to put in some extra explanatory details which I handle verbally in my classes. But the examples all work and they should provide a good starting point for anyone who wants to take this visual approach to teaching programming.

The Ikamvacoders also want to make web portfolios and I’m looking forward to introducing them to some of the new Mozilla tools, so that they can start publishing their own work using tools such as Thimble and Popcorn Maker, which look perfect for kids and teens working at this introductory level.

Future goals – mobile Processing

I’m extremely impressed with how the Ikamvacoders have taken to  Processing, but its frustrating that they have so little access to computers, so little time to practice their skills. Overall my objective is to investigate mobile interfaces to developing Processing sketches. These need to work on the phones even when they are out of airtime (this happens a lot of the time). This kind of app will allow them to tinker and mess around more,  even when they’re not at the computer.

If I have time, I’ll also post about a similar course I run with media students at the University of Cape Town, where the focus is on webmaking for journalists.

Programming with Processing – CFMS course

I convene a Production Programme in Interactive Media at the Centre for Film and Media Studies at the University of Cape Town. The second semester of the course centres around an Introduction to Programming unit. This is definitely the most difficult part of the programme for the students, as it is where the course shifts from a design course to one which emphasizes the need for students to grapple more seriously with the development, systems and coding of online media.

When I started teaching this course, I taught ActionScript. This was easy for students in certain ways, but I never felt it really produced the kind of technical learning that I aimed to facilitate. Apart from the cost of the software, the fact that Flash was a closed proprietary system did not assist the students with learning from other programmers’ code. The visual interface also meant many code-shy students were able to avoid really engaging with scripting, and the distributed code could be extremely confusing. Finally, the programme is built for industry workflows, and thus also assumes that the user is a skilled scripter who is familiar with concepts such as object orientation. Last year, with the assistance of Lyndon Daniels, who put together some open content learning materials I ditched Flash and shifted the curriculum to the Processing language.

Robot mini game by Paige Aupiais
Robot mini game by Paige Aupiais

This alien game by Paige Aupiais is an example of the kind of mini game which students are able to develop after four weeks (16 hours) of classes in Processing. While it is not a playable game just yet, it does show how Processing makes it possible to master basic concepts such as variables and operators, functions, controlling program flow with loops and conditional statements, and even objects and classes  (You’ll need to have Java installed on your machine if you want to try out Paige’s game.)

So where did this wonderful little language and ecosystem originate?  Processing is a language that was developed by Ben Fry and Casy Reas, initially as part of an award-winning project intended to introduce programming to visually trained artists and designers.

Processing works as a kind of wrapper for the Java language  which simplifies students’ first experience of programming and also makes it (relatively) easy to program visual output. This makes it an excellent introduction to programming for artists and designers since it immediately gives complete novices the ability to generate graphical effects and interactions. (In Processing, Hello World is a one-line sketch which draws a shape such as a line, ellipse, or rectangle.) Unlike other beginner environments though, when the training wheels are ready to come off, students have access to the massive resource of libraries developed for the Java language, such as for example the OpenGL libraries, and to the physical computing possible with the Arduino micro-processor.

Another key advantage is the active and helpful community centred around the processing.org site, the detailed reference materials, demos, and downloads. This community is particularly helpful to beginner programmers because many other users are novices who are likely to be asking beginner questions.

Basic programming concepts do not change very much between languages and so the course provides a foundation of ‘procedural literacy’ for keen students who want to launch into an exploration of other languages or of scripting in object-oriented languages.

The Return of Pacman by Robin Combrink
The Return of Pacman by Robin Combrink

That said, Processing has several disadvantages in comparison to Adobe’s Flash, another environment where non-technical beginners often first dip their toes in the water as scripters. The absence of a visual interface or timeline for Processing means it is more suitable for producing procedural images than for conventional drawing or animation workflows. Another is the disappointments and difficulties associated with publishing Processing sketches. The need for a Java plugin (less common than the Flash player), the slow loading times and relatively processor-intensive Java applets are all additional hurdles for beginners and their users.

Here the Processing.js project (a sister project to Processing.org) is a response to the widespread support for Javascript by most browsers. Processing.js conforms to web standards, and is immediately viewable in modern browsers without the need to install any plugins. The example above is a mini game created by my son Robin (twelve). He has recently taken an interest in programming (mostly by looking over my shoulder as I prepare for class) and wrote this little game. I published it for him as a Processing.js sketch, using the HTML5 canvas element.

Source code: here

Built with Processing