blockp5.js = p5.js + blockly

This is block programing example for p5.js based on Blockly

Try it !

• Demo

1. Exchange mouseX and mouseY.
2. Move background color from draw to setup.
3. Replace ellipse to rect.

Operations

• Edit blocks and click Run button.
• Cut:CTRL+x, Copy:CTRL+c, Paste:CTRL+v.
• Undo: CTRL+z.

Environment

• ES2015 later(ES Modules and Class)

Source code

• github

Custom Blocks

1. Use Blockly Developer Tools.
2. Save block files in p5/blocks and p5/blocks_code.
3. Marge block files to p5_block.js and p5_code.js.

Please see Blockly custom blocks.

License

Released under the MIT License. Please see LICENSE.

All Components have their own license.

Components

• Blockly, github

• p5.js, github

• prism.js, github

• Bootstrap4

• Font Awesome

• jquery