WEBVTT 00:00.000 --> 00:12.120 Graphite is a new open source, note-based non-destructive editor. 00:12.120 --> 00:16.600 Before we talk about what non-destructive needs, we need to talk about what destructive 00:16.600 --> 00:18.360 design means. 00:18.360 --> 00:22.800 And in graphics design, we have generally like two main data types. 00:22.800 --> 00:26.560 We have rust data, which is your general pixel-based data. 00:26.560 --> 00:32.520 So if you take a photo with your camera, that's rust data, and we have vector data. 00:32.520 --> 00:39.080 Vector data is a sort of clean mathematical representation of your shapes. 00:39.080 --> 00:48.800 And with rust data, you can do destructive operations, such as brushing or changing colors. 00:48.800 --> 00:53.880 And that happens on a, like basically just in memory representation, it's a table 00:53.880 --> 00:56.440 and you change the data. 00:56.440 --> 00:59.960 And for vector, you can also do operations on the vector data. 00:59.960 --> 01:05.720 For example, in this case, we cut out the second circle from the first circle. 01:05.720 --> 01:09.920 That's also a destructive vector operation. 01:09.920 --> 01:15.320 And in graphite, we want to make this non-destructive. 01:15.320 --> 01:23.360 Non-destructive editing has, well, it's used in industry, but mostly in 3D applications. 01:23.360 --> 01:31.320 So free software, like Hedini or Blender, they do use non-destructive editing to now 01:31.320 --> 01:37.760 you to generate scenes and generate content. 01:37.760 --> 01:40.640 And they do this through a note-based approach. 01:40.640 --> 01:47.040 That's the second sort of buzzword I mentioned in the title in the introduction. 01:47.040 --> 01:56.800 And based means that instead of destructively applying operation to a piece of data, 01:56.800 --> 02:02.800 we encode the operation in our document. 02:02.800 --> 02:05.800 So in this case, we have the smudge operation. 02:05.800 --> 02:10.400 So we have just an image, and we can do smudge. 02:10.400 --> 02:17.000 And regular editing software that would just apply the smudge and it would change the pixels. 02:17.000 --> 02:23.640 If you do it in the note-based way, we can think of it as having an image note, which then 02:23.640 --> 02:28.240 feeds into the smudge note, which applies the operation. 02:28.240 --> 02:34.280 And the big advantages that we basically encode the user's intent. 02:34.280 --> 02:39.200 And if the user wants to change, like at some point later, in the editing process, they decide 02:39.200 --> 02:45.920 they wanted to change something about the source image, maybe they didn't like the aspect 02:45.960 --> 02:46.920 of the project. 02:46.920 --> 02:54.080 Of course, this is just a place, although if you have a proper photo, you want to smudge, 02:54.080 --> 02:58.680 then you can no longer change the source image. 02:58.680 --> 03:03.520 With a note-based approach, we encode the operation that the user did, the smudging, and 03:03.520 --> 03:09.160 we can then recalculate how that would look with the new source image. 03:09.160 --> 03:19.680 And what we do in graphite is that we, it's basically a toolbox for transforming user editing 03:19.680 --> 03:30.560 operations that you would find in any other graphics editor into this note-based system. 03:30.560 --> 03:36.480 This is just a quick overview, this is a design mock-up, we're not fully there yet, 03:36.480 --> 03:40.080 also you live demos in a second. 03:40.080 --> 03:47.680 But one of the general concepts is that we have this sort of duality between the note-based 03:47.680 --> 03:53.280 editing, the procedural note-based editing, and regular editing image editing tools that 03:53.280 --> 03:56.440 many users often know you with. 03:56.440 --> 04:03.480 One instance we have this layer panel on the bottom right, which is like what most users 04:03.480 --> 04:10.080 often know you with, and this is actually byjective to the graph representation in the 04:10.080 --> 04:11.080 middle. 04:11.080 --> 04:15.880 You can toggle this graph representation, I'll show you that in a second. 04:15.880 --> 04:24.200 But we can encode the entire artwork and look at it through both the note-based lens 04:24.200 --> 04:27.800 or the traditional editing lens. 04:27.800 --> 04:35.720 This allows us to have a familiar UX design and familiar user experience and also give 04:35.720 --> 04:41.600 the user all the power and tools they want. 04:41.600 --> 04:46.240 And this allows for some exciting possibilities. 04:46.240 --> 04:50.760 So let's say you want to build a trading card game. 04:50.760 --> 04:57.600 Trading card games are fairly standard, like you have some a title text, an image, maybe 04:57.600 --> 05:04.920 stats for the different objects in the card, like a nice frame around everything. 05:04.920 --> 05:13.680 That's something that you could, like, possibly do in graphite, you could build a pipeline 05:13.680 --> 05:22.400 in the editor, which ingests a CSV file, or like a row of a CSV file, which contains 05:22.400 --> 05:30.640 the path to the source image, the title, and then you can use graphite as a language to 05:30.640 --> 05:38.160 build this procedural construct, which can be rendered out as a card for the trading game. 05:38.160 --> 05:45.020 And you could, of course, also turn this into a CLI application to do batch processing 05:45.060 --> 05:53.060 or automate workflows, general, like, templating. 05:53.060 --> 06:01.340 And it's, and one of the nice features is that we can read, like you can hack it, complex 06:01.340 --> 06:07.180 functionality, you build in graphite, and reuse that, because we essentially, we're essentially 06:07.180 --> 06:13.340 building a full programming language. 06:13.340 --> 06:21.100 The graphite project, we're working on this for about four years now, and we did choose 06:21.100 --> 06:26.460 rust as our language of implementation, and are quite happy with it, because we are both 06:26.460 --> 06:32.780 target, well, we have first of all targeting the web, because we want to provide a good 06:32.780 --> 06:39.420 editing experience on all platforms, and the easiest way to achieve that right now is to 06:39.420 --> 06:49.020 have it run on the web using WebAssembly, and currently we're mainly focused on vector editing, 06:49.020 --> 06:57.220 but we do have rust integrations, and we're aiming to expand that in the future. 06:57.220 --> 06:59.860 And we're essentially fusing through technologies. 06:59.860 --> 07:06.540 One of them is our note-based functional programming language, graphene, and the graphite 07:06.540 --> 07:10.940 editor, which is the tool set that allows you to manipulate it. 07:10.940 --> 07:18.020 You can think of graphite as the IDE for the graphene language. 07:18.020 --> 07:20.620 And we will work on adding animations. 07:20.620 --> 07:29.140 I do also have a demo for you, animations, but yeah, speaking of demos, graphite is an 07:29.140 --> 07:41.340 image editor, so you can do all your regular editing operations, and if I draw a rectangle, 07:41.340 --> 07:49.380 what that ends up as is a rectangle, which feeds through, well, the rectangle tool operation 07:49.380 --> 07:54.400 is transformed into the note representation, which is the rectangle, feeding through the 07:54.480 --> 08:01.080 transform, we assign a fill, it can also change the fill to something more visible, we 08:01.080 --> 08:08.080 add a stroke, and this is then shown to the user. 08:08.080 --> 08:18.720 If we can also use procedural features, in this case, this is the Christmas lights demo. 08:18.720 --> 08:32.160 I can select this, and if I drag this out, the Christmas lights follow along the string. 08:32.160 --> 08:37.360 This is one of the use cases for procedural editing, and how that is implemented is pretty 08:37.360 --> 08:38.360 simple. 08:38.360 --> 08:46.760 We just take this line, which is highlighted in blue, we then interpolate it using 08:46.760 --> 08:55.880 this line, this is the spine interpolation, and we then sample this line along its length 08:55.880 --> 09:05.040 in different intervals, and we copy this light bulb to this line, and that gives us this 09:05.080 --> 09:12.440 nice snake feature where we can drag this and manipulate it. 09:12.440 --> 09:18.560 This can also be used to, like, this concept of proceduralism, can also be extended to more 09:18.560 --> 09:30.560 advanced images, this book example is the changing seasons artwork, and if I use this 09:30.600 --> 09:37.040 lighter, I can actually transform and morph between these two images, and I could of 09:37.040 --> 09:47.920 course also change the color, the gradient, I want to, in this direction, this would change 09:48.000 --> 09:58.560 the colors, and all this is, this note graph is a bit more complicated, but still similar. 09:58.560 --> 10:11.200 I, oh, it's not 20, 20, 40 more, so this is just, I can show you how this is made, like, oh, 10:11.680 --> 10:21.680 first of all, so this number, this number counter is actually procedurally generated, this is just 10:21.680 --> 10:30.080 the seventh segment display, I get a number input, and then this is a matrix of logical 10:30.160 --> 10:37.760 alls to convert the number into turn the segment on or off, and this allows you to build 10:41.040 --> 10:47.520 like a seven segment display within graphite and export that as a note, so that's just the note, 10:47.520 --> 10:54.480 I can feed a number in and get the image output, and that's generally just the use case, or 10:55.360 --> 11:02.960 shows you the power of this system, and we're not just a vector editor, we do also support 11:02.960 --> 11:11.280 raster editing operations, this is a mandalbrot, a mandalbrot set, yeah, you'll recognize this, 11:12.480 --> 11:24.240 and this is rendered live in graphite, where this is essentially just, we do render 11:24.240 --> 11:30.480 graphite, well, traditional image editors, you have to decide upfront what the resolution of the 11:30.480 --> 11:37.040 final image will be, and graphite, we can only look at what the user currently sees, 11:37.040 --> 11:44.720 and we only render that at that resolution, and in a sense, the graphite editor is much more similar 11:44.720 --> 11:51.840 to game engine, because we have this functional description of our application, in this case, 11:51.840 --> 12:00.560 mandalbrot feeds into, I can output, which is the region we can see, and we then have to render 12:00.560 --> 12:07.760 every frame this note graph, and that's also one of the reasons why we use rust to allow us to 12:08.320 --> 12:16.160 actually get away with re-rendering everything every frame, and this is currently running in the 12:16.160 --> 12:26.880 browser single-freaded, we are working on adding a WGP implementation, but it works pretty fine for 12:26.880 --> 12:32.320 just like a mandalbrot zoom, which is not a special feature, it's just built into graphite, 12:33.120 --> 12:39.120 and you never have to, when you combine raster and vector, you don't have to 12:39.360 --> 12:45.360 rasterize the vector to be able to work with both beta data types, because we can do that 12:45.360 --> 12:52.080 live at the desired resolution, you can also show you now the quick little demo, 12:57.360 --> 13:09.040 yeah, this one, this is another example way of how you can sort of build reusable 13:09.120 --> 13:20.880 features, yeah, all right, and thanks a lot, I'll leave you with our way to find a slide, 13:21.920 --> 13:28.320 and if you do have questions afterwards, just come to me, I do have stickers for you if you want, 13:29.120 --> 13:35.280 and yeah, thanks a lot. Thank you very much for your time. 13:39.040 --> 13:41.040 you