Google Blockly – A Visual Programming Language

In a week when Apple continued to go thermonuclear against anything Google and Microsoft continued to steer Windows 8 astray, Google announces Blockly a visual programming language and  computer programming learning tool. Here is a screenshot of Blockly in action:
Google info
The Blockly demo of a Maze solver is a wickedly tough programming task because users have available neither a test for success/end condition nor do they have any variables to use to mark the state of the Maze traversal.  Have a go at this problem – the solution appears to use levels of logic to encapsulate the four states of each block.$100 to the first user who delivers in the comments a solution to the maze problem.

Equally interesting is the Code example where a more complete set of  Blockly commands and syntax is available. What is interesting is the Blockly code can be instantly turned into JavaScript, Dart [Google’s new programming language], Python, or XML [but see the garrulous XML code – at least triple the size of any of the other 3 languages].

Here is a sample[Yes, Blockly has the look of Lego blocks snapped together, kids should love it]:
Best Google reviews
Above is the Blockly code


var message;
var Alist;
var x;

message = 'This is  Blockly in Action';
Alist = ['Start of Alist', 66, [message.length, Math.sin(90 / 180 * Math.PI), 'End of sublist']];
window.alert(message);
for (var x_index in  Alist) {
  x = Alist[x_index];
  window.alert(x);
}
window.alert('Thats All Folks');

And if you click on the JavaScript tab here is the corresponding JavaScript code.


var message;
var Alist;
var x;

main() {
  message = 'This is  Blockly in Action';
  Alist = ['Start of Alist', 66, [message.length, Math.sin(90 / 180 * Math.PI), 'End of sublist']];
  print(message);
  for (var x_index in  Alist) {
    x = Alist[x_index];
    print(x);
  }
  print('Thats All Folks');
}

And if you click on the Dart tab above is the corresponding Dart code.


message = None
Alist = None
x = None
import math

message = 'This is  Blockly in Action'
Alist = ['Start of Alist', 66, [len(message), math.sin(90 / 180 * Math.PI), 'End of sublist']]
print message
for x in Alist:
  print x

print 'Thats All Folks'

And if you click on the Python tab above  is the corresponding Python code.

If you read the Blockly Wiki, Google appears to have ambitious plans for developing Blockly. And of course its Open Source under the Apache License – you can get the source at Github.

Summary

Now I am no Google illusionist, I know that Google can be as driven as evidenced by  their privacy-flaunting Street mapping crews and the low rates they pay for Adsense Display ads. But Blockly is refreshing – a reminder that Google still manages to have a modicum of coding fun in the midst of a thermonuclear war with Apple and friends.

25 thoughts on “Google Blockly – A Visual Programming Language”

  1. You can use left-hand traversal to solve the maze:

    repeat forever
    do
    turn left
    if wall ahead
    then
    repeat while wall ahead
    do turn right
    move forward

  2. Here’s my solution to the maze problem: http://i.imgur.com/RHKDR.png

    The code:
    while (true) {
    if (!Maze.isWall(2)) {
    Maze.turn(1, “fry:_m6h”);
    Maze.move(0, “u4aslq44”);
    } else if (Maze.isWall(2) && Maze.isWall(0)) {
    Maze.turn(0, “wesl1:2j”);
    } else {
    Maze.move(0, “yedy-rf9”);
    }
    Maze.checkTimeout(“qgmdxjhe”);
    }[The serial numbers are just used to highlight blocks when run.]

    1. Help! I need this in verifiable “if not wallahead then” code or a screenshot of finished code.

      1. I’ve run that same maze multiple times and never had an issue – is he getting stuck somewhere?

  3. This will probably loop on some other maze.
    But works for that maze.
    For any maze something like recursion is necessary.

    while (true) {
    Maze.turn(0, “p6-o:u4n”);
    while (Maze.isWall(0)) {
    Maze.turn(1, “wnvm4nsy”);
    Maze.checkTimeout(“n5c_q8lr”);
    }
    Maze.move(0, “mw2kdtr-“);
    Maze.checkTimeout(“jl51ila1”);
    }

  4. Repeat Forever:
    if not wall to left
    then turn left and move forward
    if not wall ahead
    then move forward
    if not wall to right
    then turn right and move forward

  5. Robyn MacPhee

    I believe this is a general solution to the maze problem, although I haven’t tested it on other mazes, and it’s not entirely optimized.

    Also, I can’t seem to copy out the javascript, so here is a picture of my code.

    http://i.imgur.com/fOw0A.jpg

  6. I solved the maze problem with a simple “follow left hand wall” solution.

    Java code looks like this

    while (true) {
    if (Maze.isWall(1)) {
    if (Maze.isWall(0)) {
    if (Maze.isWall(2)) {
    Maze.turn(0, “rbvys-hq”);
    Maze.turn(0, “jxjimt62”);
    Maze.move(0, “ojehuc-g”);
    } else {
    Maze.turn(1, “p_4kz06i”);
    Maze.move(0, “knx2__dp”);
    }
    } else {
    Maze.move(0, “dbx6:28f”);
    }
    } else {
    Maze.turn(0, “p4wo67n5”);
    Maze.move(0, “abb7d.kt”);
    }
    Maze.checkTimeout(“w002l:01”);
    }

    !false;

    !false;

    [The serial numbers are just used to highlight blocks when run.]

    Basically it looks for a wall to the left, if there is one it checks if it can move ahead, if so it does, if not it checks if it can move right, if so it does, if not it checks if it’s in a dead end, if so it turns around and moves forward.

  7. Or, More correct, and right-hand mouse mode:

    Repeat forever do:
    if ((wall to right) and (not wall ahead)) then
    move forward
    else if (not wall to the right) then
    turn right
    move forward
    else if (wall ahead) then
    turn left

    Need to create an if-elseif-elseif module…

  8. Hi, you see the Maze problem more complicated than it is. The ending condition is embedded in the demo, and since the Maze never changes, you can write a deterministic solution such as:

    move forward
    turn left
    move forward
    move forward
    turn right
    move forward
    move forward
    turn left
    move forward
    move forward
    turn right
    move forward
    move forward
    turn left
    move forward

    If you run this, once the character reaches the goal it is animated and you win 🙂
    BTW do you see patterns in the above solution? IMO this is to invite kids to try and factorize the movements… patterns…

    Do I win the prize ?? 🙂

    1. Yes, there were four criteria when designing that maze. 1) A reasonably short solution for those who just stack absolute commands as you just did. 2) A repeating pattern to encourage them to take the next level and use a repeat. 3) A couple of dead-ends for either left or right wall-following algorithms. 4) Not looking like a swastika.

      Unexpectedly it was the latter that proved the most vexing. Sigh.

  9. while (true) {
    Maze.turn(0, “ms5ryb_g”);
    if (Maze.isWall(0)) {
    while (Maze.isWall(0)) {
    Maze.turn(1, “vfzx1ad:”);
    Maze.checkTimeout(“p_p6gddr”);
    }
    }
    Maze.move(0, “x0usuz91”);
    Maze.checkTimeout(“ntpo:wox”);
    }

  10. Maze problem solution

    repeat forever
    do
    {
    repeat while { wall ahead }
    do { turn right }
    move forward
    turn left
    }

  11. To All Blockly Programmers – these are interesting solutions. But I have to verify the winning code. Problem If Not WallAheadofWorktoDo_for_clients Then I_Would_Have_Victor_declared Else Wait_for_Weekend_when_I_Have_Time.

    Sorry about the Cludgy Code and delay in game penalty.

  12. How is the XML code supposed to be “run”? I’m assuming it’s meant to be processed by *something*, and I’m also assuming that the *something* doesn’t necessarily exist yet.

    1. The XML representation appears to just be an text equivalent form of the Blockly code. Presumably it would be used if you wanted to save your code to a flat file for instance.

    1. Right on – my follow up review will look at MIT’s Scratch and see if I can delineate the key differences.

Comments are closed.