This is a collection of resources/takeaways related to my "Scratch to JavaScript" demo at the 2017 Maker Ed Convening. This includes a table of contents linking to a Scratch studio with some projects and then several links to p5js projects. Much of this pulls from examples and resources for the Digital Harbor Foundation Game Workshop youth course.
The main goal for my presentation is to demonstrate and share some of our examples and lessons learned as we helped youth transition from the visual, block based programming in Scratch to a syntax programming language. We chose JavaScript for this purpose. More specifically, we chose p5js - the JavaScript library that is an update/JavaScript version of the original Processing programming language. Due to the emphasis on visual arts and interactivity, Processing, and by extension p5, is a highly engaging platform. The ability to quickly prototype and run a sketch helps retain some of the immediate engagement built in to Scratch.
The Game Workshop course is 14 weeks long, with youth working for roughly 7 weeks in Scratch and then 7 weeks in JavaScript with the p5 library. The youth were already comfortable with Scratch basics prior to the course, so the 7 weeks focused mainly on refining computational thinking and solidifying programming foundations. The visual nature of Scratch enabled facilitators to emphasize these concepts and build confidence with creative problem solving.
The transition into JavaScript started with the very basics. Even with the content designed specifically to build on existing Scratch skills, our facilitators found that having some one-to-one examples (or as close to that as possible) was extremely beneficial for the youth. Being able to see how a mechanic, or concept, is expressed in Scratch alongside a similar concept written in JavaScript really helped to maintain excitement and deepen understanding.
When we first started using p5, we used the p5 desktop editor. However, during the course this editor became deprecated. We had our youth continue to use it throughout the course, but we plan to switch to using a text editor such as Atom - my personal favorite and a live-server package to run sketches. This has the added benefit of giving youth some practice time using a text editor and live server.
However, our program staff also used the alpha version of the p5.js Web Editor. This is a super early edition so you may encounter some bugs, but it's a fantastic way to dive in and test out some concepts! To do that, follow these quick steps:
- Navigate to one of the code examples below
- Click the sketch.js file
- Paste the entire file contents into the web editor
- Note: Make sure to select all and replace. Don't leave any stray { }!
-
Click the Play icon to run the sketch!
-
Hit the Stop icon when done!
The key benefit of using the web editor is that the interface is similar to Scratch in that there is a Play button to run your program and a Stop button to end it. This is conceptually similar to the Green Flag/Red Stop Sign in Scratch, and is also a great way to quickly demonstrate code.
The web editor is also a great way to prototype some ideas or to jump in and start experimenting with p5! Lots can be learned by tweaking and playing with the code, so I'd encourage you to have new learners jump right in! This removes the additional complexity of setting up a text editor and running a preview server. However, there is much room for additional learning around those concepts. Our youth did use a text editor and live server in previous JavaScript courses and there is lots of benefit to this approach.
Check out the Getting Started section on the p5js site for a deeper introduction to p5, especially if you're interested in using a text editor/live server.
Here is a collection of links to both the Scratch projects and Scratch studio as well as quick links to the p5 sketches contained in this repo. Many of the Scratch and p5 examples are meant to be presented in tandem with a brief overview/walkthrough of the code structure.
One suggestion is to first demo both the Scratch project and then the p5 sketch to establish a visual point of reference. Next, can be a step by step-by-step overview of the Scratch code structure, emphasizing the logic and block relationships. Then, facilitators can do a walkthrough of the p5 code, pointing out the underlying logic and structure and how it corresponds and relates to the Scratch blocks.
Here is a link to the entire studio: Scratch to JS - MakerEd Convening. Projects in the studio won't necessarily be in the same order as listed below. Click on the direct links for side by side comparisons, or feel free to explore!
- Hello World! - Color Switcher
- Background Changer - Random Number
- Mouse Press - Color Change
- Conditional Statement - Color Changing Circle
- Conditional Statement - Sprite Motion
- Function Call
- Hello World!
- Background Changer - Random Number
- Mouse Interaction
- Conditional Statements
- Keypress Interaction
- Keypress Motion
- Simple Vertical Motion
- Loops Part One: Without the Loop!
- Loops Part Two: With the Loop!
- Basic Function Drawing
One way that our facilitators found success with these resources is to show the Scratch example in a walkthrough, and then switch and do a demo and walkthrough of the corresponding p5 sketch. While the correspondence isn't always there, this provided enough of an anchor for the learning and the youth were able to deepen their understanding.
Even breaking down comparisons through contrived demonstrations is useful. Showing side by side examples of how conditional logic is handled in Scratch and in JavaScript is helpful for new learners. This is also true when explaining a concept such as looping. In fact, the function draw() that is part of p5 is a convenient parallel for the forever loop that is nearly omnipresent in Scratch programs.
These are the starting point for a toolkit. My goal is to continue to build both the Scratch projects and corresponding p5js sketches that parallel each other. Much of my initial p5 learning was accelerated by Daniel Shiffman's amazing videos and I'm eager to pay it forward with these resources and presentation.
In the last 3 weeks of the Game Workshop course, our youth integrated the wonderful and accessible p5.play library. This library extends p5 and provides additional tools for creating games, while still preserving the accessibility and beginner friendliness of p5.
I've been asked why we chose to teach our youth p5js in our programming progression. The beginner friendliness of p5 and the incredible, growing community around it are excellent entry points to the overwhelming world of JavaScript. I love the power, flexibility, and ubiquity of JavaScript and see it as a language with massive potential and learning pathways for youth, but I also recognize that these strengths are often also some of the pitfalls of the language. The incredible amount of libraries, frameworks, and toolsets can be confusing when searching for an entry point. As with everything else, we at DHF always seek a balance between accessibility and applicability. The applicability and demand for JavaScript is obvious and continuing to grow. P5 helps with making JavaScript more accessible to beginners.
Scratch allows for teaching programming concepts and computational thinking while providing an entry point with some easy wins for youth. Since Processing (and p5) was initially designed to be a programming language for visual artists, much of these easy wins are transferrable. While that's the case there often is still a need for a bridge from the visual Scratch and the syntax and (occasionally) quirky idiom of JavaScript. This is especially true for youth who are brand new to programming. Hopefully these tools will help educators that are looking for the next step beyond Scratch!
Once the core foundations have been established, youth can create (or recreate!) their Scratch projects in p5. The p5.play library helps greatly with this as it handles some of the heavy lifting behind the scenes. If youth really absorb the basics and are looking to continue with JavaScript game development, there are other powerful frameworks and libraries that can be used as the next step. One such framework is Phaser.io. Additionally, here are some additional tips and tricks learned from our process: More Tips.
These resources are available under the Creative Commons 3 License:
Attribution -- You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
Noncommercial -- You may not use this work for commercial purposes.
Share Alike -- If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
Source: Creative Commons Link