Scratch for developers

Scratch is a visual  tool designed for children to learn how to program. Creating a scratch is one thing (ball bouncing around), Flash Player is required but what is the underlying code base?

The file available for export is a .sb file. If you change the extension to .zip and unpack the actual content is revealed as a bunch of svg image files and one project.json file. This file holds all the information. For example the actual script looks like this

 "objName": "Ball",
 "scripts": [[183,
 145,
 [["whenGreenFlag"], ["turnRight:", 15], ["doForever", 
[["forward:", 10], ["bounceOffEdge"]]]]]],

Embedding the scratch in regular HTML is easy: add https://scratch.mit.edu/projects/182755332 as an iframe. Scratch itself runs on ActionScript. An alternative is offered by Junebeetle with an online converter to an SWFObject. But we want to move away from Flash Player and the SWFObject project has already been discontinued anyway so what else is out there.

Phosphorus.js is a Scratch Javascript compiler, all it takes is this url

https://phosphorus.github.io/app.html?id=182755332&turbo=false&full-screen=true

ready for embedding as an iframe.  Behind the scenes this script makes an API call back to Schratch headquarters:

https://projects.scratch.mit.edu/internalapi/project/182755332/get/

which returns the json script file as before. The ball image is retrieved as an asset:

https://cdn.assets.scratch.mit.edu/internalapi/asset/10117ddaefa98d819f2b1df93805622f.svg/get/

Scratch 3.0 is expected in 2018 and will also be based on HTML5.

Links

Advertisements