Generative Node-based Design With NodeBox 2

Video thumbnail (Frame 0) Video thumbnail (Frame 1200) Video thumbnail (Frame 1975) Video thumbnail (Frame 2842) Video thumbnail (Frame 3928) Video thumbnail (Frame 4528) Video thumbnail (Frame 5437) Video thumbnail (Frame 7050) Video thumbnail (Frame 8045) Video thumbnail (Frame 9208) Video thumbnail (Frame 10067) Video thumbnail (Frame 10643) Video thumbnail (Frame 11902) Video thumbnail (Frame 12513) Video thumbnail (Frame 13370) Video thumbnail (Frame 14143) Video thumbnail (Frame 14978) Video thumbnail (Frame 15763) Video thumbnail (Frame 18388) Video thumbnail (Frame 20907) Video thumbnail (Frame 24283) Video thumbnail (Frame 26537) Video thumbnail (Frame 27153) Video thumbnail (Frame 27938) Video thumbnail (Frame 28693) Video thumbnail (Frame 29318) Video thumbnail (Frame 30188) Video thumbnail (Frame 31238) Video thumbnail (Frame 31860) Video thumbnail (Frame 32547) Video thumbnail (Frame 33538) Video thumbnail (Frame 34167) Video thumbnail (Frame 34833) Video thumbnail (Frame 35578) Video thumbnail (Frame 36252) Video thumbnail (Frame 36827) Video thumbnail (Frame 37682) Video thumbnail (Frame 38258) Video thumbnail (Frame 38898) Video thumbnail (Frame 39493)
Video in TIB AV-Portal: Generative Node-based Design With NodeBox 2

Formal Metadata

Generative Node-based Design With NodeBox 2
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
NodeBox 2 is an open-source application that generates visual output based on programming code, a node-based interface or natural language (i.e. English.) In the user interface you connect nodes (building blocks) together to create interesting visuals. Nodes can be opened to examine or edit the (Python) source code. AI techniques allow the system to evaluate written text and transform it into nodes using analogy and conceptual association.
Keywords Libre Graphics Meeting (LGM)
Programmer (hardware) Group action Computer animation Key (cryptography) Software Projective plane Quicksort Mereology Graphic design
Laptop Type theory Computer animation Code Function (mathematics) Cartesian coordinate system Machine vision
Programmer (hardware) Touchscreen Computer animation Computer file Code Mereology Graphic design
Revision control Mathematics Electric generator Computer animation Series (mathematics) Quicksort
Point (geometry) Dataflow Randomization Multiplication Standard deviation Computer animation 1 (number) Quicksort Extreme programming Cartesian coordinate system Bulletin board system Computer font
Laptop Web page Maize Computer animation Code Multiplication sign Core dump Variance Translation (relic) Interface (computing) Cartesian coordinate system Product (business)
Web crawler Computer animation Code Bit Quicksort Student's t-test
Scripting language Classical physics Forcing (mathematics) Source code Function (mathematics) Graphic design Power (physics) Type theory Computer animation Core dump Adobe Illustrator Endliche Modelltheorie Quicksort Library (computing)
Laptop Slide rule Mathematics Computer animation Computer file Multiplication sign Line (geometry) Graph coloring
Computer animation Software Software testing Mereology Neuroinformatik Product (business)
Residual (numerical analysis) Point (geometry) Sign (mathematics) Matching (graph theory) Computer animation Euler angles Thermal expansion Student's t-test Mereology Position operator Reading (process) Abstraction
Laptop Scripting language Programming language Computer animation Computer file Software Code Formal grammar Natural language
Multiplication Computer animation Code Multiplication sign Student's t-test Quicksort
Electric generator Computer animation
Revision control Word Coefficient of determination Graph (mathematics) Computer animation Link (knot theory) Generic programming Database Bit
Word Greatest element Computer animation Multiplication sign Green's function Bit Perturbation theory Graph coloring
Complex (psychology) Onlinecommunity Content (media) Sound effect Bit Student's t-test Mereology Graphic design Graph coloring Computer programming Word Computer animation Internetworking Personal digital assistant Physical system
Context awareness Scaling (geometry) Theory of relativity Open source Projective plane Set (mathematics) Bit Proper map Subset Category of being Word Arithmetic mean Process (computing) Software Different (Kate Ryan album) Internetworking Network topology Representation (politics) Natural language Associative property Physical system Library (computing)
Theory of relativity Range (statistics) Gene cluster Electronic mailing list Set (mathematics) Database Bit Cartesian coordinate system Semantics (computer science) 2 (number) Category of being Word Goodness of fit Coefficient of determination Computer animation Software Query language Different (Kate Ryan album) Analogy Object (grammar) Position operator Resultant Form (programming) Physical system
Suite (music) Category of being Interpolation Process (computing) Computer animation Software Analogy Range (statistics) Right angle Demoscene Physical system
Computer animation Software Internetworking Query language Right angle Quicksort Rule of inference Associative property Twitter
Programmer (hardware) Different (Kate Ryan album) Bit Student's t-test Computer programming
Word Mathematics Roundness (object) Computer animation Electronic mailing list Vertex (graph theory) Interface (computing) Coordinate system Graphic design Rectangle Graph coloring
Point (geometry) Curve Computer file Direction (geometry) Vertex (graph theory) Shape (magazine) Student's t-test Rectangle Mereology Cartesian coordinate system
Point (geometry) Type theory Pixel Mathematics Computer animation Multiplication sign Surface Form (programming)
Building Computer animation Expression Source code Parameter (computer programming) Distance
User interface Prototype Code Vertex (graph theory) Student's t-test
Implementation Computer animation Clique problem Student's t-test Limit (category theory) Computer programming Spacetime
Laptop Software Binary code Electronic mailing list Student's t-test
Complex (psychology) Computer animation Code Order (biology) Bus (computing) Analytic set Website Shape (magazine) Resultant Form (programming)
Googol Computer animation Multiplication sign
Laptop Mathematics Programmable read-only memory Cuboid Number
Scripting language Process (computing) Computer animation Lecture/Conference Bit Game theory
Point (geometry) Process (computing) Lecture/Conference Number
Goodness of fit Meeting/Interview Cross-platform Projective plane
Laptop Cumulative distribution function Scripting language Electric generator Open source Code Projective plane Feedback Bit Mereology Evolute Revision control Mechanism design Artistic rendering Entropie <Informationstheorie> Right angle Quicksort Species Computing platform
it's is a very brief intervention we're very small
research group located in and work the same article which is not very obvious that an article which develops software will we think it's only going to be useful but that's all that's the primary key and Tom really about and they're both doing that operates in parts and the but we will explain the more about the project and the main part of the experiment we lost OK OK so this sort thing so high that is by and what programmer and graphic designer and I will come along and now on the books of books and so
the only way to clear and this future things that you
this is what I don't like using lot of it is shown you
visualize in the flesh so anything useful and so is the note this is the reason why vision of our
notebooks 1 is is really simple applications where you type in code and then on the other side you get some output so this is the code spite year of full
screen and you get some and the nice part about this is
that because its code you can
reproduce it and regenerated and what this is not
new to you because you're all programmers most of you are programmers but before graphic designers this is pretty amazing because in the old days they could only do not use Photoshop Illustrator to generate 1 static file that they directly manipulated put stuff carefully on screen and using code you can do much more with this so we this many mission there as well on the
weekend of 1 of the nice things about this is that is rapid prototyping so we can change generation while it is running of for example change with a high changes interactively and the sort of behavior there and the speed and go back coherence so that allows you to quickly generate stuff and then if you're happy you can export is a series of PDFs and so that you can edit and in Illustrator or Inkscape or whatever you like or as a QuickTime movie and then have to be rendered as well this version I have to say is only available for my question so that the books but there is a
portal for Linux and done by amongst others you gotta love data of she about and I think he talked about
this this yes and also to the so that the general concept is known but the the application of it is really interesting so that when you have to like this you can make stuff
like fonts and you know Multiple Master fonts this is the standard Adobe Creative where can vary between 2 extremes of font so Jerry between a light bold so but because these are points you can do whatever you like with it so you can make a ball that's bulletin even Sobel that it sort of flips and get these letters or the other way around and then you get really light ones until they sort of flow in the other way so you get this and so really nice that you can randomness there's it's due what's interesting
about this is this approach is that you now provide
create your own features there's no 1 step into
creating and core notebooks featuring or your own
future in fact when we're developing the books were 1st developing a new feature inside of the interface and then later just copy and paste it into the course there is no translations that there's no well this is corn and this is not a core it's all the same and so here for example we have a filter that meets letters together and again uh and you can do this by hand but it would take a lot of time and then if somebody says well you have to change this to something else for example reprographics meeting we want is in Dutch or French or English while you will be doing that by hand you will be doing this this way so for some applications announcing every application for some application this approach makes a lot of sense because it allows you to really quickly iterate over the code you so and that solves a lot of production challenges that you have for example generating lots of stuff so you can generate multiple pages of the same variance or you
can have some of the code do some things that you won't be
doing normally because it's so tedious to do for example this
logo sort like a spider crawling around the
letter and then driving and you can't really see it well it's student to this it's a bit dark but I'm only well
and still does not belong to and we would power of codes we can now changed it to something else that was so and this decided we now have the federal and again you could do this in illustrators select all these things that you can't to all these things and the fact that you can reproduce the steps is really important and again we're coming from a graphic designer background where this is not possible or very hard to do with classical Adobe Illustrator functional tools because you can't script but it's sort of all forces you introduce really complicated model doing scripts where you're drawing erectus just type in rock and and what's
interesting is that we have a lot of libraries and on top of this not just a core but we have a lot of libraries that allow you
for example to import stuff so this is an SVG file drawn in Illustrator by an artist then you can the
imported into notebooks and here you see change colors and then you can grow out for example here on it so you
have this pair filter them across the other stuff and I won't be showing this slide because it takes a lot of time obviously to render but it's really fun to send this to the printer and see what millions of lines with 1 of these so another that nice thing
well what you just saw production challenges 1 of the things we start thinking about a few years ago was like not just to production challenges you can also make computer work instead of the creative aspect of software not just the production part and and this is the the 1st of which will arise and tests that we did and
this is a modern art critic talking about a lot of work so this situation expansions any residue of tricks a position of postwar attitude and peculiarly oblique matching challenge and if you're done reading all if you another 1 and so a contemporary abstractions work seems truly articulates and acts expect all of you to understand this course and and the situation seems signifies this now this is where we've done this when we were still students and we sentenced to our teachers involved this explains our work so would you mind reading it and then reacting we we never got anything back some the funny part is that that people don't dare to you to challenge you when you put text up like this so I think that's the whole point what's
nice about this approach is that we just generated
english as a all but you can generate any language is
just a chapter grammar files so this is a language as
well as the programming language so we thought to ourselves well why copyright grammar file that generates notebooks code it doesn't have to make sense but at least give something so we added to the software is
called New with code and what that allows to do just
write some random garbage and and then it executes and because it's a script you can executed
multiple times so that's really a cool approach to get started and we hear from students that they use it to this sort of
brainstorm when they really don't know what they're doing it to
just sort of rendering some subitizing was well like this spots on just copying basing of course is the worst code you could write by hand but where you what students as well so we don't mind and asking them to do
object-oriented design is just wasted so we don't
and and then we have a poetry generators
also this gets more into the topic of constant and other
things so this is about love nervous and so that these are pretty good actually 1 of this 1 and another 1 in history splendor punk rock I like thing going to explode that
a the that from where you can given a topic like in this user some consonant and which is a database of about words for work in these kinds so what is a database for you have all these links to more generic versions of word more specific versus of words dog might be Chihuahua and or an animal which goes up and on induces this graph to traverse to to generate poetry about the subject but to talk more a bit
more about this we have a caller generated and I'll go through this
quickly because we don't have that much time but this 1 actually
has a bit more intelligence and generates a color palette based on word so if you give it the word apple that generates a color palette for apples and and this works and it this and again the colors are a bit of on-screen but you can see it's says fresh green for fresh shred of hot green at the bottom so it makes sense and we can use for any kind of fruit
and this is a bananas orange we know that and so I but the interesting part of the interesting part is that it also works for more complex things like for example the emotions jealousy what would color palette for jealousy and he
also gets it right and this is interesting he gives intense yellow intense green intense red these are the appellate that is a bit harder to come by for graphic design students as well that he manages it because the and this actually use this in the internet he just Google searches on these words to find out which are the most relevant for the colors relating to a certain word and for some reason it works like magic well in 80 per cent of the cases where we have some interesting side effects of that is that for example we did as we we want to know what animals have colors so we asked what's called for Panther and we thought well you come back with black but for some reason can pink in which makes sense when you think about it and and and also made sense for us because we said well in that scientifically doesn't it isn't completely correct but from a design standpoint this is really interesting because it allows us to see what uh or or hit a finger on on what the central nervous system of the global Internet communities which is a lot of bullshit words for saying we know what people liked and and that is very interesting for program that allows you to not only generate some basic things but also to be able to prices and that's very interesting from a design standpoint now to talk a bit more about content I'll talk talk about the past
that we Britain inside of a system that some issues the
natural language processing is a side project and we're trying to create a set of tools a set of open source libraries to do things like uh mining data from the Internet or coming up with creative associations between concepts so if you think of words then you have a representation in your brain just summarize it and that is a constant so if you have a word like trees tree has lots and lots of different meanings in different contexts and this software is able to find different meanings or what is called scientifically conceptual halo over trees so you see that the tree is related to primates and monkeys that tree ordered this that has a proper debate and that Baltimore it's also a bit and auditory screening and LG are green well and this is interesting because these this kind of data is I'm not putting my hands these are things that are put in my hand so you should reduce the subset that for example did is is a property of tree but then on on on on a larger scale you get some inferred relations between things and this kind of data we can use to come up with all kinds of
creative brainstorm applications for example
unlike query the database of semantic relations inside no and I for example say well what kind of objects are happy and he has to think a little bit then when he's done thinking well dog is happy and guys have been relationship with the people and the dorsal by of the but in the same way I can query the system what are the properties of the concept happy and happy something good something compliant optimistic positive and so on and so on the the results at the end of the list of those years those are things that aren't happy at all so for some reason for that is not helping with going to the discrete time but in the same way I can ask the database for ranges of courses for example if I asked what are what our emotions and the answer is anger anxiety discussed and each year and most interesting thing is that I can come combine all these different kinds of data sets of clusters of things or range of things into analogy query so where the software is trying to come up with metaphors or analogies so creative things that we designers well so for example I can ask what our deep emotions we have to think a little bit but then he will say well jealousy in seconds and entries pretty deep and things like joy surprise and delete are more superficial and it works for any words like announced what playful emotions and this is what Lee joint jealousy of don't know about Chelsea with Joyce differently to put it into a more concrete example in in the same way I can ask what are elegant forms I already know the answer and then he says well only in the song or a nice once I I would agree that but not all the all the
conclusions of the software are correct that because this
is about the static so there is no right or wrong there's just inspiration and this is the kind of software that can give you more inspiration quickly more about which example are of analogies so I can produce system for the range of all animals so birds monkeys I vary system for person George you wish can ask well what that kind of animal with George W. Bush distinction that we thinking very hard it going be nice or the tension rising it so the answer is is like a mosquito orange argali which is kind of a mountain goat or because which is good as well or a donkey or a goat on trust so what happens behind the scenes is that the he's looking at all the properties of each animal for example of bodies fluffy and sweet and mosquito is annoying and thing you can you can get a painful sting from it or a mountain goat stubborn and then he looks at what people have said about Georgia Bush and they will say about your job with which is annoying 47 and then you get this interpolation between concepts where the conclusion right 1 more of so this suit of software
rule like I mentioned include all sorts of tools to mine the internet but not just for images or for worse but the kind of creative associations you would like for example and here's a query that is looking to the internet for phrases that come think is more important than
the LS itself is that I can't really do anything like that right now with the idea is that we are looking at trends as well we want to software so that it's able to monitor trends on the internet and mingle that into the conclusion so that you would not only save well then years ago Bush might have been just over but not always Grand also the kind of time-related data as well yeah but it's OK I'm
going to leave it back to you so you can show me a little bit about the books and so on thank it the people in the world and we learned of course that students are not programmers they're not the same people they have this different kind of brain which is interesting but also very difficult to to teach and programming so we thought
about this long hot and we said well we have to give them something that that allows them to to replicate the steps to be able to you have this generative approach to it but without actually being able to program so we came up well the idea is not new but we use
and and no this interface for doing graphic design and what this does is instead of just being
able to writes the words rectangle you can now just selected from the list of all nodes that are
available and now you have a rectangle and you can have these parametres for directing also the X and Y the parametres within the hide the rounds and uh the color you can also said that and you can course change of directly on screen and and this allows you to and do a lot of things once you have still control over the direct manipulation of the thing but you can also do a lot of the things that would normally
only be reserved for standard scripting application like copying thing so I can generate let's say 10 copies and say I want to translate teas and 1 each 1 but rotated maybe in a different direction here so no I get these kind of shapes and I can still go back to the original rectangle and then start changing it and it changes the whole composition of a thing here I so that is a lot of what it's very insincere direct and and that that appeals to a lot of students but also provides a lot of opportunities for creating direct manipulation nodes for example I can make the text part so this is
all vector-based by doing 2nd create a text file and say I want new points based on this six-part distributed along the curve so the old up
points of like this you'll points look like this the new points are evenly distributed like this and now I can say it now I want to set these points to a grid
and what you get is you get instant pixel forms so it
goes from and this 1 on this 1 so this is the
original at the this is the pixel this letter and you can easily change that you can drag around the x and y coordinates and get instant typeface and then of course change the underlying type to say times or something and then now you have 1 that has surface to recall and
there are some concepts that we yes I see there are some
concepts that we added for example 1 is copy stamping where each copy can be something else so and this allows users to use expressions which are sort of like the up steps to actual to the actual coding apart so now they allow us to sort of build on that and we can sort these things you can say well we want to sort them by X for example or randomly or we want to shift and and then we have this offset parameter that we can change or we can sort by proximity to a certain point in contractor's . and of course we can do that based on text for
example as well so now we have text that we can drag around the world and be able to change so and that's the that provides to be really important concept for students
and we like that would be also like them to be able to
code so 1 thing we did is we add at this code window here where you can see what the actual code for node and this is prototype based which means that you're only changing a copy or not changing the original so I can put in some custom we'll coat that I've written beforehand
here and space in clique reload now I have my own and implementation there and I can change for example the seat now uses this to rotate this thing so that's really
nice but it's not about what we do it it when students do it so these are the actual students that use
a program and 1 thing we learned is that the driver program really true into to its limits so it's will be this lower from now on but because
1 of the students that finished a list of all finish surnames and visualize those now he would be unable to do this using binary code for illustrators so this really of gives and this is a unique approach to the software so it's really interesting and and I have some other the stuff we did a datavisualization
works of where we gave 2 days of notebooks lessons and then 2 days they could do their own stuff and get
some really interesting results about this again this is without
any code so this guy and made some analytics
and such some analytics data from this side and use it to
visualize for example how long people stay on the site
defines the complexity of this form shape orders typefaces and we have some people
visualizing bus hours and so if you can read
this you can see instantly if your busses on time or not and yet it could you have to adapt as well of course
and some nice flight this one's visualized
Google Trends based on search for foreign on Google these are the winter months and and then we have some
squirrels here and and this actually because they
understood the name of the prom was not boxes
notebooks so they they made this not the creature here
and it it evolves so that they really had a slider in there that set the school earliness and make a change is calling from no squarely a squirrel at all to ultimate score early which is this 1 and I think it's really interesting because of that's a slider that you will find very rapidly in Illustrator and you can also friend maybe sincere 6 and a number of even if it's if it's going to be very can never add more slider so it's it's really interesting approach
and so I will be finishing I'll show you a bit about the
future of about 1 thing that we do is now is we talk to the people of processing to actually be able to change the the
rendering layer of the whole thing to processing so we're
interested in doing that so we can also put in processing scripts and that allows us to have the animation stuff
like that so here's a a game that we're making using this
approach where you can see that we have these parallax leaders and again this is fully knowledge based so you can go to the
boys for example which is the 1 we stand back and then change the number of points so that you can get this going and so on I think that's all
process thanks without
was and still want to be constant but it would take 3 some of and so I like to ask about the availability of the project and I see that it's running on Mac OS 10 s is a multiplatform press good question and I felt to mention
this summer books 1 is not and that only works on Mac
but as I said there's no other shoe about which you can use in
Linux but no books to it's available for mechanism and so the cross-platform possible and I also hope that like all the example that you usually a part of the distribution is a just a blank canvas it's it's still pretty blank but 1 of the things that we came here for is to go get this dialog going to look at how do you want to learn these tools what are learning tools that you want to make available and urging them might what I really what I would like to get out of this conference also forms of personally for me to get some feedback about how we can integrate this into your workflow so how you should be Inkscape such how we could do this from your book so that you can also use it from the command line build your script and then have it export or whatever so we we really try to integrate it into his full stack of open source tools not just have this is isolated platform that you have to to everything yes thank you another person in the back there no question I don't know if so I would like to know that for the generation part controlled it generated a lot of cold and there is a possibility so that's all I like these generates another thousand species of these and I I would say many others I like the doing like incremental and yeah it's actually a very interesting question we have some sort of a project that we've done around because this is about evolution right it's the ball and stick approach to code we have some tools that do evolution-based designed so it has these things about knows about local optima and and all these hierarchical fair competition a generative strategies for for the rendering of better not integrated into the whole code part yet so on this is left as an exercise for the reader I would say but but yeah it would be interesting to you to see something like that and what comes out of so that that we have tried last could last question have the the hello with so I'm I'm saying that I don't know the big data an I'm going interested but is so frequent but uh letters that while you start a bit about notebooks of that you download the latest beta version and you go to the documentation and you really have to have are things that no it's it's really fun to get into it it might be a bit overwhelming because you have a lot of notes that but but it's really fun and if you have something like that says well I have trouble learning disorders concept and please maillist were very real also and and tell us where you went wrong and we have lot of people that work specifically on documentation and getting that right because it's very important to get that part right as well so if you have some feedback there and say well how do I get started in this or that wasn't entirely clear please thank you be Fig