Waterbear PlaygroundBrazil, São Carlos, SP, Brazil

  • 46 Commits
  • 34 Pushes
  • 5 Deploys
Launch Site

Waterbear Playground

By Macambiras

Screencast
Quick Intro

Waterbear Playground is an environment to code in ProcessingJS using drag-and-drop blocks.

Description

It is a mix of two other amazing projects: Waterbear (http://waterbearlang.com) and ProcessingJS (http://processingjs.org). Like other visual programming languages like Scratch, with Waterbear Playground it is possible to code using just blocks. No syntax errors to newcomers. There is a block to almost all ProcessingJS command and some existing demos to be remixed.

Judging Instructions

Works better at Firefox.

1) Go to http://macambiras.2013.nodeknockout.com

2) Open an existing demo or "Get started!"

3) Click on Run to see the result

4) Click on Code to see the generated ProcessingJS code

5) Click on Blocks to see the blocks and edit them, back to Run and Code to see the result and generated code as well

6) Click on New to start a new sketch and drag-and-drop them at the workspace at right

7) If you want to save your creation, click on Save to gist

What they Used

Waterbear, ProcessingJS, Drywall (and all the libraries it provides like Express, Passport, ...), TogetherJS (unfortunately we didn't finished the collaboration side of our environment but we are working on that).

Who

Invites (1 pending)

Votes

Your Vote

Voting is now closed.

Other Votes

  • (18)
  • contestant

    Nature

    Great, I love the block based programming interfaces. Reminds me of when I used "Gamemaker" back in middle school. I wouldn't mind if you guys kept working on this! I could see this being used in early schooling to introduce our younger generations to programming.

    • automata
      contestant

      Thank you Christopher! Gamemaker sounds cool! Yes, that is the point, following the Scratch inspiration, teach newcomers to code in Processing ;-)

  • contestant

    Interesting way to code :)

  • judge

    Sellside

    Really interesting, documentation will be very important for users to get the most out of this.

    • automata
      contestant

      Hi Jon, thanks! Yes, we are thinking about interactive tutorials to explain better the way to code using the blocks to solve some simple problems.

  • judge

    Esri

  • judge

    Yahoo

    Really cool idea

    • automata
      contestant

      Hi Luke, thank you! We hope you enjoyed!

  • judge

    uTest

    The idea is ok, the execution seems incomplete. The blocks often have gaps, and the amount of blocks grows really quickly. I had to click on code tab and then back to blocks to actually see the blocks appear. Multiple blocks become clipped, and I could not get them into view. It was super easy to erase blocks, and I could not restore them. I wish the blocks fit better between themselves.

    Code generation also seemed weird, for example random color was translated as color(color(rand(), rand(), ...)) - so extra level of color calls.

    • automata
      contestant

      Hi Gleb, thank you for your feedback! You're right, the blocks are incomplete but it is something we want to fix in Waterbear and there was not so much time to do that during nko. We are planning to work on that, thank you about your comments on code generation too. In this way, we agree with your vote on 'completeness'. But we are sure that there was no Scratch-like visual language to code in ProcessingJS yet, and it is useful for people trying to learn Processing at a first time (e.g. no syntax errors). Maybe the votes in 'utility/fun' and 'innovation' could reflect better that.

  • judge

    RivalIQ

    Seems pretty cool and well done. Examples are good, but would be even better if it was applied to a real business or consumer problem

    • automata
      contestant

      Hi T.A., thank you about your votes! Yes, maybe it could be applied to real business but it is not the objective. Like MIT's Scratch and Khan Academy's CS, it is conceived to introduce programming and creative coding to learners of Processing. Starting with simple examples (and using syntax-errors-free blocks) they can create their own remixes while learning the main Processing commands. After that first contact with the language, they can migrate to Processing itself (or other language) and do more complex programs. We imagine that being used at workshops and class rooms.

  • contestant

    Spatial Automation Lab -- University of Wisconsin, Madison / 3D Systems / Bespoke Innovations

    This is a lot of fun!

    • automata
      contestant

      Hi Mikola, thank you about the love!

  • contestant

    UC Berkeley

    Love the idea, very reminiscent of Scratch.

    • automata
      contestant

      Hey Aurojit! Thank you! Yeah, Waterbear is strongly inspired by Scratch.

  • contestant

    Focus the Web

    Love the mix between visual programming and ProcessingJS. Amazing work guys.

  • judge

    Nodejitsu Inc.

    Cool! However I'm not sure if this will help newcomers, usually it are the errors that get you to the next steps. All the blocks for a few lines of codes seem to complicate stuff a bit. Still good job though!

    • automata
      contestant

      Hi Martijn, thank you! Yes, we agree with you, it is not a solved problem. Maybe it is more a shift in learning focus: instead of syntax errors the learner will focus on logic and problem related questions. Indeed, many blocks create complexity to visualize the whole code. We are interested in investigating ways to reduce this complexity, maybe using abstract structures (groups, zoom-in/out interface, ...). Maybe NoFlo guys can give some shots on that. Anyway, your feedback and acceptance was so important to us! Thank you!

  • contestant

    Really good piece of app. I'm pretty sure my designer collage would really like it (balintferenczi from our team). Unfortunately I'm not a processing expert, but I know how difficult is that ;) So this app is for dummies like me ;) Grat! (i missed the "back to home" navigation, I loved that home screen)

    • automata
      contestant

      Hey Levente, thank you for all the kindness and feedback! We'll try to get in touch with balintferenczi, we'd love to listen what he says :-) Hey, hey, you're certainly not a dummy at all ;-) All the best!

  • contestant
  • judge

    Gigzolo

    Interesting concept for building drawing program through visual composition. It's a great idea and perhaps this could be explored more for more application and refinement.

    • automata
      contestant

      Hi Henry, thank you for you vote! We love visual languages and hope it helps newcomers to get fast into programming. We hope to continue the implementation in Waterbear repos, please keep in touch!

  • contestant

    BrandExtract

    Very nice implementation. I'm always a big fan of IO blocks like this. Make learning Processing much easier.

    There are a few issues when I try to run the examples.

    The blocks do not show on first load, nor the code and the run tab. I had to do some other interaction for it to show up.

    There was an instance where I click on Code tab, and the UI messed up like this:

    http://d.pr/i/KNjf

    • automata
      contestant

      Thank you for the comments and caring for details Son! We love visual languages too and we hope to continue working on Waterbear and smash all those bugs. About the issue you screen shoot, I noticed that in Chrome (unfortunately after we did our last deploy to NKO :-). It seems to run better at Firefox.

  • contestant

    IOKI

    A very nice idea - still a bit complex to get the hang of it :)

    • automata
      contestant

      Hi Łukasz, thank for your vote! Yeah, we have to really polish the UI and smash lots of bugs. Maybe some tutorial inside sketch editor to make it less complex. Hoping to do that on Waterbear repos in next weeks. Please, follow us!

  • contestant

    Awesome idea and well executed. I can see this being especially good for students/scientists/engineers/journos trying to portray their results/data creatively.

    • automata
      contestant

      Hi Jonny! Thank you! Yes, that is imagined for programming students. We hope it can be used in workshops to introduce Processing and creative coding.

  • judge

    The Node Firm

    • automata
      contestant

      Hey Nuno, thank you for the votes!

  • contestant

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors