With the wide (and ever increasing!) range of interactive online coding platforms that have mushroomed over the last decade, it can sometimes be tricky to know which ones best fit the core concepts you wish to introduce in your computational thinking lessons. To get students involved with a platform that allowed for visually rich implementation, I decided to try out P5*JS – a JavaScript library that sets up an online IDE with access to the HTML, JS and CSS pages (much like CodePen). Since I was working with a group that mostly had minimal to no previous experience in text coding (or any coding in general), the idea of using functional programming seemed appealing. The focus in functional programming, for the uninitiated, remains on the function itself and not so much how it is doing what it is doing. For instance, if I need to create rectangle of blue color of a certain dimension, then I just say something like:

fill("Blue"); //background color setting
rect(10,20,100,30); //X, Y , Widgth and Height

This means that the learner only needs to focus on fill ( ) and rect ( ) functions rather than worry about how the rect( ) function actually aligns the pixels to draw a rectangle of given parameters. This also helps them appreciate the concept of dealing with a bigger problem (drawing a rectangle) by focusing on the smaller problems (what color should it be? where should it appear? how big should it be?). Additionally, this reduces code and helps them in remembering this sequence of instructions better for long term. This level of abstraction also helps them focus more on the visual elements required for the solution and ensure custom functions are appropriately written and called in order to reach the end goal.

I learnt of P5*JS’s existence from Saber (@saberikhan) a couple of years ago. He was teaching a class on JavaScript and was using this platform to let them create interesting patterns using loops. I found it fascinating right away given it’s visual appeal and how quickly it could be seen as a potential bridge between block and text based coding. It introduced them to text coding but without any heavy implementation of default methods to start with. A setup( ) function would suffice to get them thinking about the base layout of their solution.

So, as a small start in that direction, we began exploring shapes (rect( ), ellipse( ), triangle( ), circle( ) etc…) to start building a My Flags activity. The idea was that using these basic methods, they would create an interactive script which created flags of 3-4 countries that related to them. I added extensions to the activity too, such as ability to include images and short audio clips (using variables) and custom functions. The result was something like this.

The next stage of the unit was looking at how text can be processed using loops. For this we worked on a Vowel Finder activity that would take a word and highlight the vowels in them. Here we saw how to capture a String, loop through it and check each character with an if condition. On spotting a vowel, the foreground color of the text changes. We also used loops to create containers for each letter. The result was as follows. Short audio clips were also inserted to highlight successful and erroneous inputs.

To get further practice with the language and the platform, we then did a a short animal activity. Students chose an animal and built an interactive lesson around it. Examples below.

Update

Here are a few more final projects designed by students later in this unit. They were given the choice to connect computational concepts to something from their own identities.

Big Takeaways

• The big piece in any platform’s use is support. P5.JS has plenty of examples, references and code showcases that demonstrate how a wide range of visual creations can be made.
  
• While the online editor works great for the most part, we did have some issues with code not saving properly despite repeated saves. So I had to get students to constantly create backups elsewhere in case the source was lost.
  
• Having a K-12 focus of examples which allow educators to look at what other schools are doing would be a good idea. So anyone wishing to incorporate this platform into their lessons can get a head start depending on skill levels of students.
  
• The 2019 and 2020 showcase have some very good examples. But adding some sort of context with them would allow students to see relevance of it with the work they are doing.

• Connecting new with something familiar must be the base idea. So coding language comes later, but the idea of solving problems by breaking up a bigger problem into smaller problems comes first.
• Covering the basics of HTML, CSS and JS needs to be done from day 1. The interaction between these different file formats helps set up the need for a script to run within a web page.
  
• Starting with shapes and other abstract implementations helps establish good familiar ground for kids transitioning from block to text based. Instant feedback option within P5.JS helped with that.
  
• The big advantage of functional programming is the base idea that blocks are now replaced by text. So kids see something new yet with the layer of something familiar. I have seen their general confidence and comfort with the platform grow each week.

The final end of unit project now is them designing a complete solution for a background scenario based cue. They have three they can choose from and sort of build such a visual solution to solve them using different methods such as draw() and preload() within P5.JS. There is also an element of research which will have them including new methods that do more interactive things within their work.