As we return to school and look around Pencil Code in preparation for our classes this fall, we can see quite a few improvements that were created by our Google Summer of Code students. Let's take a look.

The first thing you see when you log in: icons everywhere! But better yet, if you have saved the program recently, the icon will be a screenshot of the program's output. The change will help students and teachers quickly identify saved projects, and it should help people also find interesting projects they want to share. If you do ever want to switch back to a dense text-only listing view, you can just click the grid layout icon in the corner of the blue title bar.

The icon implementation was done by Xinan Liu, a student at Singapore National University. He rewrote several bits of the Pencil Code server to supprort the icons, and then on the client side, he integrated the very cool html2canvas library to create the screenshots. If you click the "camera" icon, you can control the screenshot that is used for the icon.

This summer, Xinan contributed quite a bit beyond this project. He also refactored our node.js-based build to switch from require.js to browserify, and he has been contributing to other sharing and scaling features on Pencil Code, helping other non-GSoC contributors get up to speed and reviewing their pull requests. We're looking forward to Xinan's continuing involvement and contributions to our little open-source community.

The next amazing contribution, by IIIT Hyderabad student Saksham Aggarwal, is something you will definitely want to use in your classrooms - but you might not notice it at first! To try it out, create a new project named .html at the end - like myfile.html. Saskham has implemented an HTML block mode for the Droplet block editor, which means that you can instroduce beginners to HTML syntax using a drag-and-drop interface. And as usual with Droplet, you can toggle between blocks and text at any time. Saksham is also working on a similar Droplet-based editor for CSS syntax.

You might ask, why not teach a WYSIWYG interface for HTML authoring? For a begnning programming class, the reason to teach HTML is not to teach web design, but to teach the idea of code. By teaching HTML before teaching a traditional language, students can get the idea of code, program files, syntax, naming, nested structure, and parameterization. And they can learn all these important concepts before wrestling with sequencing, state, and control flow. Saksham's visual HTML syntax editor is a very accessible way to see and work with HTML syntax without having to type every bracket. And yet, magically, it does not hide the syntax - by toggling into text, you can work directly with traditional code. It is fully authentic, but highly accessible.

Saksham's implementation reflects a few subtle but deep insights: he uses a lenient HTML5-compliant parse5 parser, which means that you can load up an arbitrary piece of unpretty HTML with mismatched tags or other problems ("view source" on any web page), and his editor will happily display the block structure of the code. And his palette choices reflect an analysis he did by analyzing a crawl of of real-world use of HTML tags on the web: obscure rarely-used tags like <tbody> don't take up room in the palette - space is given to tags that are really used in practice. Read a paper about Saksham's work here.

The final project was a collaboration between GSoC student Jeremy Ruten from the University of Saskatchewan, and summer students Amanda Boss from Harvard and Cali Stenson from Wellesley. They created an incredibly ambitious project to implement a "rewindable" debugger in Pencil Code. Although it is not quite ready for production yet, we are already using pieces of it in Pencil Code. You will see the debugger in coming months!

On the right is a bit of a preview of some of the new debugging features to come. From the screenshot, you can see three features of the new debugger: it shows which line is running; it automatically shows variable state next to relevant lines fo code; and it allows you to "step forward" or "rewind" your code. From the screenshot, you cannot yet see some of the other tricks the debugger can play: it draws arrows to show control flow loops and recursive function calls; it it allows you to drag the slider back and forth as the program runs; it draws turtles in the output window to show the state of the output; and, marvelously, it works on any Coffeescript or Javascript program, including programs that directly use the DOM or other APIs.

A lot of the magic in the debugger is due to Jeremy's tracing transpiler, which he has put into github under the pencil-tracer project. Jeremy's transpiler processes code in those two languages and outputs transformed code that includes tracing instrumentation calls at every line. For examples of how it transforms code, you can check out Jeremy and Amanda and Cali's writeup of their debugging work.

Did I mention that the three of them are students? And they built this rewindable debugger over one summer?

As you can see - our students contributed incredible projects this summer. They all made improvements that will make a real difference as we use Pencil Code to bring computer science to the next generation of students.

We'd like you to participate

If you are interested in bringing some of this cool work into your classroom, join our discussion group by signing up at teach.pencilcode.net: we have teachers from elementary school to college, from Texas to Singapore. And if you'd like to make an open-source contribution, check out ideas.pencilcode.net for project ideas, and join the teaching discussion group: that is also the area where our open source contributors hang out.

We are grateful to Google for supporting the summer open-source program: Google's support is valuable not just for the money for the students, but because Google is really effective at bringing amazing students together with open-source projects.

We hope the summer was as interesting for our students as it was productive for our project. We look forward to our students' continued involvement in the Pencil Code community. Thank you!

We are making changes to some of the math functions, in particular the trigonometric and logarithmic functions. To do that we also need to rename the existing log function, used for debugging.

Pencil Code is being used for more and more things! One area we looked at recently was use of the trigonometric functions. Those are cos, sin, tan, and their inverse forms, acos, acos, atan, and atan2. Those functions are useful for dealing with angles, such as when doing turtle geometry. Turtle turns are expressed in units of degrees, so it helps that the trig functions measure angles in degrees.

When you learn trigonometry in high school and beyond, measurement of angles switches to radians. Some Pencil Code users have figured out that the underlying Javascript Math library has trig functions in radians. We noticed that many Pencil Code programs use Math.cos, Math.sin, and so on.

Both degrees and radians are useful, for different types of programs. We have decided to incorporate both forms of the trig functions directly into Pencil Code, and make a clear distinction between them. In doing so, we follow the lead of mathematical languages such as Fortran, MatLab, and Wolfram Alpha. cosd, sind, tand, acosd, asind, and atand will operate in degrees, and cos, sin, tan, acos, asin, and atan will operate in radians.

One further change we're making is to remove atan2. Of course, that function is very useful, so we're incorporating what it does into atan and atand. If you provide two arguments to atan or atand, they will act like atan2 or atan2d would act. You can think of atan and atand as being 2-argument functions, where the second argument defaults to 1:

atan  = (y, x = 1) -> ...
atand = (y, x = 1) -> ...

So we're changing the behavior of the old trig functions. They used to operate in degrees, and now operate in radians. To minimize the impact of this change, we have modified most of your existing programs that use old trig functions, to use the new degrees forms. Those modified programs should continue to work, just as before. There were a few programs where we weren't sure what to do. We left those alone. We did not change existing uses of the Math. forms of the trig functions. But if you wanted to, you could switch to the shorter names, and your program will continue to work as it did.

Another change we will make (not yet, but soon) involves the logarithmic functions, ln and log10. We will remove them and replace them with a single log function that takes an optional second argument. If you call log with a single argument, the function will return the natural logarithm, just as the existing ln function does now. If you supply a second argument, it specifies the base of the logarithm. So log(x, 10) will return the log base 10, just as log10(x) would now. But as you can imagine, you can use other numbers for the base, as needed for your problem. For example, log(x, 2) might be useful for figuring out how many bits are needed to encode a number in binary.

Unfortunately, log is currently a function useful for printing things while you're debugging. To prepare for the upcoming change, we have added a new function, debug, which will do the debug printing that log currently does. For now, log still exists and will do what it has been doing, but it will be noted as deprecated. We have modified your existing programs that use log to use debug instead. Some of you figured out that you could use the Javascript console.log function to do this debug printing. That will continue to work, and we did not change those uses. For now we have left uses of ln and log10 intact. We will change those when we change log to be the logarithm function, instead of the debugging function.

Enjoy the new, expanded set of math functions, to do even more great things with Pencil Code!

Pencil Code gave a popular workshop at the CSTA 2015 conference in Texas a few days ago. In an email afterwards, one attendee commented "Incredible updates to Pencil Code including an HTML web publishing option.... session was packed - there were people sitting on the floor!"

At CSTA we got a chance to work with teachers from around the country, as well as groups like CodeHS and Codesters who are developing really interesting new tools and educational material.

Our CSTA presentation is available here. At the session, teachers got to work with Pencil Code hands-on, and that presentation includes links to the materials we used.

One question came up: "Why is it called Pencil Code?"

Our project is named after the pencil because we are inspired by the history of that writing instrument. We think of the pencil as a classroom tool, something simple enough for a young child.

But it was not always this way. The original graphite pencil was an expensive technical implement, a square stick of carbon sawn from a graphite mine in England. Rare and fragile, it was used by draftsmen and architects who valued its precise, dry dark line.

Centuries of innovation made the pencil more accessible: through the ingenuity of many inventors, the pencil has acquired a round wooden case, cheap and consistent clay-hardened lead, the attached rubber eraser, and pencil sharpeners. It is this history of innovation which has allowed the pencil to displace the inkwell and pen as the first writing tool for students. And yet the pencil remains a favorite instrument for adult writers, architects and mathematicians.

Can the technical tools used by computer scientists evolve like the pencil?

Pencil Code tries to begin to answer that question. It is designed to be flexible and simple enough to loved by both beginners and pros.

When using Pencil Code, advanced coders are comfortable typing in Javascript, Coffeescript, and HTML: standard languages that pros use every day. But beginners can edit those same languages with drag-and-drop, manipulating color-coded blocks. Pencil Code bridges the worlds by allowing users to transform their programs between blocks and text freely.

Like a pencil, Pencil Code is designed to be a low-threshold high-ceiling tool. Our turtle library is an extension of jQuery, a design that is convenient for both beginners and pros. We include socket.io, which makes it possible to solve the very advanced problem of realtime communications with a very beginner-friendly six lines of code.

A lot of work remains to be done to try to match the power and simplicity of a pencil. This year, contributors have created instructional cards and improved ergaonomics for beginners; and we are working on adding more advanced facilities such as python, libraries like p5, and databases.

We have an online Slack group where contributors and edcuators gather. If you would like to use Pencil Code in your classroom or contribute to the open-source project, please join us, and add your name at teach.pencilcode.net.

A brief note from the IDC 2015 conference, which is just wrapping up in Boston, hosted at Tufts.

There was a lot of interesting goings-on at the conference, including a fascinating workshop on Every Child A Coder? organized by Kate Howland, Judith Good, and Judy Robertson. There we wrestled with the question of universal computer science education, bringing child development specialists toether with computer scientists to think through an approach to introducing appropriate computational concepts and practices at all ages. The workshop was an opportunity to meet a number of other teachers and researchers with overlapping interests, including Jeremiah Blanchard, who is intersested in extending Pencil Code to support python for his college classrooms.

In the main workshop, a lot of fascinating work was presented. The paper that interested me most was David Weintrop's To Block or not to Block, which analyzed perceptions of high school students toward block programming as they took a programming class. Under different conditions, the class mixed blocks and text programming in different ways. David has been carefully pulling apart the ways in which students find blocks valuable - for example, he has found that there may be more value in the browsability and the compsability of the blocks, rather than the natural-language labels in the blocks. He has also found that student perceptions of the value of blocks change as they advance through the class, and as they move to text programming.

Anthony's Droplet work, which is the dual-mode block-and-text editor used in Pencil Code, is right at the center of these discussions. Since Pencil Code allows students to freely switch between blocks and text, it raises the question of whether perceived hurdles and differences between blocks and text can be smoothed out.

It is a pleasure to be able to benefit from the insights that David Weintrop has been uncovering, and we are excited to be working with him to use Pencil Code as a research platform for his research.

I just finished up helping with a 3-day professional development workshop for Beaver Country Day teachers. At the workshop, teachers created concepts for coding projects using Pencil Code in their non-computer-science classrooms. Each teachers imagined coding exercises they might use in their own classrooms, and then they traded exercises with each other, playing student and creating a bit of code to do the assignment and explore the concept.

For example, one art assignment was to explore proportions of human faces, and as a "student project", teacher Kimberly McCabe created this clever web app that lets you place two eyes, a nose, and a mouth, then click again to compare your ideas to an actual human skull.

If you try her program, be sure to click five times: after placing the eyes, nose, and mouth, a fifth click will reveal the skull, and you can see where your perceptions of proportions may differ from reality. Kim was not an experienced coder, but the idea of the workshop was to let teachers like Kim work in a space at Google with engineers who could help with computer science tips such as how to use variables or conditionals to put together a sequence of clicks. Bob Cassells coordinated several of Google engineers to volunteer with the group, and Rob MacDonald and Meerah Shah organized the teachers.

Beaver Country Day school is a unique institution to work with on computer science education, because they are implementing an idea they call the Coded Curriculum where teachers are incorporating some coding into every class across their curriculum, in both STEM and non-STEM subjects.

This event was organized by Beaver, but it follows a similar theme to the Pencil Code hackathon series we hosted in 2014, which was attended by teachers from many schools around New England.

• February 2014 Pencil Code Hackathon
• March 2014 Pencil Code Hackathon
• May 2014 Pencil Code Hackathon

Some ideas from those workshops have been particularly memorable - for example, English teacher Whitney McKnight came up with the idea of exploring Shakespeare by having students create interactive chatbots that play the part of a character, say, Lady MacBeth, an interesting twist on the computer science idea of the Turing Test. The notes from previous hackathons are raw, but they are worth a look.

Bob, Rob, and Meerah are working to collect together materials from this most recent workshop.