Otto v1 Documentation
Important notes
After you have completed section Language system to How it all Comes together you will have to consult the Building Otto UI from scratch section in order have your Otto since the functionality being properly acsessbile depends on the UI
Due to the complex math in Otto's constraints system and this being a beginners guide you will have to have the Otto constraint subsystem folder in your directory when buidling the constraints system. The link to the folder is: https://github.com/IdeaLab-Design-Environments-Group/Otto/tree/main/constraints_subsystem
What this is
How to build Otto from scratch, enjoy.
How to Build Otto - Quick Start Guide
If you want to build Otto from scratch, here's the recommended order:
Start with the Language System (Chapter 02)
- Build the Lexer first - it's the simplest
- Then the Parser - builds on lexer
- Finally the Interpreter - uses parser output
Build the Renderer (Chapter 04)
- Start with basic canvas drawing
- Add coordinate system
- Add shape rendering
- Add interaction
Build the Shape Manager (Chapter 06)
- This coordinates everything
- Start simple, add features as needed
Add UI Systems (Chapter 13)
- Parameter sliders
- Drag and drop
- Interaction handlers
Add Advanced Features
- Constraints (Chapter 09)
- Boolean operations (Chapter 09)
- Export systems (Chapter 11)
Connect Everything Together (Chapter 15)
- Use app.js as the orchestrator
- Connect all the pieces
Each chapter has detailed "How to Build" sections with step-by-step instructions, code templates, and gotchas, personal issues that lost me days sometimes weeks, to watch out for.
for questions feel free to reach out @ emreday01@gmail.com