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.

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.

‘Dissatisfied with service delivery’

What do protestors say during South African ‘service delivery’ protests? Burning tires and violent actions make the news, but protesters’ perspectives are seldom heard in the media.  After the crowd has dispersed, what happens to the protesters and their demands? Unlike in other countries, where social media can be used to mobilise and bring issues to the attention of a wider public, in South Africa, social media are expensive and inaccessible to many. Police records describe the protests as ‘crowd control incidents’, they note whether the crowd was peaceful and lump a wide range of issues, grievances and campaigns together, categorising them as ‘Dissatisfied with service delivery’.

Police crowd control data - Map of protests in South Africa 01/01/2009-30/11/2012
Police crowd control data – Map of protests in South Africa 01/01/2009-30/11/2012

This visualisation project uses police data to represent the number of service delivery protest incidents in South Africa, during 2009-2012.

This visualisation shows how many protests are recorded in the police crowd control data for the period 01/01/2009-30/11/2012, The red circles indicate which areas have experienced more protests than others. We’ve also included links so that you can check Google to see which incidents received attention from South Africa’s media.

The project is work in progress by Marion Walton and UCT’s Interactive Media class. The class is taking their first steps in data journalism, and are learning about JSON data and the Google Maps API. We are currently cleaning the data and exploring visual techniques to show the frequency of protests and the nature and distribution of media coverage.

Code  adapted from Gabriel Svennerberg.