Pencil Code Project Ideas
Pencil Code is an open-source project to make professional coding idioms acessible to beginners: coding should be as universally acessible as using a pencil.
The major mission of Pencil Code is to provide a universally accessible programming surface that can be used by beginners from elementary school up to a level of a college "CS1" class such as Computer Science Principles. This is a wide range of ages and skills; Pencil Code is inspired by the model of being as applicable as a pencil, useful both in kindergarten and college.
Pencil Code provides basic tools that students can used to explore the field: a programming editor supporting Coffeescript, Javascript, HTML and CSS; a little free server space for storing code and data, and for doing real-time communications; and a turtle graphics library with tutorials to start with.
Pencil Code is an MIT-licensed node.js-based web application implemented as a simple Express server, with almost all the application logic in the browser (Pencil Code on github). Pencil Code combines the ACE text editor, the Droplet block editor, Iced Coffeescript, jQuery, jQuery-turtle, socket.io, and several other components to provide a welcoming programming environment for beginning students.
The projects below follow the theme of improving the underlying technologies to make programming more approachable for beginners.
Also, be sure to start up a discussion on pencilcode-development on Google Groups about various project ideas that interest you.
Project: Social Coding for Beginners
This project is to create a new user interface for Pencil Code, built around social coding for beginners.
Learning in software engineering is different today than it was 20 years ago. Today, practicing software engineers learn a new technology by participating in a community, reading examples, posting questions, and sharing code. They do not learn alone. But Stack Overflow and github are not welcoming to beginners because they are too difficult to use (for technical reasons) and too intimidating (for social reasons). What needs to be done to knock down this barrier?
- Beginners need to get used to the idea that other people read their code when the stakes are low. Their very first code - when it is "OK to make mistakes" - should be social.
- Social affordances should allow safe areas for beginners to support each other such as "all the self-identified beginners who started on the same day," or "all the people in a physical classroom class."
- Technical problems need to be easy to reproduce: we cannot assume beginners start with the skills necessary to compose a technical question containing everything needed to reproduce their problem.
- Technical answers need to be easy to understand: we cannot assume beginners can see a code snippet and recognize the difference between that code and their own; or how to run it, or visualize its behavior.
This project idea is to knock down the barriers to social coding entirely. Beginners write their very first code inside a message board, and saving their code should create a post. What would you get if you merged Stack Overflow with jsfiddle, and designed the experience to be as welcoming as possible to first-time programmers that might be as young as 14 years old?
If you are proposing a project to address this need, you should draw up a specific simple design that can be implemented in a summer (taking advantage of Pencil Code components), and then prototype a portion of the design. We are fans of several of the open-source question answering implementations such as BioStar, and using one of these as a starting point would be a good way to make an impressive, quick start.
Project: Create an Orchestra
Music is a terrific motivating application for many students, and Pencil Code's support for playing songs using ABC notation is already great fun to use. However, it could be far better, and we have teachers who want to use improved music support.
One key request is for more instruments. Pencil Code uses a little library called musical.js to do create music. Musical.js is much smaller and more elegant than other similar libraries that depend on sampled downloads to create instrumental sounds, because it completely relies on synthesis to create its instruments. With just about 20K of code to download, musical.js is very different from musical solutions such as midi.js that require many megabytes of downloads.
However, musical.js only includes one instrument: a piano sound. This project would be to create a larger array of instruments, and to still do so without sampling.
This project would break down into two parts:
- Improve synthesizer support to make it easy to create a wider range of instrumental sounds. Maybe add the ability to put low pass filters through an enveloope, use vibrato, or other effects.
- Use the improved synthesizer support to create a library of a dozen or so pre-created instruments such as trumpet, flute, violin, drums, etc.
Project: Export to Other Coding Tools
One of the values of Pencil Code is that code written here can be run anywhere that JavaScript runs. This project would be to build support for exporting projects or otherwise integrating Pencil Code with other tools. For example:
- Export a Pencil Code program to jsfiddle.
- Export to Python Tutor's Javascript mode
- Import and export programs (or run directly) from github gists.
- Link a Pencil Code account to github.
Project: Traceur ES7 JavaScript Support
A key reason Pencil Code uses CoffeeScript rather than JavaScript is that Iced CoffeeScript includes "await" support.
This project would be to incorporate Traceur support into Pencil Code to include support for ES7 "await," so that this is no longer an issue. If it works well, we could switch the default in Pencil Code from CS to JS.
Project: Await for Beginners
This project is to add ECMAScript-7-style "await" syntax to Iced Coffeescript to provide students with an easy way to wait for input or other asynchronous processes in their programs.
This project is meaty enough to be interesting for any student interested in programming languages, involving reasoning about continuations, asynchronous programs, and promises. Yet it is clean, achievable and practical, and it will have a big impact on the range of projects that can be created by beginning programming students.
Await for Beginners: Detailed Project Description.
Pre-Project to do before submitting a proposal.
Project: Python in Pencil Code
This would be a major project, but a summer student could propose doing only one half of it.
The idea would be to use a Python-in-Javascript implementation like Skuplt to allow teachers to use Python as a browser language within Pencil Code. There are two parts to such a project.
- Python in droplet. Add a python parser to the droplet editor, so it can be edited using blocks.
- Python in Pencil Code. Add python as a language that can be run in Pencil Code with script type="text/python".
Project: Additional Educational Libraries
There are several popular Javascript libraries used by educators: typically the approach is to ask students to learn Javascript or Coffeescript at the same time as learning to read the API for the library, navigating examples and tutorials, all while learning programming concepts.
This project is to bring one or more popular educational libraries into Pencil Code, and provide block language support.
Possible libraries include:
- Processing.js or p5.js
- GlowScript's javascript library.
- Mapping via ModestMaps or Google Maps API.
- EarSketch's javascript library.
- Charting libraries like dygraph or Google Graph API.
- three.js
Project: Generic Framework for Libraries
There are a couple popular ways developers share libaries in the Javascript world:
<script src="">includes.- node.js-style require libraries (together with browserify)
These should be supported directly in Pencil Code.
To include a script, you should be able to just
include 'scriptname.js'. Common
and popular libraries (such as jquery.js and d3.js)
should be accessible by short name, but arbitrary
script should be accessible by URLs. One possible
approach to making a broad range of scripts available
by short name is to process the long list of libraries
published on cdnjs https://cdnjs.com/libraries.
To use a published npm library,
var lib = require('mylib')
should work as if you had used npm and
browserify. One project that implements
browserify-style require in this way is
requirebin.com
(On github here: maxogden/requirebin).
It implements browserify-style require,
taking advantage of
wzrd.in to build
the underlying libraries. We could take
the same approach.
Both include and require
could be implemented in Pencil Code by preprocessing
the student's code to identify and preload dependencies.
Project: Search and Hashtag Galleries
With more than 50,000 student projects being created each year, it is getting difficult to find our way around the Pencil Code community.
This project would be to implement search on Pencil Code.
This is mostly an operations and deployment project: we need to learn how to run a fulltext search database such as Elasticsearch on Google Compute Engine - really, we'd like to deploy using ansible playbooks.
Once the search database is running, we should build user-visible features. There are two bits:
- Fulltext search over code
- Hashtag search over code projects
Hashtag search would be a key community enabler. It could allow topical subcommunities, including individual classrooms, to have a hashtag.
Project: Installable Pencil Code Application
Some teachers and schools with intermittent internet connections would prefer to use Pencil Code as an installed application.
The first step is to use a tool like Electron to repackage Pencil Code as a downloadable OS X or Windows app. Then the storage layer of Pencil Code needs to be rethought to allow offline use while still allowing interaction online, when connected.
For Chrome users, one strategy is to package Pencil Code as a chrome app.
Project: Webcam Sprite Maker for Students
Students are excited by programming projects that reflect their own personality.
MIT Scratch allows for this by providing a large library of predrawn shapes for sprites, and by providing a bitmap editor for students to draw their own sprites. However, one of the problems with this approach is that students sometime spend too much classroom time in the bitmap tool instead of creating programs.
The idea of this project is to allow students to use their laptop's webcam to take a picture of a sprite to upload and use. They can create a sprite quickly by drawing it on paper with pencil or crayon or other traditional art tools. (My favorite method is to cut and paste shapes out of colored construction paper.)
There are a few things the tool needs that make this tool nontrivial.
- To protect the privacy of students, the tool should prohibit uploading faces, or it should blur faces that are uploaded. We should use a javascript face detection algorithm for this.
- To allow creation of fun sprite shapes, the tool should automatically remove backgrounds and create transparent PNGs. Ideally this would be done automatically for the case of a drawn shape on a solid white paper background; but an interactive "background tool" should be created to allow background regions to be indicated.
- The tool should provide effects like posterization, manual drawing, and resizing.
Project: Microdatabase for Beginners
This project is to create a server-side component and a small client-side library that provides a JSON-based microdatabase for beginners.
The database should allow use of a JSON query language such as dojox json-query, or a relational query language such as SQL, to extract data and alter values in a JSON file.
The database should support CRUD operations. To allow students to create databases that maintain simple atomic consistency, it should be possible to create queries that:
- Test a condition and update the data only if the condition is true.
- Update more than one item at the same time.
One possible implementation strategy for the microdatabase idea.
Project: Block Editing for HTML and CSS
(Work in progress: being done by Saksham Aggarwal.)
The idea here is to make CSS and HTML coding accessible to beginners by building a block language for them, using Droplet.
Droplet is a new open source blocks-and-text program editor created for Pencil Code. It is a unique approach to block editing, because it allows students to edit in either blocks or text and switch modes at any time, without losing any work. (For example, all spacing and comments within text are preserved when going to blocks and back.)
Droplet supports different languages through parser adapters. This project would involve adding additional language modes to Droplet for HTML and CSS.
Block Editing for HTML and CSS: Detailed Project Description.
Pre-Project to do before submitting a proposal.
Project: Visual Debugger
(Work in Progress: being done by Jeremy Ruten, Amanda Boss, Cali Stenson.)
Create a visual debugger for beginners, that gives them a "youtube-style" scrubber that lets them examine a trace of their program and run it forward an backward after they finished running the program.
We should provide visualizations of the turtle animation at each step as well as the line-number being run and possibly variable, data structure, and DOM state. Ideally, we would eventually build a visualization that lets students interact with the drawing surface geometrically to and understand the progression of the program over time.
Visual Debugger: Detailed Project Description.
Pre-Project to do before submitting a proposal.
Project: Visual Thumbnails of Projects
(Work in progress: being done by Xinan Liu.)
This project is to create a server-side component that runs student programs to create visual thumbnails of each one, and that displays those thumbnails when browsing projects.
There are several possible approaches, and also several challenges.
- A headless webkit could be used to run the student programs; but the programs need to be run quickly, without animation, to be able to render a program at a reasonable speed.
- Or, after a student runs the program, a browser-side function could render the page into an offscreen canvas and send the bitmap to be saved on the server.