Peiling Jiang

PROJECT

b5: A Web-Based Visual Programming Language

How will the next generation learn creative coding? Do they have to learn English? Do they have to look up hundreds of pages of documentation and take classes? Do they have to write redundant code for features already well accomplished due to asymmetric information? b5 rethinks the future of creative coding in terms of education and accessibility in a world that increasingly emphasizes remote collaboration, internationalization, and personalized learning. It is a web-based visual programming language for graphics, fast prototyping, and fun.

Creative coding is extensively promoted by open-source interfaces and libraries, e.g., Scratch and p5.js. However, the existing tools are either for educational purposes, limiting their power when used for creation and production; or use text-based programming languages, making it hard to learn for beginners and visual learners; or installed as an application locally and read files with exclusive file extensions, constraining remote collaboration and sharing. Addressing these challenges, b5 makes creative coding more accessible, faster, and more enjoyable with a web-based visual interface – each function is represented by a block sequentially placed in the coding canvas and connected by wires indicating the flow of their inputs and outputs.

Using virtual blocks and wires, people with a minimal programming background can quickly prototype and build creative coding projects with the online editor featuring highly responsive live coding and embedded documentation. Instead of waiting for compilation and the code changes reflected on the canvas, b5 enables users to modify scripts on the fly and any changes made – additions, deletions, or parameter tweaks – will be instantly visible on the side of the code. Instead of looking up each function or feature’s documentation, the complete documentation is embedded into the interface and is directly accessed through a simple hovering of the component.

Inspired by p5.js, probably the most widely learned and used creative coding library, b5 is by nature multilingual and beginner-friendly and shares many similar concepts, e.g., the structure of the setup and draw loop, to help people get their hands on the interface with ease. On the other side, unlike text-based programming, each function is wrapped as a block and can be easily translated, shared, and imported using the interface. The more deterministic interface ensures fewer bugs because of the unfamiliarity of the syntax and function usage and makes the external libraries, with uncountable types of APIs originally, standardized and easier to be understood, imported, and used.

b5 is open-sourced and continuously evolving to be more stable, include more features, and provide its alternative to answer the question proposed in the beginning. Many questions from different perspectives are yet to be answered - How are the functionality and flexibility traded off for simplicity and accessibility? How will the community form and grow? The only way to approach the answers is to keep prototyping and experimenting, and all kinds of contributions to the project are more than welcome.

The b5 online editor can be accessed at https://b5editor.app, and its GitHub page is at https://github.com/peilingjiang/b5.