Semicolon - Creative Project Proposal
Lucio Cuddeford, Joshua Akinsola, Nikolay Nikolov & Nicholas Camero
Project Description
The aim for this project will be to create a web-based mobile code editor/IDE1 for
Processing2 that adapts to the capabilities of mobile devices and is
friendly to people new to programming and Processing. Ideally, it
will be a popular learning tool for newcomers as well as a
productive playground to more experienced coders. On the surface
it would be a mobile-friendly code editor making use of touch
gestures for faster code generation and manipulation (for example
generating common code - for loops, if statements, drawing
functions, dragging numbers with fingers, tapping to show meaning
of cryptic parameters and others) but underneath it would provide
useful explanation of simple programming, graphical and
Processing concepts that would onboard inexperienced users
helping them grasp the basics easily and pushing them into
experimenting. Which is more ore less one of the core values of the
Processing language and community, so in that sense our IDE and Fig.1 Explanation of shapes
the language are a close to perfect fit. Additionally, we would provide plenty of simple examples that users can learn from, copy,
mix and match. The web nature of our app will mean we can render Processing code as
fast as we show the actual code, so unlike the Processing desktop IDE where you look at
examples in a text/hierarchical view (and takes an annoying amount of time to open an
example project and run it), in Semicolon you could potentially browse at live-rendered
example sketches and easily and quickly pick ones you like, or edit them on the fly to see
what they are capable of. As a result, the process of coding and seeing the result is closer
together. On top of these core ideas we aim to include easy lookup of Processing documentation
and reference, on-the-fly pretty error messages, helpful syntax highlighting and generally
a pleasant “IDE-esque” experience.
A more social feature will be providing some small server storage (which could be part of
a pro/paid version of our app) to store user sketches, which then means you can save
them as desktop apps on both iOS and Android devices with icons we generate from the
1
http://en.wikipedia.org/wiki/Integrated_development_environment
2
https://processing.org
actual sketch. This will be a rewarding experience for learners as they will be able to
easily share sketches to their friends’ phones acting similarly to native apps3 (you would
tap the icon on your phone and the sketch will run as a standalone app). Including the
actual Semicolon editor inside these apps will potentially open up the possibility to easily
collaborate on sketches, too. Proposed Method
The two possible ways of implementing Semicolon are doing it natively or web-based.
While initially going down the first path (as far as having a working prototype) after much
thought, we leaned towards web technologies. Web vs. native is not an easy decision to
make and even big companies have been known to make mistakes in the past[1]. Web
technologies are evolving so quickly4 that six months is enough time to change the
landscape and reevaluate things. At the time of writing this, the web stack seems
powerful enough to successfully bring our vision to life. The existence of mature open
source web code editors such as Ace5 and Codemirror6 gives us the confidence of
choosing the Web as our platform. Those two editors are the backbone of many, if not
most, popular coding websites.
The second big part of the puzzle here is Processing.js7 which compiles Processing code
to JavaScript and renders it in the HTML canvas element. Our second working prototype
is done with Ace and Processing.js where both the code and the rendered sketch live
inside a single HTML page, allowing us to rapidly prototype and test our editor. HTML and
JavaScript themselves arguably allow for more creativity than, say the Apple tech stack
(either Objective-C or Swift). From our past experiences of building iPhone apps,
escaping from the “Apple way”8 of doing things is hard. In the case of our app, that would
have been the case, so there is a sense of freedom when working with web technologies.
A quick example would be a view where the sketch transparently renders live beneath the
code editor. Of course, most things are possible in both environments but one might feel
very opinionated while the other could inspire a more DIY/experimental approach to
things. 3
Demonstration of saving to homescreen: http://youtu.be/yD_zLO2Qx1c
4
http://kangax.github.io/compat-table/es6/
5
http://ace.c9.io
6
http://codemirror.net
7
http://processingjs.org
8
In the defence of Apple, their technology is incredibly well documented and is usually a joy to use
when you build traditional apps.
Libraries like Browse-Sync9 that launch a server to serve the HTML page you are working
on (so you can open it on your machine, as well as on your phone) and live-reload the
page on file-save is a faster and more pleasant way to rapidly prototype as opposed to
code and compile cycle when working natively. Going for the web, of course, also gives
us the very important factor of being completely multi-platform. Naturally, ditching mature native technologies is not without its drawbacks10. Native
provides easy to use UI libraries that can be either written in code or done in a
drag’n’drop interface builder. On iOS for example, navigational hierarchies, transitions,
buttons etc., are all provided and done for you. All this has to be emulated when working
with web technologies, which to say is not impossible, but certainly trickier. People
usually pick native when speed matters but this is a complex topic so we prefer to not be
opinionated about it. Another thing to note is native mobile devices capabilities are easier
to access through native APIs. Gestures can be implemented with open-source JavaScript libraries (such as jQuery
Mobile11 but also many others). As aforementioned, multitouch gestures are possible and
can provide a faster way to generate common code and save typing. Single touch and
dragging can be used to manipulate code and show documentation, reference,
explanations or examples. While Processing is our first choice language at the moment, we have looked at
JavaScript as well, in particular p5.js12 which is a library inspired by Processing and has
very similar goals. Of course, we aim to build a good general purpose IDE, but tailoring it
to a language (with examples, code snippets, reference and documentation, much like
Eclipse is tailored for Java, or Xcode to Objective-C) we can create a much smoother and
painless developing process. Here is a quick comparison between Processing and
JavaScript/p5.js and why we are sticking with Processing at first:
Processing
Processing is an open source programming language and integrated development
environment (IDE) built for the electronic arts, new media art, and visual design communities
with the purpose of teaching the fundamentals of computer programming in a visual context,
and to serve as the foundation for electronic sketchbooks. The project was initiated in 2001 by
Casey Reas and Benjamin Fry, both formerly of the Aesthetics and Computation Group at the
MIT Media Lab. One of the stated aims of Processing is to act as a tool to get nonprogrammers started with programming, through the instant gratification of visual feedback.
The language builds on the Java language, but uses a simplified syntax and graphics
programming model. Processing was our first choice primarily because it is quite popular
9
http://www.browsersync.io
10
Our comparison is mostly against iPhone development since we have no Android experience.
11
http://jquerymobile.com
12
http://p5js.org
amongst educational institutions and creative people that want to learn to code, most of its
goals are similar to our project’s. Secondly, the language is mature enough to be stable and to
have great quality documentations, tutorials and general information on the internet about it. It
is a safe choice in the sense that if you need help, chances are you will find it. JavaScript/p5.js
p5.js is a JavaScript library that starts with the original goal of Processing, to make coding
accessible for artists, designers, educators, and beginners, and reinterprets this for today's
web. Using the original metaphor of a software sketchbook, p5.js has a full set of drawing
functionality. However, you're not limited to your drawing canvas, you can think of your whole
browser page as your sketch. For this, p5.js has add-on libraries that make it easy to interact
with other HTML5 objects, including text, input, video, webcam, and sound. While P5 is really
new (released in 2014) and still very much in development (there is supposed to be a special
IDE coming for it) it could be a good fit for our project. While we would like to add it as an
option, we are still aiming at Processing as a preferred target language.
We are using git13 versioning in combination with Github14. Since our project is open
source it is a natural fit. Git is a great tool and Github is an amazing platform so we
decided to make most of it. We have a master branch that has the latest stable working
code. Every new feature or bug fix will be developed in a separate branch by one or more
people. This will make it possible to have code reviews and discussion before we merge
implementations into the master branch. Labeled issues are a great way to organise and
deal with bugs, features, enhancement and in general to structure the whole development
process. We also make use of Github milestones to keep us on track of our goals and
progress. Designing and IDE is quite a challenge, reimagining it for mobile devices, even more so.
We realise that building a complete full-featured bug-free piece of software is virtually
impossible so we will use this project as a test-bed for experimenting forward-thinking
and creative design ideas. That said, we aim to finish a working product that could be
used by our nephews, our mothers, and fellow programmers. We will keep the spirit of
Processing and the open Web15. Our application will be free and open source software16.
If we get at least some things right, we hope to inspire other people who can build on top
of our project just as we build on top of the work of others. Proposed Audience
We can divide our audience in two groups. The first will encompass a somewhat wide
range of people. People mainly interested in getting into programming as a hobby or find
13
http://git-scm.com
14
http://github.com
15
http://en.wikipedia.org/wiki/Open_Web
16
http://en.wikipedia.org/wiki/Free_and_open-source_software
it a fascinating creative medium. Those that want to understand basic concepts without
wanting to jump too deep at first. People that think of programming as a hard skill (which
in all fairness it is, we won’t try to “teach a language in 24 hours” or use similar marketing
tricks) but look to start somewhere simple. Of course, our app targeting mobile devices,
we reach an audience of smartphone users that don’t necessarily own laptops or have
time to learn only while commuting and similar situations where they have no access to
laptops. Children that can take advantage of their parents’ phones and tablets are also a
valuable part of our first target group17. Secondly, we aim to provide a useful environment for advanced programmers and
Processing users. Similarly to our first group, they will use the app in situations where
they do not have access to laptops or computers. Since we aim provide a full featured
Processing development environment including reference and documentation, Semicolon
could be pushed as far as it is reasonable to program on a smartphone or tablet.
Personas
Maya Williams Undergraduate Student
Maya is a 19 year old female student living in East London. She excels in practical &
visual skills, & is looking to broaden her knowledge within programming, hoping to add
some of her creativity to her own work. She graduated from a standard college in east
London. Maya enjoys scenic photography through her casual walks around central
London with her friends, but is looking forward to studying in higher education. She has been researching her Media and Technology course wanting to be ready &
organised and has found the Semicolon app. Maya is trying to use this app to hopefully
straighten her learning curve into the course as she has no background programming
experience. By using the beginners reference alongside her classes, she finds learning
Processing pretty fun with the diﬀerent visual representations, explanations & easy code
manipulation via the “tweak mode” when she turns her tablet sidewards. With the ability
to manipulate her code with real time visuals has helped her a lot in understanding the
parameters. Also, with the capability of saving her sketches to come back to, she finds an
17
As of next year, students around the UK will have to take compulsory lessons in programming.
These classes will range from ages 5 to 16 (GCSE level), this application can be used as an option
which is highly accessible there be used in conjunction with their processing lessons. As more
educational institutes are allowing the use of handheld technology such as tablets (which does
show positive correlation on educational benefits), being able to use this app will help hugely on
their learning curve into their introduction to programming. This past September (2014), the BBC
have introduced more resources into learning computing/programming on sites such as CBeebies,
CBBC and BiteSize to get children interested into computing. Because of the visual approach we
are taking within our IDE, we believe by Keystage 3, students would be able to use this app to
create very interesting and educational sketches. [2]
easy transition to coding in class to coding on public transport, carrying on from where
she left from. Due to her casual use of social media, she has been able to share her sketches in a
HTML form to show oﬀ on her Twitter & Facebook page, updating her friends what she
has been learning or has been working on in her spare time. Maya needs this app to
continue to help her understand Processing syntax whether it is in the form of shapes,
moving shapes/objects, if statements etc, as it is what the course demands her to have a
full understanding of.
Jona James Housewife
Jona is a 50 year old mother of two, and is unemployed. She owns an iPhone 5s. One of
her sons is a visual programmer at university and she has a developed an interest in the
work he does. Jona has always been an artistic person, strong in practical forms of
artistic expression such as painting and sculpture. She asks her son how she could make digital art like he does and he tells her of an app
called Semicolon. He says that this app is a good place to start creative coding as it
makes coding easier to understand and it provides simplified explanations of various
functions. Considering Jona has no technical background aside from using her phone to
check her email and post listings on eBay, she hopes this app will provide her with a
starting point to learn the basics of visual programming. She would like the ability to
share the work that she has made with her husband and her friends, and this app
provides that feature. Being able to see what her son can do with little code, she sees this as a potential
creative outlet during her spare time. There is also the option to take it further once she
understands Processing, to look at tutorials online and test them on the app to make very
small games for herself or friends.
Pavel Malenko Creative Coder
Pavel, 33, programmer by trade specialising in creative coding, data visualisation, web
development and WebGL. He has a background in game development and was part of
the Demoscene18 as a teenager. He works with a variety of programming languages such
as C++, JavaScript, Clojure, Processing etc, as it usually depends on the project. Pavel
had to pick up Processing a while back when one of this project was to create generated
visuals for print and projection. He has enjoyed programming in Processing and being
part of its community ever since. 18
http://en.wikipedia.org/wiki/Demoscene
Pavel has a lengthy commute with public transport to work. He also travels by train or
airplane when projects require him to. So Pavel finds himself commonly in situation where
he has to wait or stay in unusual places, mostly with no power or wifi. He reads a lot on
his phone or tablet but many times he wished he could play around with code. Googling around Semicolon comes up. Pavel is biased towards such code editors but
giving it a try he finds himself enjoying the app. As a skilled typist he is usually frustrated
to type on the phone but Semicolon provides nice shortcuts to common code snippets.
Pavel has finally found a creative solution to killing his time.
Self-Evaluation
Product-wise, our app as already mentioned targets people new to programming as well
as more experienced coders. Appealing to both targets is quite tricky so in the case of
advanced users of Processing we are only looking to provide a playground in their free
time, whilst on the tube or the train etc. Considering this, Semicolon will be deemed
successful if it satisfies both those groups of users. More specifically, we will give ourselves tap on the shoulder if we get feedback from
novices that they wanted to get into programming and/or Processing and found that
Semicolon was the easiest, or at least on of the best ways to get started. Similarly, if
experienced coders who were frustrated with such products tell us they have enjoyed
writing quick sketches in our app and that it is a productive environment for
experimenting with Processing. Based on that, we will judge if Semicolon is a good IDE
for Processing.
What is common to both groups though is we would look for a positive feedback on the
actual process of writing code, i.e. has our IDE pushed the status quo of mobile code
editors, have our design decisions been intuitive and not confusing. Have they made the
process faster, slower, or not much has changed? This part could be hard to judge as
diﬀerent people will inevitably have diﬀerent typing skills and habits on mobile. Perhaps
people who type faster might find gesture shortcuts unnatural and useless. People who
have a hard time using their smartphone keyboard quickly will hopefully find them useful.
In either case we will analyse the feedback for each design decision carefully and
consider the target group for each test. Based on that, we will judge if Semicolon is a
better way to write code on mobile than the alternative apps. We suspect these two general factors for success described above will get somewhat
blurred together in the actual process of testing and analysing but hopefully they will
provide a useful framework for self-evaluation.
Documentation
The basis of all of our project’s documentation will be our Tumblr blog19 for visual and
blog-based posts and progress reports. Since our project requires a substantial amount
of iterative design, blogging about ideas and concepts with their visual counterpart will
provide for a good way to see where we have started and what we have gone through
(i.e. rejected ideas or changed ones) to get to a finished product. At a more final stage of
the project we suspect we will record videos of us using the IDE, and later other people,
namely our target group, using it as well. Drawing conclusions of failed and succeeded
goals will be written about.
The rest will be on Github20 where we keep the code, labeled issues that represent bugs
or features we want to implement next, and last but not least our milestones. Github, as
already mentioned above, provides an amazingly powerful platform for collaborative
software projects and we are happy to make use of it. Our repo is open so anyone can
take a look or fork the code. Using git is a great way to deal with versioning and as a side
eﬀect it documents the history of our code and who was involved with which parts of the
software.
Press Release
This press release would be aimed at technology websites and blogs such as The Verge,
Engadget, Techcrunch and similar
Even if you don’t believe in the “learn to code” movement, let’s face it - even Barack
Obama wrote a line of JavaScript. We live in a digital age where most of our productivity
and creative process is done through computers and smartphones. And no, probably not
everyone needs to learn to code to know how to use them. But a lot of people sure want
to. And it is obvious why, programming is fascinating! It provides a completely new
medium for creation and creativity. Semicolon is an IDE and code editor that tries to build
the bridge between creative people fascinated by coding but finding it hard to dive into. It
takes advantage of the most common personal computer there is today - the
smartphone. It runs on the most ubiquitous platform ever - the web. It is accompanied by
Processing - a language geared towards education and visual and art practices. So.. it
seems like you are slowly running out of excuses not to learn to code.
19
http://groupnoto.tumblr.com
20
https://github.com/groupnoto/semicolon
Inspiration
Learnable Programming by Bret Victor21
Looking into the link above, we believe that some of the features shown would be highly
valuable in our app and helps hit our target on what we want our app to achieve. Being
able to have a brief description of each line of code would help the user to understand
what he or she is creating as well as understand what the sketch is doing. Being able to
implement this into our app as well as the visible flow feature will allow a quick and easy
understanding of their sketch.
Biographies
Joshua Akinsola
Joshua Akinsola is a second year Creative Computing student at Goldsmiths College,
University of London. His focus is on User Experience and empowering easy learning
through intuitive interfaces. Focusing on trends such as JavaScript, HTML 5 are of
interest, however research in the user experience area is a passion. Discovering small
techniques that could have a big impact on the way users interact and learn technology is
what he finds fascinating. How technology is impacting areas outside itself is what he is
currently exploring; areas such entertainment, media, commerce and politics. That in
mind, he also understands that the power of learning technology could transform lives,
therefore the act of delivering technology fundamentals in a simple way for people could
help him understand the fine detail better whilst giving others the ability to explore it as
well. He has a background in entertainment, sports and retail in the consumer electronics
industry; therefore he has an ability to understand the users that would be aﬀected by
technological changes. Inspired by characters such as Steve Jobs, he hopes to add in his
own way to remove the complexity from the new age of technology.
Nikolay Nikolov
Nikolay is a second year Creative Computing student at Goldsmiths College, University of
London. Prior to this course, he has studied one year Sound Arts at London College of
Communication, University of the Arts London and has a Software Engineering High
School degree from Elsys, Sofia, Bulgaria. Nikolay has also a substantial background in
Electronic music.
Erwyn Nicholas Camero
Erwyn Nicholas Camero, 21, is an under-grad student currently studying Creative
Computing at Goldsmiths College, University of London. He is a fairly heavy electronic &
gadget user and likes to record live music in his spare time. Erwyn lives an active
21
http://worrydream.com/#!/LearnableProgramming
lifestyle, working a couple part time jobs, partaking in diﬀerent sport clubs & train in the
gym and road bike racing. He has chosen a programming degree because he realises
there are so many opportunities and interesting projects within the industry that he looks
to be apart of. He picked Creative Computing specifically because of the huge range of
project ideas & concepts available to work on, and this course also allows him to input his
own creative ideas and skills into programming. He believes makes the learning process a
whole lot more interesting and fun to dive into.
Lucio Cuddeford
Lucio Cuddeford is a student at Goldsmiths University. He studies Creative Computing
because he is interested in the creative and artistic side of computing which this course
provides. Processing was the first language taught on this course and Lucio immediately
fell in love with it. Processing allows him to express himself visually and is mostly limited
to just his imagination. He has recently chosen a more specific direction in the field with
mobile at its heart. The ability to export Processing code into JavaScript has allowed
Lucio to create interactive graphics specifically for mobile devices.
Biography/Bibliography
[1] Drew Olanoﬀ, Mark Zuckerberg: Our Biggest Mistake Was Betting Too Much On
HTML5, Techrunch
http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobilewas-betting-too-much-on-html5/ accessed on 12/11/2014 [2] Sophie Curtis, Teaching Our Children To Code: A Quiet Revolution, Telegraph
http://www.telegraph.co.uk/technology/news/10410036/Teaching-our-children-to-codea-quiet-revolution.html accessed on 12/11/2014
Sophie Curtis, Digital Learning: How Technology is reshaping teaching, Telegraph http://
www.telegraph.co.uk/technology/news/11051228/Digital-learning-how-technology-isreshaping-teaching.html accessed on 10/12/2014