The free fonts in Cuttle are mostly from Google Fonts and other freely licensed fonts.
With a Pro account you can upload your own font files.
You may be interested in Cuttle’s Connected Text feature. This will automatically connect dots on i’s, etc so you can cut out text in one piece. There’s also an option to “thicken” text so it’s not as delicate.
Cuttle’s snapping is very good (imo). But you have to drag from the snap point to the snap point. So if you want to snap a particular midpoint (say) to a particular corner, you need to drag from that midpoint to that corner. That is, your drag is explicit about the from and to snap points.
To export multiple components, we usually create a component (called “Cut Layout” for example), then drag out each of the other components (the pieces) into that component.
There is a modifier called Flatten which might be useful for you for doing lots of Boolean operations at once. I think this video shows the workflow, https://www.youtube.com/watch?v=LGHKRfIC6QA
Yes it’s all JS. You could copy and paste your data in and then process it and create geometry. (Sorry we don’t have any data import other than copy and paste at the moment.) Our scripting documentation is pretty good: https://cuttle.xyz/learn/scripting/getting-started-with-scri...
We are experimenting with being able to read pixel values of raster images. Coming soon likely.
Perhaps some kind of middle tier that gives full access to the Editor but does not give full access to the Pro templates makes sense. Many of our customers subscribe for access to those templates rather than the Editor!
You are also free to subscribe when working on a project and need the Pro features, then cancel when you’re dormant. We don’t delete your projects when you downgrade to free, you can still access/edit/download them.
Hmmm.. I would say Apparatus is no longer under active development. Researcher Joshua Horowitz was doing some work on it for a bit, but yeah I don’t think it’s changed much in several years. It should be regarded as a research project that scouted out several areas of the “programming experience” world that others can build on.
Thanks for the suggestion! Yes, we should do this. I've been seeing more and more people use Cuttle for 3D printing (exporting a DXF, then bringing that into another program to extrude and output a STL).
A Cuttle project is — behind the scenes — a program. Each “component” is a function. “Modifiers” are functions that take input geometry (and parameters) and use JS code to create arbitrary output geometry. All of this code can be live edited.
At the same time you can do arbitrary “drawing” with a bezier pen tool and move/transform shapes. In this case you are essentially using the canvas drag-and-drop to manipulate literals in the program.
But fundamentally a Cuttle project is a program and the Cuttle Editor is an IDE that looks like a vector editor on the surface.
Because of this I’m not sure how much of Cuttle could be grafted onto a program whose architecture is more rooted as an editor of static vector graphics. I do know that Inkscape has some “live effects” which are similar to Cuttle’s “live” modifiers.
On a free account you can create up to 5 projects in the Cuttle Editor (and you can delete them if you want to create more...)
We don't laser cut anything for you. You can download your project as an SVG file (or DXF, etc) which you can then send to a laser cutter hooked up to your computer.
The product is designed for people who have access to a laser cutter, e.g. at home or at a makerspace.
From a programmer's perspective, you can think of Cuttle as a direct manipulation vector editor (like Inkscape or Adobe Illustrator) that can be driven with parameters and JS code where you need it.
Unlike my previous research projects, this is a commercial startup mostly catering to laser cutting small businesses, though you can use it for anything where you want a 2D vector editor + some programmatic capabilities.
I'll try to answer questions that come up in this HN thread.
Thank you for sharing your work Hannah! Very cool stuff!
From one perspective, Jobs and Raskin ended up going down two opposite paths.
Raskin emphasized that "modes" were a major cause of UI problems. Essentially you want a UI that the user can habituate to as strongly as possible, so that all one's attention can be focused on the actual task and all of the administrivia you need to do tell the computer your intention are handled subconsciously. Like touch typing at a higher level.
The issue with modes is that they break habituation. If performing a given UI gesture does one thing in one mode and another thing in another mode, you can't make that gesture a habit. For example: Cmd+Z is a conventional gesture that many applications interpret as undo. If the keyboard shortcut changed between applications (or worse Cmd+Z meant something else in another application/mode), it wouldn't be so habitual and you'd be less productive.
Raskin was very serious about no modes. The Cat for example didn't even have an on/off mode. It would go to sleep to save power, but if you started typing it would buffer all your key strokes and have them in your document by the time the thing woke up. That is, you didn't have to switch from off mode to on mode! And because you were always in a document (that is, there were no separate application modes), you knew that typing some words always did the same thing, so the scheme really worked.
On the other hand, Apple has really pushed, especially since iOS, on the "App" model. Applications are, of course, giant modes. And the strategy has been to push a separate App (mode) for every single use of the machine. So rather than learning a few powerful gestures and then combining them to do disparate tasks, users need to learn a separate, surface-level gesture complex (App) for each individual task they want to do on their machine.
Which is more efficient or appealing? On what time scale of use?
Did Apple end up this way because Apps are a more natural fit for a consumerist model? "Want to do this task with your machine? Don't bother figuring out how you can do it yourself. There's an App for that!" No Modes vs Buy More Modes?
Raskin's book, The Humane Interface, talks extensively about his UI design philosophy. In addition to explaining the above problems with modes, he discusses how to actually design a computer system with no modes (I believe an elaboration of what he did with the Cat). He also explains other really important UI principles and their ramifications, for example, "The user's data is sacred" (hence undo).
PS:
Raskin's definitions: A gesture is defined as an action that can be done automatically by the body as soon as the brain "gives the command". So Cmd+Z is a gesture, as is typing the word "brain". What constitutes a single gesture will be different depending on the user! A mode is defined as any situation not at the user's locus of attention that would cause a gesture to perform an action different from another mode. So "pseudomodes" where the user holds down a modifier key or holds the mouse button while performing a drag gesture get around this since they keep the user's locus of attention on the fact that they are performing the pseudomode.
I think both the above definitions are still a bit problematic but Raskin's definitions are better than any other that I've heard. I hope there are more people who study and discuss these deep UI design issues! What do you think about modes?
This is a really nice cleanup/update on Knockout. The source code at ~400 lines is very understandable. I've looked at a lot of reactive frameworks, this is great work!
I'm glad you're thinking about how to manage garbage collection. It's tricky with these push-based frameworks.
Have you given consideration to asynchronous vs synchronous reactivity? The advantage of asynchronous is you don't propagate the changes as they are made but instead once all the changes are done. You can avoid redundant computations this way, for example if a bind is dependent on multiple observables that change in the same "turn". And in some ways (worth debating) asynchronous semantics are more understandable than synchronous since unknown code is not being run underneath you while you are in the middle of changing observables.
Engelbart was perhaps the most important influence in realizing the computer as an interactive medium.
Around 1960, most were still thinking of the computer as a sophisticated calculator. You give it a problem, it spits out an answer. Even the idea of artificial intelligence was framed this way.
Engelbart realized the potential of the computer to augment human intelligence. High bandwidth, continuous interaction between human and computer allows the computer to be an extension of the mind. Chasing this vision led him and his team to naturally invent the mouse, bitmapped screens, hypertext, networked computers, etc.
IMO, more important than these individual inventions is Engelbart's foundational principle that technologies change what the mind is capable of thinking. And by augmenting our thinking, we enable ourselves to create new technologies. Mind and technology co-evolve. This is "bootstrapping" in the purest sense and the source of that profound feeling many of us have experienced while augmenting our minds through programming and other rich, creative interactions with computers.
The technology used here to do the image processing is GLSL, in particular fragment shaders (aka pixel shaders). GLSL is a very small C-like language that's become a standard for GPUs. GLSL code gets sent (as a string) to the GPU by javascript via the WebGL API.
Seriously is a JS library for handling the boilerplate of WebGL, composing and compositing multiple shaders in a pipeline/graph, and adjusting their parameters. In addition it comes with a bunch of pre-written shaders.
Shaders themselves are a lot of fun to write, IMO. A pixel shader is just a function that computes a color given an input pixel location. (A shader can also take in additional input such as "textures" to sample from, e.g. a video frame.)
The shader is run with massive parallelization in the GPU. In theory every pixel can be processed simultaneously. This is how these effects can run in real time.
Here are some more examples of what you can do with pixel shaders (including sampling from the webcam in the browser -- should work in Chrome and FF),
http://pixelshaders.com/examples/
When you drag and drop the shapes, the drawing changes in non-trivial ways. For example, try dragging a shape deep down in the recursion hierarchy.
In a normal drag-and-drop application, it's fairly easy to compute how to, say, adjust the left/top of a div in response to the mouse movement events. However, with Recursive Drawing, I knew that there were certain properties I'd have to adjust during a drag operation, but because of all the nested transformations, it was tricky to figure out the math of how exactly to adjust them.
So instead, I set up a constraint problem. I know that the exact spot I've mousedown'ed on needs to stay under my mouse no matter what. That's the fundamental constraint of the drag-and-drop gesture. Then I set the properties that I knew I could change (e.g. positions or scaling/rotation of a specific shape) and set them as free variables in an energy minimization function. I solved the problem numerically using numeric.js's uncmin (unconstrained minimization, an algorithm originally written in FORTRAN, I believe).
I probably could have figured out how to do this without numerical methods, but this approach was a god-send when rapid prototyping the interactions.
Another good use of constraint systems for UIs is Ivan Sutherland's Sketchpad. His paper on it is long but really worth at least skimming through if you're interested in developing next-generation UIs!
http://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf
I also really like Rebecca Fiebrink's Wekinator, which is a framework for making musical instruments from arbitrary inputs. The approach is similar in that she uses numerical methods to solve for the constraints (the training data).
http://wekinator.cs.princeton.edu/
I think there's a lot of potential in constraint-based UIs and for me it's the most compelling reason to have good numerical libraries in javascript.
I've used http://www.numericjs.com/ to handle basic vector/matrix arithmetic and for numerically solving minimization problems to create constraint-based UIs.
Can you give an overview of how your library is different? Is it just a different set of math tools or is the architecture somehow different? Thanks!
Gutenberg didn't invent a machine for quickly producing books, he invented a machine for quickly producing machines for quickly producing books!
That is, his key innovation was a way to mass-produce the characters (the movable type) which could then be arranged to mass-produce the printed pages.
First, individual characters were carved from steel (each taking about a day to make). This was the only part of the process done "by hand". Every other element of the process was produced through some form of (repeatable/arrangeable) transfer of shape/information.
The master characters were hammered into brass to create a mold which could then be reused to cast multiple copies of a character. Each page had thousands of characters and Gutenberg's shop had multiple presses going at a time, so they needed lots of these characters on hand (50,000 is a conservative estimate).
The masters could also be easily transported to another city. These masters (plus raw materials of course) were all that was needed to set up a new print shop. This enabled the printing press technology to quickly spread throughout Europe.
I think it's a good analogy for the power of software :)
With a Pro account you can upload your own font files.
You may be interested in Cuttle’s Connected Text feature. This will automatically connect dots on i’s, etc so you can cut out text in one piece. There’s also an option to “thicken” text so it’s not as delicate.
You can try a live demo here: https://cuttle.xyz/@cuttle/Connected-Text-29M9IXUSr5yr
That page also describes the algorithm we use to make this work with any font.