This repository has been archived by the owner on Jan 19, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
84 lines (70 loc) · 4.67 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A gentle introduction to NodeBox 2</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<style>
.screenshot {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<header class="hero-unit">
<h1>A Gentle Introduction to NodeBox 2</h1>
</header>
<section>
<div class="page-header"><h1>Introduction</h1></div>
<h1>What is NodeBox?</h1>
<p>NodeBox 2 is an open-source software package for the creation of generative art and design. The software uses a modular node components that can be connected to form a graph, or network.</p>
<p>NodeBox 2, in its current incarnation, is mostly suited for vector graphics: think points, contours, paths.</p>
<p>You can download the software on the <a href="http://beta.nodebox.net/download/">offical NodeBox 2 website</a>. We have versions for Mac, Windows and Linux.</p>
<p>The <a href="http://www.emrg.be/">Experimental Media Research Group</a> (part of <a href="http://www.sintlucasantwerpen.be/">Sint Lucas Antwerpen</a> and the <a href="http://www.kdg.be/">Karel de Grote Hogeschool</a>) created and maintains NodeBox 2. Since the software is free and open-source, we get contributions from enthusiasts using <a href="https://github.com/nodebox/nodebox">GitHub</a>.</p>
<h1>What is Generative design?</h1>
<blockquote>
<p><strong>Generative design</strong> is a design method where the output – image, sound, architectural models, animation – is generated by a set of rules or an Algorithm, normally by using a computer program.</p>
<small>Wikipedia</small>
</blockquote>
<p>In a design process, computers are used to solve production problems. Normally, this process uses a one-to-one relationship where one action by the user generates one response. (For example, generate the font face of title X).</p>
<p>In generative processes, one action by the user could trigger a whole range of responses. We can even take intermediate results and act on them.</p>
<p>Essential components of generative design are:</p>
<ul>
<li>A design schema or set of rules.</li>
<li>The possibility to create variation in the output.</li>
<li>The possibility to <strong>select</strong> something.</li>
</ul>
</section>
<section>
<div class="page-header"><h1>Let's play computer <small>Paper prototyping</small></h1></div>
<p>In the following experiment, we'll try out a simple set of rules. Since we require a visual result, we need a canvas: a piece of paper. We'll use grid paper which looks nice and formal, ideal for following procedures.</p>
<p>Every one works according to the same <em>design schema</em>:</p>
<ol>
<li>For each square of the grid left of the red line, you <em>decide</em> whether you want to color this square black or not. Repeat this for each of the 20 squares. <em>Do this without thinking too hard about it.</em> </li>
<li>When you're done, give the grid to your neighbor and ask him/her to mirror what you've drawn on the other side of the line.</li>
</ol>
<p>We <em>select</em> the most interesting results and build a grid according to the same logic.</p>
<p>In essence, we've set up a generative process. Everybody started with 1 assignment but by the individual variation, and the fact we work as a group, we get many variations.</p>
<p>By combining this set of rules with the speed of the computer to follow those instructions, we can massively increase the number and complexity of the rules and variations. This is what NodeBox does.</p>
</section>
<section>
<div class="page-header"><h1>The NodeBox User Interface</h1></div>
<p>Open the program. After the loading screen, it looks like this:</p>
<img class="screenshot" src="img/gui-initial.png" alt="Initial GUI">
<p>Click the highlighted <strong>New Node</strong> button. This shows a selection list:</p>
<ul>
<li>We can <strong>type in</strong> the name of node and press ENTER. This implies that we already know the name of a node.</li>
<li>We can <strong>scroll through</strong> the list of nodes untill we find the one we need and <strong>double-click</strong> it.</li>
</ul>
<p>For now, find the <strong>rect</strong> node and double-click it. The dialog will dissapear and a new node will show up in the network panel.</p>
<p>The interface now looks like this:</p>
<img class="screenshot" src="img/gui-rect-node.png" alt="GUI with rectangle node">
</section>
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Written by Lieven Menschaert and Frederik De Bleser. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div> <!-- .container -->
</body>
</html>