Introduction
Otto Docco
Building From Scratch
The Language System
Shapes and Transforms
Renderer System
Paths, Handles, and Selection
Building path rendering for turtle graphics, bezier curves, and complex polygons. Implementing interactive handles for shape manipulation and selection systems for user interaction.
Shape Manager
Central coordination system that syncs UI sliders, canvas interactions, code execution, and Blockly blocks. Prevents circular updates through source tracking and manages bidirectional synchronization.
Bidirectional Systems
Keeping code, Blockly blocks, and shape objects in sync without infinite loops. Implementing sync flags, debouncing, and preventing circular updates between text editor, visual blocks, and shape representations.
Blockly Integration
Adding visual drag-and-drop block programming to your language. Defining custom blocks, generating code from blocks, and maintaining two-way sync between blocks and text code.
Constraints and Boolean Operations
Building a parametric constraint system for relationships between shapes (distance, coincident, horizontal, vertical). Implementing boolean operations (union, difference, intersection) for combining shapes.
Edge System and Math
Representing shapes as collections of edges (lines, arcs, bezier curves) for precise interaction, snapping, and measurement. Building mathematical utilities for geometric calculations.
Export Systems
Converting shapes from JavaScript objects to SVG (for web/graphics) and DXF (for CAD/manufacturing). Handling coordinate conversion, unit conversion, transforms, and style preservation.
Turtle Graphics
Implementing Logo-style turtle graphics with commands like forward, turn, pen up/down. Managing turtle state (position, angle, pen state) and converting movements into renderable paths.
UI Systems
Building drag-and-drop shape palette, interactive UI components, and user interface systems. Implementing drag detection, visual feedback, code generation, and seamless integration with the editor.
Debug Visualizer
Development tools for visualizing system internals: shape bounds, edge data, anchor points, constraint relationships, performance metrics, and coordinate system information.
How It All Ties Together
Complete system overview showing how all components integrate. Startup sequence, component initialization, data flow, event handling, and the complete picture of how Otto works end-to-end.
Building the Otto UI From Scratch
Complete step-by-step guide to building the entire user interface of Otto. Detailed explanations of HTML structure, CSS styling, layout systems, canvas container, editor panels, control bars, parameter manager, shape palette, responsive design, and accessibility considerations.
Published with HonKit
Introduction
Introduction
Otto Docco .)
results matching "
"
No results matching "
"