Positional Control in Node-Based Programming

Visual programming languages enable novices to code with a lowered barrier. These languages typically employ one of two popular design approaches — block-based editing (e.g. Scratch), which allows users to control the execution order of code blocks, and node-based editing (e.g. Grasshopper), which enables users to control the data flow through nodes and wires. We propose integrating these two approaches by utilizing positional control in node-based programming to visualize and allow manipulation of both the execution order and data flow. A grid system organizes blocks and determines their sequence. Effect block is introduced, which controls other blocks within its effective range through positional constraints. As relocating blocks is easier than wiring that targets tiny inlets and outlets, we aim to shorten the feedback loop time and encourage exploration. We present b5, a web-based novel visual interface for creative coding, to demonstrate and evaluate this design.