website/code/Lists.html at master · nodebox/website

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<html>

<head>

<title>NodeBox | Lists</title>

</head>

<ol>

<li><a class="node" href="/code/Home">NodeBox 1</a>

<li><a href="/">Homepage</a></li>

<li><a href="/node/">NodeBox 3Node-based app for generative design and data visualization</a></li>

<li><a href="/opengl/">NodeBox OpenGLHardware-accelerated cross-platform graphics library</a></li>

<li><a href="/code/Home">NodeBox 1Generate 2D visuals using Python code (Mac OS X only)</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>

</ol>

</div>

<a href="/code/Home"><h1>NodeBox</h1>

Create visual output with Python programming code

</a></div>

</div>

</form>

</div>

<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>

<h3>Lists</h3>

<a href="/code/Variables">Variables</a> can hold entire lists of data. Lists are essential when your scripts increase in complexity: they are a way to group bits and pieces of information that belong together, for example: all the words to draw on screen, all the possible colors from which the script can choose, all the fonts from which the script can choose. A list in NodeBox is no different from a list in real life: it can hold a summary of stuff to do, groceries to buy, a sheet of names and adressess. The main difference is that in real life, we usually start counting from one, while lists in programming start from zero. The first element in a list has index zero, the second element in a list has index one. <img src="/code/data/media/lists-groceries.jpg" alt="" width="500" height="250" /> <h2>Creating a list</h2> So, what does the code look like? Below is the grocery list defined in NodeBox. The list is defined between square brackets. Each item in the list is a piece of text (a string), therefore they are embedded in quotes. The list is assigned to a variable named groceries, but we know that variables can have any name we like, so it could be named g or stufftodo as well for that matter. <pre class="python">groceries = ["apples", "pears", "carrots", "cucumber", "yoghurt", "milk"]

print len(groceries)

>>> 6</pre></pre> A list can contain any kind of data: strings, numbers, and even lists. The len(list) command returns the number of items in a list. <h2>Retrieving and editing items in a list</h2> You can reference items in a list directly, by adding the index of the item you want to the variable name, between square brackets: <pre class="python">print groceries[0]

>>> apples</pre></pre> <pre class="python">groceries[3] = "banana"

print groceries

>>> ["apples", "pears", "carrots", "banana", "yoghurt", "milk"]</pre></pre> Don't forget: items in a list start with index zero. That's why in the above example the fourth element is replaced. The fourth element has index 3. <h2>Adding items to the list</h2> Data in a list can change over the course of time. New items can be added to it, or old items deleted from it, just like you can add stuff to buy to a grocery sticky-note, or scratch out things. <table border="0"> <tbody><tr> <td> <img src="/code/data/media/lists-append.jpg" alt="" /> </td> <td> To append an item to the end of the list: <pre class="python">groceries.append("eggs")

print groceries

>>> ["apples", "pears",

>>> "carrots", "banana",

>>> "yoghurt", "milk",

>>> "eggs"]</pre></pre> To remove the eggs from the list: <pre class="python">del groceries[6]</pre></pre> </td> </tr> </tbody></table> Items can be inserted halfway the list with the list.insert(i, item) command, where the i parameter is the position where you want the element to be. <h2>Looping through the list</h2> Looping through a list is the same as going to the mall and working off your grocery list top to bottom: the first item to collect are apples, once you have those, you need to fetch pears, and so on. Going through all the items in a list is one of the most essential things you do when working with data. You could retrieve the items in a list manually when there are only a few of them, but not when the list contains hundreds or even thousands of, for example, strings of text that you want to draw to the screen. <table border="0"> <tbody><tr> <td> <img src="/code/data/media/lists-loop.jpg" alt="" /> </td> <td> Using the for-loop: <pre class="python">for item in groceries:

print "buy some " + item

>>> buy some apples

>>> buy some pears

>>> buy some carrots

>>> buy some banana

>>> buy some yoghurt

>>> buy some milk

>>> buy some eggs</pre></pre> </td> </tr> </tbody></table> In the above example, the indented command(s) below the for command are executed for each item in the list. The item variable consecutively contains each item in the list. After that, the loop ends. <h2>Random items from the list</h2> You can let the code decide on its own which items to draw from the list by using the <a href="/code/Reference_|_choice()">choice()</a> command. <h2>Example</h2> This is a very braindead example of how you would use small lists to generate compositions. The script has a list of words it can use, and a list of colors it can use. After that, the script is free to act on its own: it takes random words and colors from the two lists and draws them to the screen in random sizes and rotations. It retains a certain coherence between different runs because of its limited words and colors. <img src="/code/data/media/lists-loop1.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop2.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop3.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop4.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop5.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop6.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop7.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop8.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop9.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop10.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop11.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop12.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop13.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop14.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop15.jpg" alt="" width="132" height="132" /> <img src="/code/data/media/lists-loop16.jpg" alt="" width="132" height="132" /> The code: <pre class="python">words = ["Lists", "are", "fun"]

colors = [color(1,0,0), color(1,1,1), color(0,0,0)]

for i in range(40):

x = random(WIDTH)

y = random(HEIGHT)

rotate(random(360))

fontsize(random(10,100))

fill(choice(colors))

text(choice(words), x, y)</pre></pre> <h2>Dictionaries</h2> Dictionaries are extremely useful kinds of lists that have string indices, keys, that you define yourself. Each key is unique and references an item in the list. Dictionaries are created with curly braces instead of square brackets. <pre class="python">heading = {}

heading["font"] = "ConduitITC-Medium"

heading["size"] = 18

heading["fill"] = color(1,0,0)

print heading.keys()

>>> ["font", "fill", "size"]

print heading["size"]

>>> 18

if heading.has_key("fill"): print "found!"

>>> found!</pre></pre> <h2>More on lists</h2> There is a lot more stuff you can do with lists, like sorting and reversing, or writing filter functions for lists. The full documentation is <a href="http://docs.python.org/tut/node7.html#SECTION007100000000000000000">here</a>, in the Python documentation.

</div>

</div>

</div>

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>

FilesExpand file tree

Lists.html

Latest commit

History

Lists.html

File metadata and controls