b5 is for graphics, fast prototyping, and fun. Using blocks and wires, non-programmers can quickly build and share creative coding projects with the online editor featuring live coding and embedded documentation. Inspired by p5.js, b5 is multilingual and beginner-friendly.
Watch me present it in Interactive Media Arts Capstone 2021!
How will the next generation learn creative coding? 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 lack of information? Do they have to learn English? b5 rethinks the future of creative coding in terms of clarity, accessibility, and customizability in a world that increasingly emphasizes remote collaboration, internationalization, and personalized learning. b5 is a web-based visual programming language for learning and fast prototyping for people with minimal to no programming experience, leveraging novel features compared to other visual programming languages, including (1) position-based sequential execution (blocks are executed in order based on their positions in the code canvas), (2) customized blocks (users can use the predefined blocks and the graphical interface to design and construct new blocks), and (3) effect blocks (block that affects other code blocks based on their contextual relationship instead of wire connection). b5 makes programming easy to learn and encourages programmers to explore and try, while more analysis is needed to assess its usability and long-term effects when used as the learning platform for beginners.
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 using 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 (one of the major differences with the current visual programming interfaces) 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 and 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 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 initially, 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 questions proposed in the beginning. Many questions are yet to have an answer. 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.