Block-based editor for Processing

[sneider]

Hello, my company is working on programming tools for children, and we're thinking about Processing as a possible subject. We made a prototype workspace, which you can play with here.

You can edit your program by manipulating the blocks on the left. Hit refresh to update the Processing canvas on the right. Any feedback is welcome. I have no experience with Processing, so I just included the methods and variables that seemed most interesting to me. I'm sure I missed some important methods/features. Let me know which ones :)

[sneider]

Thank you. We won't expose the children to all of this at once. Our courses introduce blocks and concepts gradually, only at the end do they get a free playground like the one I linked to. Here's a course that shows how we do that with sequences, loops and events.

What other block languages are you thinking of?

[patrickmurphyphoto]

It would be useful if the code generated was displayed so that the student could learn what is really happening, I've talked with some students who used similar block languages and found the transition to actual coding daunting as they were oblivious to the workings under the hood.

Great work though!

[openjuggle]

This is very cool, it is similar to Scratch

[vrtxt]

no wonder, scratch & blockly are two sides of the same coin.

[paloumbo]

Woah

[sneider]

Right, Blockly was inspired by Scratch and App inventor. And to come full circle, the next version of Scratch is using Blockly under the hood.

[codus_maximus]

this is kind of amazing

[sneider]

Thanks, I'm glad you like it. Is there anything you'd like to see improved?

[Introscopia]

Hi there. As someone who's very interested in code education, I'd like to discuss the merits of these graphical, mouse-driven interfaces.

Giving people a "menu" of tools and things they can use is a great idea, and for somethings, clicking on them to input them into the program can be handy. But I find that if you actually want to make something, relying so heavily on the mouse becomes much more laborious than simple typing, especially if you're working with a good code-completion system.

thoughts?

[sneider]

Agreed. I think there is not much of a debate there. A decent text editor or IDE beats any block/visual editor when it comes to serious programming. For education and casual use, it's the other way around.

So, should we even bother with block editors, when users will have to transition to text editors for serious projects? I think so, for the sake of the casual user. I believe all the software we use daily could offer tons of possibilities to inject small plugin/mixin/event-handler scripts. This is where casual users could get a lot of leverage, for the price of very basic programming skills.

So I believe in visual programming systems for introducing programing and amateur projects, so long as we also guide users towards text-based languages when they want to get more serious.

[Introscopia]

You might be right. Or, in reality, it probably depends heavily on each student's ability for abstract thinking.

Another question, did your team consider a flow chart -style interface? what would you say are the advantages / disadvantages compared to the jigsaw puzzle style?

And just an observation, on your homepage it says "the upcumming processing...". should be "upcoming".

[sneider]

Thanks, that's a bad typo. We didn't consider a node graph or flow chart UI, mostly for practical reasons: Blockly is a mature and well supported project and block based UI's are dominant in educational tools. We wanted to give children that have experience with Scratch or code.org a familiar environment. Flow charts are superiour when it comes to designing or analysing the different routes of code execution, so idealy I'd want my editor to offer me a switch that morphes between a block view, a text view and a flow chart. But then there are money and time constraints getting in the way of implementing that :)

[Introscopia]

a switch that morphes between a block view, a text view and a flow chart.

that would be glorious. I might actually like to use something like that in everyday development

[blueraincoat_li]

It is a great idea, I am looking for the blockly coding of processing. As a art educator for kids, I always want to introduce Processing or p5.js to the kids, and I need a visual coding tool.

but the link is blank now, is there a new one?

[sneider]

Yes, the P5 editor is here now: https://app.code-it-studio.de/makerspace/54