Gizmo Draw is cool…but what is it good for?
My Bitbucket account contains mountains of code, written over an entire career of years. Some of it is pretty good, and some of it, not so much. You’ve got to learn somehow, and if you want to keep up in the tech world, you’ve got to fool around.
To me, programming languages are the pinnacle of cool, and I love to explore them. But the one thing I haven’t done is to try to write one. That is a serious endeavor, generally reserved for the most determined and accomplished coders. I’ve got the “determined” part down pretty well, but the “accomplished” part, that’s debatable. But still, the best way to learn is to jump in and try.
The Origin Story for Gizmo Draw
When I’m hunting for a new programming project, I’ve got two criteria. First, it has to be interesting and second it has to be doable without an enormous time commitment. I’ve got a day job, and this is hobby stuff. Plus, my interest tends to wane after a few months on any given thing. A few hours in the mornings on the weekends over a few months is the allotted scope for any new hobby project. The other big plus is if I can run it in the browser, especially as a Single Page App (SPA). Then I can host it for free and make it available to others at no cost with no ads. No databases, no servers, just shared files. Easy peasy.
Now comes the hard part — figuring out how to turn those criteria into an actual project. I’ve been a fan of mermaid.js and PlantUML for some time — they are cool little “UML diagrams as code” tools that are helpful for quickly creating simple architecture diagrams and storing them in markdown documents. So my idea was to do something similar, but using a more traditional, simplified, javascript-style language instead of a purpose-built language for creating UML diagrams. I also wanted to include drag-and-drop features like those in commercial drawing tools like draw.io and Gliffy.
The Fun Part
Once you’ve got an idea, then you have to figure out how to approach the solution. In this case, the solution looks something like this:
Source Code -> Lexer -> Parser -> AST -> Interpreter -> Draw the Diagram
And we also need to go the other way:
Drag-and-drop -> AST -> Generate the Source Code -> … same as above
AST means Abstract Syntax Tree, in case you’re not into compiler design. It’s basically a tree-like representation of the source code. The tree can be “walked” to do things like run commands to make diagrams.
Notice I’m building an interpreted language. Compiled languages are a lot harder to create, and are way out of my league, and also my project scope rules. But, interpreted languages are neat too, and they give you the flavor of language development. Plus, there are plenty of successful ones out there — Javascript, Python, and a zillion others.
The Hard Part
Doing is a lot harder than dreaming. Without getting into the details, I’ll tell you I’m on version 2 of Gizmo Draw and I’ve been at it for a year. So much for my ground rules. But this is an interesting, challenging project and I’ve been able to stay with it. The first version was awful, but I learned the basics of language development, and also of what actually needs to be done. Thank goodness for YouTube videos. The second version is also awful, but less awful. And I now have Cursor, the AI powered IDE, which is helping to move things along a lot quicker. If you’ve used AI powered IDEs, you know they are super powerful and are changing the face of software development. They are also a double-edged sword and make it easy to get into unrecoverable trouble if you’re not careful.
Without Further Adieu
There’s still a lot of work to do, but it’s far enough along for show-and-tell. Figure 1 shows the basic UI for creating drawings. This particular example is a static diagram, but the language also lets you create dynamic drawings, including games with physics effects. Drag and drop some rectangles, connect them, change their properties and add text using the property editor in the lower right panel, and you’re done. The source code in the left panel is created for you.
Figure 1 — Gizmo Draw User Interface
The tool bar lets you:
- Create new programs
- Load your saved programs
- Save programs
- Load example programs to make learning Gizmo easy
- Run your program
- Run in full screen mode
- And format your code
Of course, the downside of “no database, no server” apps is they aren’t great for sharing content. So Gizmo lets you send your programs via email links using the “Share” button, creating links that look like this:
Notice the query parameter “program=”. That is set to the compressed, base64 encoded version of the program. If you click the link, or copy/paste it into your browser’s address bar, you’ll get redirected to Gizmo and see that program loaded into Gizmo Draw (that example is for Figure 1).
If you are willing to go beyond drag-and-drop and write some Gizmo code yourself, you can do some neat things like build an animated birthday invitation, as in Figure 2.
Figure 2 — Animated Birthday Invitation
Shape animations are created with Gizmo code that looks like this:
let driftRight = { duration: 40, x: 1200, y: 0, ease: “power1.inOut”, repeat: -1, yoyo: true }
CloudFluffy { x: 0, y: 80, width: 180, height: 120, opacity: 0.7, fill: "#fff", animation: driftRight }()
Under the hood, GSAP is used to create SVG animations, and canvas-confetti is used to create the confetti explosions.
You can also use Gizmo to create simple games, like the pacman game in Figure 3 and the cannon game in Figure 4. These require a bit of programming skill, but even if you are not a programmer you can start small and use Gizmo to learn the basics of programming. Gizmo has lots of built in examples with complete code, including for these examples, so you can use those as a jumping off point. Use the
button in the source code panel to see about 20 different examples.
Figure 3 — Pacman Game — Move the Pacman and capture the present
Figure 4 — Cannon Game — Fire the Cannon and knock the red ball into the trash can
Fun With Reactivity
What I really like about the Gizmo language is that it has built-in reactivity. For example, to make a slider move a shape, like a circle, you can write code like this:
let c = center()
let distance = slider {
label: "Distance",
x: c.x
y: 100
min: -c.x
max: c.x
value: 0
}()
let c1 = circle {
x: c.x + distance,
y: 300
}()
Notice, there are no event handlers. When the slider moves, the value of the slider is assigned to the distance variable, and the circle receives the update and repositions itself automatically. There are other languages that do this but it’s rare. I like it!
Reactivity is fun, but it’s not for everything. Sometimes you need an event handler. In this case, I tried to make the language as declarative as possible, while still maintaining the familiar flavor of javascript. Here’s an example for how to toggle a color with a button.
middle()
let btn = button {
x: 100,
y: 100,
label: "Toggle Color"
}()
let box = rect {
x: 100,
y: 250,
width: 100,
height: 100,
fill: "#ff0000"
}()
let colorToggle = false
btn.click {
colorToggle = !colorToggle
if (colorToggle) {
box.fill = "#00ff00"
} else {
box.fill = "#ff0000"
}
}
Give it a Try
Give it a try at https://draw.gizmocms.com. If you create an interesting program use the share button to create a URL for your program and paste it in the comments of this article.
Happy coding!