Graphite is a new open source, note-based non-destructive editor.
Before we talk about what non-destructive needs, we need to talk about what destructive
design means.
And in graphics design, we have generally like two main data types.
We have rust data, which is your general pixel-based data.
So if you take a photo with your camera, that's rust data, and we have vector data.
Vector data is a sort of clean mathematical representation of your shapes.
And with rust data, you can do destructive operations, such as brushing or changing colors.
And that happens on a, like basically just in memory representation, it's a table
and you change the data.
And for vector, you can also do operations on the vector data.
For example, in this case, we cut out the second circle from the first circle.
That's also a destructive vector operation.
And in graphite, we want to make this non-destructive.
Non-destructive editing has, well, it's used in industry, but mostly in 3D applications.
So free software, like Hedini or Blender, they do use non-destructive editing to now
you to generate scenes and generate content.
And they do this through a note-based approach.
That's the second sort of buzzword I mentioned in the title in the introduction.
And based means that instead of destructively applying operation to a piece of data,
we encode the operation in our document.
So in this case, we have the smudge operation.
So we have just an image, and we can do smudge.
And regular editing software that would just apply the smudge and it would change the pixels.
If you do it in the note-based way, we can think of it as having an image note, which then
feeds into the smudge note, which applies the operation.
And the big advantages that we basically encode the user's intent.
And if the user wants to change, like at some point later, in the editing process, they decide
they wanted to change something about the source image, maybe they didn't like the aspect
of the project.
Of course, this is just a place, although if you have a proper photo, you want to smudge,
then you can no longer change the source image.
With a note-based approach, we encode the operation that the user did, the smudging, and
we can then recalculate how that would look with the new source image.
And what we do in graphite is that we, it's basically a toolbox for transforming user editing
operations that you would find in any other graphics editor into this note-based system.
This is just a quick overview, this is a design mock-up, we're not fully there yet,
also you live demos in a second.
But one of the general concepts is that we have this sort of duality between the note-based
editing, the procedural note-based editing, and regular editing image editing tools that
many users often know you with.
One instance we have this layer panel on the bottom right, which is like what most users
often know you with, and this is actually byjective to the graph representation in the
middle.
You can toggle this graph representation, I'll show you that in a second.
But we can encode the entire artwork and look at it through both the note-based lens
or the traditional editing lens.
This allows us to have a familiar UX design and familiar user experience and also give
the user all the power and tools they want.
And this allows for some exciting possibilities.
So let's say you want to build a trading card game.
Trading card games are fairly standard, like you have some a title text, an image, maybe
stats for the different objects in the card, like a nice frame around everything.
That's something that you could, like, possibly do in graphite, you could build a pipeline
in the editor, which ingests a CSV file, or like a row of a CSV file, which contains
the path to the source image, the title, and then you can use graphite as a language to
build this procedural construct, which can be rendered out as a card for the trading game.
And you could, of course, also turn this into a CLI application to do batch processing
or automate workflows, general, like, templating.
And it's, and one of the nice features is that we can read, like you can hack it, complex
functionality, you build in graphite, and reuse that, because we essentially, we're essentially
building a full programming language.
The graphite project, we're working on this for about four years now, and we did choose
rust as our language of implementation, and are quite happy with it, because we are both
target, well, we have first of all targeting the web, because we want to provide a good
editing experience on all platforms, and the easiest way to achieve that right now is to
have it run on the web using WebAssembly, and currently we're mainly focused on vector editing,
but we do have rust integrations, and we're aiming to expand that in the future.
And we're essentially fusing through technologies.
One of them is our note-based functional programming language, graphene, and the graphite
editor, which is the tool set that allows you to manipulate it.
You can think of graphite as the IDE for the graphene language.
And we will work on adding animations.
I do also have a demo for you, animations, but yeah, speaking of demos, graphite is an
image editor, so you can do all your regular editing operations, and if I draw a rectangle,
what that ends up as is a rectangle, which feeds through, well, the rectangle tool operation
is transformed into the note representation, which is the rectangle, feeding through the
transform, we assign a fill, it can also change the fill to something more visible, we
add a stroke, and this is then shown to the user.
If we can also use procedural features, in this case, this is the Christmas lights demo.
I can select this, and if I drag this out, the Christmas lights follow along the string.
This is one of the use cases for procedural editing, and how that is implemented is pretty
simple.
We just take this line, which is highlighted in blue, we then interpolate it using
this line, this is the spine interpolation, and we then sample this line along its length
in different intervals, and we copy this light bulb to this line, and that gives us this
nice snake feature where we can drag this and manipulate it.
This can also be used to, like, this concept of proceduralism, can also be extended to more
advanced images, this book example is the changing seasons artwork, and if I use this
lighter, I can actually transform and morph between these two images, and I could of
course also change the color, the gradient, I want to, in this direction, this would change
the colors, and all this is, this note graph is a bit more complicated, but still similar.
I, oh, it's not 20, 20, 40 more, so this is just, I can show you how this is made, like, oh,
first of all, so this number, this number counter is actually procedurally generated, this is just
the seventh segment display, I get a number input, and then this is a matrix of logical
alls to convert the number into turn the segment on or off, and this allows you to build
like a seven segment display within graphite and export that as a note, so that's just the note,
I can feed a number in and get the image output, and that's generally just the use case, or
shows you the power of this system, and we're not just a vector editor, we do also support
raster editing operations, this is a mandalbrot, a mandalbrot set, yeah, you'll recognize this,
and this is rendered live in graphite, where this is essentially just, we do render
graphite, well, traditional image editors, you have to decide upfront what the resolution of the
final image will be, and graphite, we can only look at what the user currently sees,
and we only render that at that resolution, and in a sense, the graphite editor is much more similar
to game engine, because we have this functional description of our application, in this case,
mandalbrot feeds into, I can output, which is the region we can see, and we then have to render
every frame this note graph, and that's also one of the reasons why we use rust to allow us to
actually get away with re-rendering everything every frame, and this is currently running in the
browser single-freaded, we are working on adding a WGP implementation, but it works pretty fine for
just like a mandalbrot zoom, which is not a special feature, it's just built into graphite,
and you never have to, when you combine raster and vector, you don't have to
rasterize the vector to be able to work with both beta data types, because we can do that
live at the desired resolution, you can also show you now the quick little demo,
yeah, this one, this is another example way of how you can sort of build reusable
features, yeah, all right, and thanks a lot, I'll leave you with our way to find a slide,
and if you do have questions afterwards, just come to me, I do have stickers for you if you want,
and yeah, thanks a lot. Thank you very much for your time.
you