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.
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.
- 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.