
Google Blockly - a visual programming language - antichaos
http://code.google.com/p/google-blockly/
======
ianbishop
I made a prime sieve: <http://i.imgur.com/Elk5A.png>

It was pretty fun.

JS generated isn't so bad..

    
    
      var n;
      var A;
      var i;
      var x;
      var j;
    
      n = 100;
      A = [];
      for (i = 0; i <= n; i++) {
        A[i - 1] = true;
      }
      var i_end = Math.sqrt(n);
      for (i = 2; i <= i_end; i++) {
        if (A[i - 1] == true) {
          j = Math.pow(i, 2);
          while (j <= n) {
            A[j - 1] = false;
            j = (j || 0) + i;
          }
        }
      }
      for (x = 2; x <= n; x++) {
        window.alert([x,': ',A[x - 1]].join(''));
      }

~~~
NeilFraser
You win the prize for most impressive Blockly program yet. Looking forward to
what you will write once we get procedures landed. \-- The Blockly Team.

~~~
a-priori
So that explains why I couldn't figure out how to call a procedure...

~~~
bromagosa
Same here, I was already going crazy hehe

------
jhuni
The name of this language immediately made me think of the blocky.io
(<http://blocky.io/>) visual programming language, which was written in Common
Lisp by David O'Toole before this language was developed. Blocky.io is _very_
similar to this language, in more then just name, it even has its own MIT
scratch like interface: [http://blocky.io/blog/wp-
content/uploads/2012/03/Screenshot-...](http://blocky.io/blog/wp-
content/uploads/2012/03/Screenshot-1-300x217.png).

------
dxbydt
i solved a problem featured on the yc company interviewstreet.com codesprint.

the problem: Count the number of one-bits from 0 to 2^n - 1, for n from 1 to
20.

my solution: <http://i.imgur.com/hUxt0.png>

when you run the solution:

    
    
         Number of one-bits in 1 bit numbers from 0 to 1 = 1
         Number of one-bits in 2 bit numbers from 0 to 3 = 4
         Number of one-bits in 3 bit numbers from 0 to 7 = 12
         Number of one-bits in 4 bit numbers from 0 to 15 = 32
         Number of one-bits in 5 bit numbers from 0 to 31 = 80
         Number of one-bits in 6 bit numbers from 0 to 63 = 192
         Number of one-bits in 7 bit numbers from 0 to 127 = 448
         ....

JS:

    
    
        var list;
        var x;
        var prev;
        var onebits;
        var doubleatprev;
    
        list = [];
        list[0] = 1;
        list[1] = 4;
        for (x = 2; x <= 20; x++) {
        prev = x;
        onebits = Math.pow(2, prev);
        doubleatprev = list[x - 1] * 2;
        list[1 + x - 1] = onebits + doubleatprev;
        }
        for (x = 1; x <= 20; x++) {
          window.alert(['Number of one-bits in ',x,' bit numbers    from 0 to ',Math.pow(2, x) - 1,' = ',list[x - 1]].join(''));
        }
    

Took 15 minutes to code up and 45 minutes to debug the array indexing :) One
of these days I'll be able to write the JS and get the Blockly instead of the
other way around - that'd be super awesome!

~~~
nonsequitur
Take some of that time to figure out the math and the code becomes trivial:

    
    
      for (n = 1; n <= 20; n++) {
        window.alert(n << (n-1))
      }
    

A short explanation: <http://mathbin.net/98435>

~~~
gjm11
A shorter explanation with no binomial coefficients in it: Write down those
2^n numbers once in order, and once in reverse order, and pair them off. Note
that each x gets paired with 2^(n-1) XOR x. So each number and its partner
have exactly n 1-bits between them. In other words, twice the number we're
looking for is 2^n.n; so the number we're looking for is 2^(n-1).n.

(More informally: Each bit is 0 half the time and 1 half the time, because you
can pair off x and 2^(n-1) XOR x. Therefore the total number of 1-bits is half
the total number of bits, QED.)

------
grakic
Hey, you can create new maze puzzles for your fun from the JavaScript console
(WebKit Inspector, Firebug,...)! First create a new function to paint the
custom map by pasting this code into the console:
<https://gist.github.com/2848451>

Next setup Maze.MAP matrix with value 1 for empty cell, 0 for path and 2/3 for
start/finish positions.

Now run loadMazeMap() to load your new challenge ;)

Example: <http://www.dodaj.rs/f/f/nM/4w3wop7u/custommaze.png>

------
dangrover
The UI for this reminds me a lot of Scratch from MIT.

~~~
DeepDuh
Ah scratch. Some years ago I wanted to show what cool stuff you can do with
computers to a 10y old boy. Found scratch and actually got hooked myself for a
bit ^^. Ended up with this (slightly embarassing thing):
<http://scratch.mit.edu/projects/DeepDuh/941811>. After programming a bit, the
limitations become apparent big time. Google's idea to implement this as a
Javascript parser is probably a good idea, this way some kids may make the
bridge to the actual program. Also, it's probably way way better performing.
If you like visual programming, have a look at subtext. IMO this is the best
idea for a visual programmig style, I hope it gets traction
<http://www.subtextual.org/>.

~~~
wccrawford
My niece was telling me about Scratch and how she knew what was wrong with
other people's code and how she'd fix it.

I am so freaking proud.

~~~
DeepDuh
You should be. I hope we will have some kids to show things like this some day
;).

------
majke
This seems to be done by an extraordinarily smart guy - Neil Fraser. He's
behind "google-diff-match-patch" [1] project, which is AFAIK the machinery
behind realtime collaboration on google docs.

Definitely worth watching.

[1] <http://code.google.com/p/google-diff-match-patch/>

~~~
espertus
I've worked with Neil, and he is indeed extraordinary. I'd say he's who I want
to be when I grow up except it's not clear he's grown up. See, for example,
the centrifuge in his living room
(<http://neil.fraser.name/hardware/centrifuge/>).

------
ArekDymalski
I don't understand. 1st it was part of AppInventor lab experiment. Google
closed it in December and MIT took it over. Now it's back? Why?

~~~
muyuu
Not enough Google brand ratio in it, I guess.

"Google blocky" > 50% brand.

------
lifthrasiir
I should note that the appearance of Blockly is very similar to App
Inventor[1]. It seems that visual programming languages with imperative and
sequential semantics converge to one direction: "blocky" combining core
primitives and custom primitives. In this sense I think it's THE future of
domain-specific languages.

[1] <http://www.appinventor.org/>

~~~
tluyben2
Came here to say this.

------
xarien
I noticed something interesting and disturbing after reading some of the
answers: people are more concerned with the length of the code rather than the
optimal solution (no extra turns / backtracking). This reminds me of
interviewing at MS about 12 years ago and all they cared about was the ability
to write recursive code.

IMO, yes, elegant code is fantastic, but don't lose track of why we write code
in the first place.

Edit: consolidating from post below.

<http://imgur.com/Nvy8u>

Here's a minimal solution with optimal logic (for this map) without hard
coding. It also ensures that there is a forward step in every iteration of the
while loop.

Basically it's just an order of precedence:

Turn right > turn left > go straight

~~~
saurik
So, I'm more disturbed that most of the answers people are posting aren't
general solutions: they happen to solve this maze, but don't handle corner-
cases (hah! I guess that's a pun ;P) of other mazes. You may as well just
hardcode the answer to this one.

I actually found a similar bug in yours: you will get trapped in a square and
be unable to exit, as you will constantly keep hugging the column along the
left, without ever deciding to finally exit off to the right. S=Start, G=Goal,
O=Empty

    
    
        S-O-O
          | |
          O-O-G

~~~
xarien
Keep in mind that I specified that this is an optimal solution for this
particular map. General solutions are great, but if you have additional
information for leverage, you use it. In fact, as stated in explanation of the
solution, the solution solves maps which the following precedence preference:
Right > Left > Straight. Just FYI, it's not a bug if you understand the
limitations of a solution.

General solutions for mazes (graphs really) generally follow a depth, breadth
or hybrid approach. I'm actually surprised that all of the general solutions
have been depth and none breadth. It's a bit more convoluted in this case as
you'd have to traverse backwards, but conceptually, it's no more different
than using a FIFO or LIFO.

In any case, with the tools given for this particular "challenge," a general
graph search is impossible as you can't record previous states. It's simple to
construct a map which causes an infinite loop.

A good analogy of my approach would be using a knowledge based finite state
machine over a genetic algorithm or neural net. Is it less elegant? Sure is.
However, it's also clearly defining a particular problem / solution pair with
certain limitations and expectations.

~~~
saurik
Then, as I said, "you may as well just hardcode the answer to this one". It
takes 15 blocks to hardcode an answer with the optimal solution and almost no
time thinking. This solution not only takes 15 blocks to build but executes in
exactly that much time.

Alternatively, you can spend a bunch of time proving to yourself that you have
a solution that takes advantage of properties of this specific maze that gets
you down to 10 blocks. However, as the result now has multiple levels of
nesting and is littered with comparisons and jumps, it is going to take more
time to execute and get to the end of the maze. I'd even go so far as to claim
it is no longer an "optimal solution".

As you said yourself: "yes, elegant code is fantastic, but don't lose track of
why we write code in the first place". I can understand spending the time to
build something complex if you at least solve the general problem, but to
spend more time in development to end up with a slower-to-execute answer that
looks like a general solution but isn't seems to fall into your own trap ;P.

~~~
xarien
You're assuming the fallacy that it takes less time for an explicit solution.
The solution took less than 2 minutes and most of that time was spent trying
to figure out how to manipulate the puzzle pieces. Now if you're talking
execution time, yes conditionals and loops add to the complexity of the
execution, but for any non-trivial graph, the implementation time of a non-
pattern recognizing solution would be much greater.

In any case, the points I'm trying to make are simple:

1) Solid program execution is much more important than line reduction.

2) Defining a problem space / limitations allows for better code / reuse.

3) When the implementation trade off is sufficiently small, it's better to
increase the scope of the solution for possible reuse.

------
arturadib
Quick feedback: Would be great if the front page included some demos already
built so we could have a better idea of what the final code looks like.

~~~
NeilFraser
Done. Thanks!

------
metamatt
The puzzle-piece representation of structure is neat, but at a 2-minute glance
it seems not to scale to real complexity.

One of the big ideas in programming is abstraction/modularity/reuse, and I
don't see how that fits in here.

(I found the "procedure" block, but I don't see anything that fits inside it
other than "break out of loop", which doesn't make any sense. And I don't see
how to call the procedure.)

So I find myself looking at the samples everyone's demonstrating here and
finding they're harder to read than real well-organized code.

------
th0ma5
I like the comment in the Maze demo's javascript:

    
    
        /**
         * Execute the user's code.  Heaven help us...
         */

------
agf
<https://imgur.com/VBsht>

    
    
      while (true) do
        if not (wall to the left) then
          (turn left)
        while (wall ahead) do
          (turn right)
        (move forward)
    

This uses the general maze-solving logic of following the outer wall in one
direction until you find the exit. It never turns then turns back or runs into
a wall.

~~~
saurik
This will not solve general mazes. S=Start, G=Goal, O=Empty

    
    
        O-O-O
        |   |
        O S-O-G
        |   |
        O-O-O

~~~
agf
I should have been more clear. That's the general logic for mazes where both
the entrance and exit are on the outer edge.

------
exDM69
Notice how statement blocks are different shape than expression blocks. That's
my favorite feature of this language.

------
antidoh
After I placed _turn left_ after _move forward_ , what was my first instinct?
Same as yours, I wanted to right-click _move forward_ and place the copy after
_turn left_.

------
grakic
Can this program be made any shorter?
<http://www.dodaj.rs/f/1K/vW/2gLz63rl/blockly.png>

~~~
JoshTriplett
An "else" would help; you can add one by hitting the + symbol on the if. With
the else, you can get the shortest program that'll solve the maze
(transcribing using approximate notation in lieu of a screenshot):

    
    
        while True:
            if wall(AHEAD):
                turn(LEFT)
            else:
                move(FORWARD)
                turn(RIGHT)
    

However, the addition of one more if makes the solution much faster and look
more sensible, by not turning to the right and immediately back to the left:

    
    
        while True:
            if wall(AHEAD):
                turn(LEFT)
            else:
                move(FORWARD)
                if not wall(RIGHT):
                    turn(RIGHT)

~~~
bockris
You can add an 'else' clause to the 'if' block by clicking the '+' which
launches a sub-editor.

------
draegtun
Reminds me of Sprog - <http://sprog.sourceforge.net/>

Back in the day I was looking at Sprog for some client-facing project so
probably worth looking back at it again. Here's a nice example of _Data
Munging with Sprog_ \- <http://www.perl.com/pub/2005/06/23/sprog.html>

~~~
logic
Big thumbs up for Sprog. Also, MIT Scratch, and Yahoo! Pipes.

------
iandanforth
Two feature requests:

As evidenced by this thread a 'Share' button would be great.

I'd love to be able to duplicate blocks by shift-click-n-drag.

------
xtreme
Definitely needs an easy way to share programs. Taking screenshot and hosting
it is not elegant at all!

------
kisielk
This past weekend at the Vancouver Polyglot Conference there was a session
with the author of Waterbear (<http://waterbearlang.com/>) that got a fairly
good turnout. It looks remarkably similar.

------
science_robot
I can't seem to find the end condition for the Maze demo. There is no
'goal_reached?'

~~~
suninwinter
When I solved it, the program just stopped running.

~~~
science_robot
My browser crashes presumably because I use 'while true'. Chrome Version
19.0.1084.52

------
outworlder
Looks like s-expressions to me.

~~~
brlewis
Blockly was influenced by App Inventor, which has Scheme inside:

[http://en.wikipedia.org/wiki/App_Inventor_for_Android#Histor...](http://en.wikipedia.org/wiki/App_Inventor_for_Android#History)

------
richwhite
Waterbear still has my vote for generating Javascript with the block based
coding metaphore

<http://waterbearlang.com>

------
jpalomaki
This could become pretty interesting, especially if there is a platform
aspect. Meaning I could easily extend this with my own elements and commands.

I can see some use for example in one application where we are importing data
from other systems. Something like this could be used to create a quite nice
user interface for creating simple programs that would manipulate and filter
the incoming data.

------
misnome
I like it a lot, and look forward to trying it out on my girlfriend to see how
a non-coder responds to it.

Whilst working out the while loop however, I put the code to loop outside the
block instead of inside, thereby making an infinite loop. Now the Chrome
browser window is completely unresponsive, and won't even close, so it seems I
have to kill chrome to get rid of it.

Other than that, cool!

------
sunwatcher
I've always thought it would be cool to have a backend environment similar to
labVIEW (but faster!). I use labview in my research and it is the best
solution I've found for encouraging / allowing for code re-use. This Google
Blockly, to some extent, seems to be heading that way - I'm looking forward to
seeing how it develops.

------
prohan
I'm surprised about the negative criticism. Looks like it would be a great
teaching tool for non-computer programmers.

~~~
andolanra
Possibly, but as far as I can see, all it adds to the mix (that textual
teaching languages, e.g. LOGO, don't have) is the certain impossibility of
certain syntax errors by only allowing certain parts to click together[1]. The
semantic model behind the system is otherwise identical to BASIC or some other
ALGOL-ish programming language, with loops and subroutines and mutable
variables and so forth. It is quite probable that this might make some tasks
easier, especially to a wholly inexperienced programmer, but what I assert are
the real challenges of learning to program—algorithmic thinking, code
organization, reasoning about program state, &c—remain just as difficult.

[1]: It also only allows variables to be specified from an extendable set,
preventing certain problems with unbound or misspelled variables. I can see
the possibility of also preventing type errors by constraining shapes further,
e.g. all integers could be circular while booleans are hexagonal, so _and_
would have two hexagonal spaces while _+_ would have two circles. If I'm not
mistaken, Scratch does something like this, although I do not know how far it
is taken there. It would be interesting to see how far this can be developed
to constrain the space of possible incorrect programs.

------
dxbydt
fizzbuzz: <http://i.imgur.com/QkLdz.png>

~~~
neilkod
I did a fizzbuzz of my own last night [http://neilkod.posterous.com/just-had-
to-give-googles-blockl...](http://neilkod.posterous.com/just-had-to-give-
googles-blockly-a-try-pretty)

------
greggman
Cool beans.

My suggestion based on no evidence what-so-ever is that I'd like to see
something like this in a richer environment.

To give a bad example, VB. The original VB had forms (maybe it still does).
You'd make a form. Double click the button and add code for "onclick"
basically. I guess maybe that was inspired by Hypercard.

In any case it was really easy to see how to make a useful program because of
the structure a form plus code snippets gave. If those code snippets were
Blockly that might be better for learning.

A maybe better example is Unity3D. You add a 3d object, attach a Script and
start editing code to move that object by supplying an Update() function or
something along those lines. Maybe a Step() where you can define state change
code snippets?

All I'm saying is a language like Blockly that removes the syntax errors,
attached to a larger framework (games, graphics, or webapps), seems like it
would make it far more approachable. You could actually make something useful
or fun in a less steps.

~~~
teamonkey
Unity3D has a few 3rd party visual programming languages already, but they're
flow-based unlike blocky.

[http://u3d.as/content/neo-pax/antares-universe-vizio-
free/29...](http://u3d.as/content/neo-pax/antares-universe-vizio-free/29D)

<http://www.detoxstudios.com/products/uscript/>

<http://www.hutonggames.com/index.html>

------
michaelkscott
Looks good, but I just crashed my chrome after putting a "repeat while>and"
block in between one of the move functions. Might want to watch out for new
users accidentally crashing their browsers while trying to do something
innocent.

------
bryanjclark
I remembered a trick about mazes: if you keep your hand on the right wall,
you'll eventually reach the end of the maze (assuming that the beginning and
end share a contiguous wall)

<http://imgur.com/i2uOj>

Fun puzzle!

~~~
spoxaka
The same is true for the left side:

<http://imgur.com/fwOMy>

------
hoodoof
Love this idea for teaching kids. Reminds me of the visual programming in
Click N Create / Multimedia Fusion / Games factory which was/is very advanced
and powerful.

Given sufficient resource and polish something like this could be awesome.

~~~
diminish
interesting attempt; things on my mind; what if I colorize my python code
based on block depth or what if we do a 3D version of this; and what if we do
a game of "angry blocks" to program.

~~~
richwhite
<http://scriptastic.greenbush.us> uses the Waterbear framework fo let kids
create scripts for the 3D objects they create using Opensim ->
<http://opensimulator.org/wiki/Main_Page> .. tons of fun when combines with
Scratch

------
olalonde
Weird, I'm getting redirected here (even in incognito mode):
<https://www.google.com/accounts/CookieMismatch>

------
jasonkostempski
Wall follower for the maze: <http://imgur.com/w8xoQ>

I'd love to do Trémaux's algorithm if they'd add the full list of block types
to the maze.

------
Iv
I want something to code on my smartphone, without having to type more than is
necessary. I expected this kind of thing to arrive. I hope they become more
than a little toy.

~~~
freehunter
Microsoft's TouchDevelop is pretty good for that. There's a surprising amount
of cool things being made with it. WP7 exclusive at this point, though.

------
minikomi
Would have been cool of them to make it touch event friendly .. Seems like it
would be a good fit for touchscreen logic noodling

~~~
Lerc
The Future page on the wiki mentions tablet support.

------
postfuturist
7 blocks has to be the shortest solution, right? <http://imgur.com/r50yY>

~~~
GreenNight
Even if it's "bigger" than just placing the [turn right] it's faster if you do
a:

if not wall right then turn right

instead.

------
dave5104
Did solving the maze remind anyone of Karel from Stanford's CS106A? :D Ah the
memories.

------
ctdonath
No way to save programs! Need either a text-to-Blockly importer, or use Google
Drive.

------
kpennell
Very cool, it has already been helpful it teaching me.

------
bawllz
Noooooo they finished it before I did =(

------
markbaker
google blockly isn't new. it was obviously inspired by www.waterbearlang.org

------
stewie2
I need "comment" block.

~~~
NeilFraser
Right-click any block, add comment.

~~~
logic
Interestingly, that causes an "Aw, snap!" in Chrome (beta channel) for me.
(Fresh load of the maze demo; right-click on the only block on the screen,
click "add comment".)

------
pwpwp
I ♥ it.

------
duckduckgouser
Another language that creates javascript?

~~~
mcantelon
It should really render to CoffeeScript first.

