-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathIntroduction.html
More file actions
102 lines (81 loc) · 20.5 KB
/
Copy pathIntroduction.html
File metadata and controls
102 lines (81 loc) · 20.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<head>
<title>NodeBox | Introduction</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="NodeBox, Introduction" />
<link rel="canonical" href="https://www.nodebox.net/code/Introduction" />
<link type="text/css" rel="stylesheet" media="screen" href="/media/css/nbar.css">
<script type="text/javascript" src="/code/js/pop.js"></script>
<script type="text/javascript" src="/code/js/confirm.js"></script>
<link href="/code/css/default.css" rel="stylesheet" type="text/css" />
<link href="/code/css/print.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body id="body">
<div class="nbar">
<ol>
<li><a class="node" href="/code/Home">NodeBox 1<span class="nbar-arrow"></span></a>
<ol class="nbar-dropdown">
<li><a href="/">Homepage</a></li>
<li><a href="/node/">NodeBox 3<small>Node-based app for generative design and data visualization</small></a></li>
<li><a href="/opengl/">NodeBox OpenGL<small>Hardware-accelerated cross-platform graphics library</small></a></li>
<li><a href="/code/Home">NodeBox 1<small>Generate 2D visuals using Python code (Mac OS X only)</small></a></li>
</ol>
</li>
<li><a class="gallery" href="/gallery/">Gallery</a></li>
<li><a class="documentation" href="/code/Tutorial">Documentation</a></li>
<li><a class="forum" href="http://support.nodebox.net/discussions">Forum</a></li>
<li><a class="blog" href="/blog/">Blog</a></li>
</ol>
</div>
<div id="all">
<div id="header_and_navigation">
<div id="header">
<a href="/code/Home"><img id="header_image" src="/code/g/header-small.jpg" width="800" /></a></div>
<div id="title">
<a href="/code/Home"><h1>NodeBox</h1>
<strong><em>Create visual output with Python programming code</em></strong>
</a></div>
<div id="contextual">
<div id="languages">
</div>
<div id="search">
<form id="sf" method="get">
<input type="text" id="q" name="q" value="" />
<a href="javascript:document.getElementById('sf').submit();">GO</a>
</form>
</div>
</div>
<div id="navigation">
<div id="navigation_public">
<a href="/code/Home">Home</a>
<a href="/code/Download">Download</a>
<a href="/code/Reference">Reference</a>
<a href="/code/Tutorial">Tutorial</a>
<a href="/code/Library">Library</a>
<a href="/code/Gallery">Gallery</a>
<a href="/code/About">About</a>
</div>
</div>
</div>
<div id="content">
<div id="nodebox-link">
<a href="/code/Home"><img src="/code/g/transparent.gif" /></a>
</div>
<div class="inside">
<h3>Introduction</h3>
<span class="big_text">It's hard to imagine a 21st century visual culture without computer graphics, think of Photoshop, Flash, the web, games: computer graphics have rapidly and steadily developed to a level at which people can express themselves creatively and share content with amazingly less and less prior expertise. The last decade has also seen the interesting emergence of generative art and computational design.</span><br /> <h2>What is generative art?</h2> <p><a href="http://en.wikipedia.org/wiki/Generative_art" target="_self">Generative art</a> refers to art that has been generated, composed, or constructed in an algorithmic manner through the use of systems defined by computer software algorithms, or similar mathematical or mechanical or randomized autonomous processes. Although the term is not necessarily limited to any kind of programming language of computer system, it has known a considerable rise in use since the development of <i>Processing.</i></p><p><a href="http://processing.org" target="_self">Processing</a> is an open source project initiated in 2001 by Casey Reas and Benjamin Fry, former students of <a href="http://en.wikipedia.org/wiki/John_Maeda" target="_self">John Maeda</a> at the MIT Media Lab. John Maeda pioneered in computer graphics by bringing animation and interaction to the web - eventually leading to the rise of popular tools such as Macromedia's Flash and Director. Processing uses the Java programming language to create visual output. Processing was the first to standardize the concept of an <i>electronic sketchbook</i>, as a tool to get non-programmers started with programming through the instant gratification of visual feedback.</p><h2>What is computational design?</h2><p>Computational design is the discipline of applying computational approaches to design problems. This term is more common in the architectural and scientific fields. It involves the development of algorithms for composition rules, shape arithmetic, symmetry, visual grammar, design methodology, etc. A tool like Processing can be used to create generative art, while the development of the tool itself is a computational design challenge.<br /></p><p> </p><hr size="2" width="100%" /><h2>Advantages to an algorithmic approach</h2><p>There are many advantages in using code to generate graphics. Most notably: <br /><br /></p><p><span class="pink_box">Workflow automation</span> </p><p>Any design process or workflow has a creative side and a production side. We want to focus on the creative side as much as possible. The production side (including tasks such as generating alternatives on a theme, applying style guides across different pages and media, certifying PDF documents for printing, executing corrections based on consumer-feedback) we would often rather leave up to someone else. Algorithms can be a formidable production partner here.</p><p>When Just Van Rossum and Erik Van Blokland of LettError developed <a href="http://drawbot.com" target="_self">DrawBot</a> in 2002 they described production advantages in terms of <i>volume</i>, <i>complexity</i> and <i>alternatives</i>:</p><ul><li><b>Volume</b>: many assignments call for a volume that is unrealistic to create in a short time. When you have large volumes, automating the process is something that just comes naturally, or out of laziness. The computer can work a lot faster than we can when creating 1 500 pages. <br /></li></ul><ul><li><b>Complexity</b>: using templates, style sheets and automated layout engines, we can let the computer do complex layouts for us. By adjusting a single layout algorithm, we adjust the complete layout across pages, without having manually to reorder every element.<br /></li></ul><ul><li><b>Alternatives</b>: if we don't have to manually adjust every element to see if a different layout might work too, we can try out many alternatives. This is a form of digital sketching: since the production stage is automated, you can readjust the layout or your concept up to the last minute.<br /><br /></li></ul><p><span class="pink_box">Creative leverage</span> </p><p>Traditional graphics software has the advantage of robustness. It has been carefully developed and optimized by experts over the course of many years. It often has the disadvantage of lacking simplicity. User applications that focus on one specific problem (either pixels, vectors, page layout, web pages or animation) force us to think in segments. User interfaces composed of predefined menus, buttons and sliders limit our creativity to what others have preprogrammed for us.</p><p>The <a href="http://research.nodebox.net" target="_self">research on NodeBox</a> initiated in 2005 defines creative advantages in terms of <i>integration</i>, <i>language</i> and <i>recombination</i>: </p><ul><li><b>Integration</b>: by relinquishing <i>many</i> user-friendly interfaces and focusing on <i>one</i> programming language we can freely address any of a computer's possibilities. We can combine many different techniques in the same environment. </li></ul><ul><li><b>Language</b>: it is easier to express creative ideas and processes with language than with mouse gestures. We can store the language description as a recipe to reuse and manipulate - something we cannot easily do with a mouse gestures. <br /></li></ul><ul><li><b>Recombination</b>: once we have enough recipes we can bundle these in a package that solves a design problem (like <a href="/code/Colors" target="_self">finding good colors</a>). We can continuously derive new functionality and recombine it with other recipes, like playing with Lego-blocks. <br /><br /></li></ul><p><span class="pink_box">Community</span> <br /></p><p>Generative/computational graphics software is commonly developed in an <a href="http://en.wikipedia.org/wiki/Open_source" target="_self">open source</a> context, meaning <b>it is free and anyone can contribute to it</b>. You can learn by getting help from the online community, benefit from the programming code of others, and in turn acquire more experience and confidence which you can pass on to newcomers. Acknowledgment is traded for tutoring. For example, technical experts will code new features on request. In return they can benefit from spreading their code and learning how artistic experts use it to create productive and aesthetically pleasing results. The more people join in, the better the software gets. </p><p>Marius Watz has been curating <a href="http://www.generatorx.no" target="_self">Generator.x</a> since 2005, the related website is a tremendous effort in monitoring the evolution in different generative art communities. </p><p> </p><hr size="2" width="100%" /><h2>Emergent in nature<br /></h2><p><a href="http://en.wikipedia.org/wiki/Emergence" target="_self">Emergence</a> refers to the way complex systems and patterns arise out of a multiplicity of relatively simple interactions. Emergent patterns occur throughout nature: cells forming organisms, organisms forming societies (an ant colony for example), the weather. The global behavior that arises is complex to analyze, but on the contrary the local intelligence of one <i>agent</i> (cell, ant) is fairly basic. </p><p>Emergence is an integrated part of generative art. You write short pieces of programming code and put them together to observe how they interact visually. You may not always know what is going to show up until you press "Run". This requires a different design approach to what you may be used to.</p><ul><li><b>Control</b>: we cannot control every single detail in a complex composition with 100 000 elements. Rather, we will have to think about <b>the system</b> as a whole. </li></ul><ul><li><b>Build from bottom-up</b>: coming up with an idea and then working out the details is a <i>top-down</i> approach. Because it is difficult to control every single detail, it is difficult to adhere to a top-down approach. To keep things fun when learning how to program it is better to adopt a <i>bottom-up</i> strategy. Start out simple with a few commands you know, put them in a loop, add some randomness and see what happens. Keep it simple. Expand your ideas and slowly add new programming code as you learn more. </li></ul><br /><p><span class="image_border"><img src="/code/data/media/workshop_helsinki4.jpg" alt="workshop_helsinki4" /></span></p><p><span class="image_border"><img src="/code/data/media/workshop_helsinki5.jpg" alt="workshop_helsinki5" /></span> <br /></p><p><i>Two compositions by <b>Veronika Schmidt</b> that illustrate the concept of emergence and the power of generative art. Although the resulting compositions are complex and intricate, the actual process is elementary. Three or four images that Veronika created are imported in NodeBox. Then, thousands of copies of them are placed on top of each other in decreasing angles and scales. </i></p><p> </p><hr size="2" width="100%" /><h2>Research, reuse, refer </h2><p>In a bottom-up approach, what do we define as "the bottom"? Behind the facade of a simple programming command, thousands of lines of code may hide. A newcomer's base may be someone else's top. In this process we create standards instead of personal opinions, ideas and concepts.</p><p>Suppose you want to visualize something <i>dynamic</i>. You can easily use and adapt <a href="/code/Boids" target="_self">a flocking algorithm</a> instead of struggling with your own experiments from scratch. Flocking algorithms have been around for a long time, have been published, discussed, standardized. They are <i>dynamic</i> in their own nature. They look great. People will be intrigued into why and how you used them, look at your work with new eyes, grow a scientific interest in bird flocks. The alternative may be a lengthy, subjective or even pointless discussion on your personal notions of the word <i>dynamic</i>. </p><ul><li><b>Methodology</b>: a <a href="http://en.wikipedia.org/wiki/Methodology" target="_self">methodology</a> is a set of procedures and assumptions that underlie a particular study. In the above example the methodology is "to examine and apply bird flocking as a visualization of the concept <i>dynamic</i>". A methodology may explain a researcher's ontology.</li></ul><ul><li><b>Ontology</b>: an<b> </b><a href="http://en.wikipedia.org/wiki/Ontology_%28computer_science%29" target="_self">ontology</a> is an objective model or scheme representing the concepts in a domain and the relationships between them, bottom-up. It is used to reason about the objects in that domain. </li></ul><p>The objective approach of having a method and a model has useful advantages. Instead of defining what you <i>want as a result</i>, you define what you <i>need to get started</i>. It enables you to start out small, subdividing the problem into workable portions. Your results have an objective basis so others can tune in, expand or reuse them. You can reuse the knowledge attained in other domains.</p><p>On a final note, don't be a purist. There is nothing wrong with finalizing your generated artwork by hand. To improve the aesthetical quality you can use the features in traditional graphics software to chip away unwanted portions, adjust colors, add typography, ... It needs to look good.</p><p> </p><hr size="2" width="100%" /><h2>Getting started using NodeBox</h2><p>The first thing you want to do once you've <a href="/code/Download" target="_self">downloaded</a> the application is run some example scrips. There's a folder with tons of examples. Open them in NodeBox and press APPLE-R to run them. Then try changing some numbers in the script and run it again to see what happens.<br /><br /> </p><p><span class="pink_box">Reference</span> </p><p>Then you will want to have a look at the <a href="/code/Reference" target="_self">reference</a> to see what scripting commands are available. When you use a command you plug in <b>parameters</b> that define its behavior. For example, the reference may mention something like:</p><pre class="python"><span style="color: #530035;">rect</span><span style="">(</span>x, y, width, height<span style="">)</span></pre></pre><p>This means that <span class="inline_code">rect</span> is a command with <i>x</i>,<i> y</i>, <i>width</i> and <i>height</i> parameters. The name of the command tells something about what it is going to do (<i>rect</i> will probably draw a rectangle on the screen). The parameters you replace with values of your own. For example:</p><pre class="python"><span style="color: #530035;">rect</span><span style="">(</span><span style="">40</span>, <span style="">80</span>, <span style="">100</span>, <span style="">50</span><span style="">)</span></pre></pre><p>This will draw a rectangle located 40 from the left edge of the canvas, 80 from the top of the canvas, with a width of 100 and a height of 50. Go through the reference and try out each command to get a general idea of what is possible. NodeBox has commands to draw primitive shapes (rectangles, ovals), create your own shapes with Bézier paths, transform shapes (translate, rotate, scale, etc.), and work with image files and text. <br /><br /></p><p><span class="pink_box">Random loops</span> </p><p>To create a lot of rectangles at random positions, we use a <a href="/code/Repetition" target="_self">for-loop</a> and the <a href="/code/Reference_|_random()" target="_self">random()</a> command. Both of these are essential concepts in NodeBox. With a loop you can repeat actions several times (up to hundreds of thousands of times). With randomness you can add subtle variation to your script.</p><p> Commands "inside" the loop are indented with the TAB-key. In this case we draw five rectangles at a random position: </p><pre class="python"><span style="color: #530035;">for</span> i <span style="color: #530035;">in</span> <span style="">range</span><span style="">(</span><span style="">5</span><span style="">)</span>:
<span style="color: #530035;">rect</span><span style="">(</span><span style="color: #530035;">random</span><span style="">(</span><span style="">50</span><span style="">)</span>, <span style="color: #530035;">random</span><span style="">(</span><span style="">200</span><span style="">)</span>, <span style="">20</span>, <span style="">20</span><span style="">)</span></pre></pre></p> <p><span class="pink_box">Tutorial</span> </p><p>The tutorial contains essential tips on how commands work and how to write scripts. <br />We recommend starting out as follows:</p><ul><li><a href="/code/Environment" target="_self">Environment</a>: the basics about the NodeBox application.</li><li><a href="/code/Primitives" target="_self">Primitives</a>: more information about command parameters.</li><li><a href="/code/Repetition" target="_self">Repetition</a>: more information about loops.<br /></li><li><a href="/code/Variables" target="_self">Variables</a>: instead of plugging numbers directly into a command, you can also store them in a <i>variable</i> and then use the variable throughout your script. <br /></li><li><a href="/code/Lists" target="_self">Lists</a>: lists are variables that contain more than a single number. They can contain all sorts of things. If you really want to get your hands dirty a good comprehension of lists is essential.</li><li><a href="/code/Graphics_State" target="_self">Graphics state</a>: how primitives are rotated and transformed. This tutorial may be a little bit hard to grasp at first, but very useful nonetheless.<br /></li></ul><p>At one point you'll also discover how to work with <a href="/code/Reference_|_beginpath()" target="_self">Bézier paths</a>. This is where NodeBox truly shines. All of the things you can do with paths are unlocked in the <a href="/code/Paths" target="_self">tutorial on paths</a>.</p><p> </p><hr size="2" width="100%" /><h2>Clean, commented code</h2><p>The programming language that drives NodeBox is <a href="http://python.org/" target="_self">Python</a>, written by Guido Van Rossum. Python emphasizes on productivity and code readability. We think it's excellent to learn programming. You can find all the documentation and tutorials on <a href="http://python.org/doc/" target="_self">http://python.org/doc/</a>.</p><p>We usually keep these under our pillow:</p><ul><li>Information about for-loops, if-statements, def-commands: <a href="http://docs.python.org/tut/node6.html" target="_self">http://docs.python.org/tut/node6.html</a> </li><li>Interesting things you can do with Python lists:<br /><a href="http://docs.python.org/tut/node7.html" target="_self">http://docs.python.org/tut/node7.html</a></li><li>Interesting things you can do with Python strings:<br /><a href="http://docs.python.org/lib/string-methods.html" target="_self">http://docs.python.org/lib/string-methods.html</a> </li></ul><p>Python code in itself is very readable. It is part of your responsibility to keep it that way. You may want to share your scripts, and you may want to modify or expand it in a few months. A well-written script can last a lifetime - it's not something you generate output from and then throw away.</p><p>Steps to keep your code clean and readable:</p><ul><li><b>Comment your code</b>: add comments that describe (in English) the purpose of the code below.</li><li><b>Blocks of code</b> that peform a single action are kept together.</li><li><b>Reuse code</b>: if a block of code is needed multiple times in a script, make a command out of it.</li><li><b>Good variable names</b> are essential. A variable may appear throughout a script so pick a good name for it, something that explains what value is contained in the variable.</li></ul>
</div>
</div>
<div id="footer">
Last modified: Feb 28 2008 | © 2004-2012 <a href="http://www.emrg.be/" class="noexternal">Experimental Media Research Group</a>
</div>
<img src="/code/g/footer.jpg" style="border:0" class="footer" width="800" height="334" />
</div>
<script>
try{e=document.getElementsByTagName("span");for(i=0;i<e.length;i++){if(e[i].className=="header_image"){src=e[i].getElementsByTagName("img")[0].src;document.getElementById("header_image").src=src;break;}}}catch(e){}
</script>
</body>
</html>