<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Curltable - development blog</title>
	<atom:link href="http://curltable.the-yard.net/feed" rel="self" type="application/rss+xml" />
	<link>http://curltable.the-yard.net</link>
	<description>A snapshot of my projects.</description>
	<lastBuildDate>Mon, 26 Sep 2011 20:34:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>BoxFitting algorithm</title>
		<link>http://curltable.the-yard.net/blog/boxfitting-algorithm</link>
		<comments>http://curltable.the-yard.net/blog/boxfitting-algorithm#comments</comments>
		<pubDate>Sat, 17 Sep 2011 10:41:10 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[boxfitting]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[processing]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=299</guid>
		<description><![CDATA[I recently discovered http://www.complexification.net a nice site with tons of awesome computational art and much creative input. The one I liked the most (mainly because of its simplicity) was the gallery based on the box.fitting algorithm (http://www.complexification.net/gallery/machines/boxFitting/) Basically the algorithm works by the following steps (at least thats what i thought how it could work):

 [...]]]></description>
			<content:encoded><![CDATA[<p>I recently discovered <a href="http://www.complexification.net">http://www.complexification.net</a> a nice site with tons of awesome computational art and much creative input. The one I liked the most (mainly because of its simplicity) was the gallery based on the box.fitting algorithm (<a href="http://www.complexification.net/gallery/machines/boxFitting/">http://www.complexification.net/gallery/machines/boxFitting/</a>) Basically the algorithm works by the following steps (at least thats what i thought how it could work):</p>
<ul>
<li> seed boxes with a small initial size on random 2D positions</li>
<li> scale them up untill they intersect each other</li>
<li> (additionally!), if you use a background image, get the average color of the image part each box overlays and tint it</li>
<li> seed more boxes and loop all over again until the maximum amount of boxes is reached</li>
</ul>
<p>I wrote my own demo to this idea in processing (<a href="http://processing.org/">http://processing.org</a>).<br />
Demo: <a href="http://curltable.the-yard.net/files/20011/9/increasing_cubes.rar">Download</a><br />
<span id="more-299"></span><br />
The code to this, looks as following:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
</pre></td><td class="code"><pre class="java" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">//#######################################################################</span>
<span style="color: #666666; font-style: italic;">//######## Modify those parameters to fit your needs ####################</span>
<span style="color: #666666; font-style: italic;">//#######################################################################</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// how many quads to draw in total</span>
<span style="color: #000066; font-weight: bold;">int</span> totalItems <span style="color: #339933;">=</span> <span style="color: #cc66cc;">10000</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// the total amount is not neccessarily the amount of displayed quads because the algorithm hides quads which are the initial size of 1 because those can be the ones inside other quads</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// the scale factor (increase it to see faster but more overlapping results, decrease it to see slower but more precise result)</span>
<span style="color: #000066; font-weight: bold;">float</span> scaleFactor <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0.5</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// part size e.g. how many quads to produce and scale in each run</span>
<span style="color: #000066; font-weight: bold;">int</span> partSize <span style="color: #339933;">=</span> <span style="color: #cc66cc;">50</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// image to use</span>
<span style="color: #003399;">String</span> inputImagePath <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;input/image.jpg&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// image to produce</span>
<span style="color: #003399;">String</span> outputImagePath <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;output/image.jpg&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// screen size if your excepting to use/produce larger images than screen resolution ...increase those values</span>
<span style="color: #000066; font-weight: bold;">int</span> screenWidth <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1280</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">int</span> screenHeight <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1024</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//#######################################################################</span>
<span style="color: #666666; font-style: italic;">//######## No need to change something below ############################</span>
<span style="color: #666666; font-style: italic;">//#######################################################################</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// array to hold all drawn quads</span>
Space<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> rects<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// neutral initial scaling factor </span>
<span style="color: #000066; font-weight: bold;">float</span> scaling <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// image to base the average color collection on</span>
PImage img<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// used to determine if a part run is finished to start a new one</span>
<span style="color: #000066; font-weight: bold;">boolean</span> partFinished <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// used to check if the total processing is finished</span>
<span style="color: #000066; font-weight: bold;">boolean</span> finished <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// use key S to switch if the input image will be shown or not</span>
<span style="color: #000066; font-weight: bold;">boolean</span> showImage <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// uncomment to hide window gui</span>
<span style="color: #666666; font-style: italic;">/*
public void init() {
  frame.removeNotify();
  frame.setUndecorated(true);
  frame.addNotify();
  super.init();
} 
*/</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> setup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
  size<span style="color: #009900;">&#40;</span>screenWidth, screenHeight<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// if window gui is hidden position the scene</span>
  <span style="color: #666666; font-style: italic;">//frame.setLocation(0, 0);</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// init quad array</span>
  rects <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Space<span style="color: #009900;">&#91;</span>totalItems<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// load the image to use</span>
  img <span style="color: #339933;">=</span> loadImage<span style="color: #009900;">&#40;</span>inputImagePath<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// build the first amount of quads</span>
  <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> partSize<span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">float</span> x <span style="color: #339933;">=</span> random<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>, img.<span style="color: #006633;">width</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">float</span> y <span style="color: #339933;">=</span> random<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>, img.<span style="color: #006633;">height</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Space<span style="color: #009900;">&#40;</span>x, y, x<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span>, y<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> draw<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
  background<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #666666; font-style: italic;">// hide or show input image</span>
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>showImage<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    image<span style="color: #009900;">&#40;</span>img, <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>finished<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    loadPixels<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    img.<span style="color: #006633;">loadPixels</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
    <span style="color: #666666; font-style: italic;">// when the last group of quads is finished start a new one</span>
    <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>partFinished<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i <span style="color: #339933;">=</span> partSize<span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> partSize <span style="color: #339933;">+</span> partSize <span style="color: #339933;">&amp;&amp;</span> i <span style="color: #339933;">&lt;</span> rects.<span style="color: #006633;">length</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">float</span> x <span style="color: #339933;">=</span> random<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>, screenWidth<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">float</span> y <span style="color: #339933;">=</span> random<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>, screenHeight<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Space<span style="color: #009900;">&#40;</span>x, y, x<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span>, y<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
      partSize <span style="color: #339933;">+=</span> partSize<span style="color: #339933;">;</span>
      <span style="color: #666666; font-style: italic;">// reset scaling factor to start from</span>
      scaling <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #666666; font-style: italic;">// loop over every available quad</span>
    <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> partSize <span style="color: #339933;">&amp;&amp;</span> i <span style="color: #339933;">&lt;</span> rects.<span style="color: #006633;">length</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span> <span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #666666; font-style: italic;">// check if the quad already intersects another quad to speed up things e.g. draw it right away</span>
      <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getIntersect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// if it doesn't intersect before loop over every quad except the current one to check for intersection</span>
        <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> k <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> k <span style="color: #339933;">&lt;</span> partSize <span style="color: #339933;">&amp;&amp;</span> k <span style="color: #339933;">&lt;</span> rects.<span style="color: #006633;">length</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span> <span style="color: #339933;">;</span>k<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">!=</span> k <span style="color: #339933;">&amp;&amp;</span> rectRectIntersect<span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span> <span style="color: #339933;">+</span> rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span> <span style="color: #339933;">+</span> rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getHeight</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, rects<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span>, rects<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span>, rects<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span> <span style="color: #339933;">+</span> rects<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, rects<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span><span style="color: #339933;">+</span>rects<span style="color: #009900;">&#91;</span>k<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getHeight</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// set status if intersection occured</span>
            rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">setIntersect</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">//break;</span>
          <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #666666; font-style: italic;">// when the current quad doesn't intersect with an other, scale it and recalculate average image color in quad range</span>
        <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getIntersect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #666666; font-style: italic;">// scale</span>
          rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">setScaling</span><span style="color: #009900;">&#40;</span>scaling<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #666666; font-style: italic;">// average color</span>
          <span style="color: #000066; font-weight: bold;">int</span> r <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">int</span> g <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">int</span> b <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">int</span> count <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
          <span style="color: #666666; font-style: italic;">// loop over every pixel in the quad</span>
          <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> x <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span><span style="color: #339933;">;</span> x <span style="color: #339933;">&lt;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> x<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> y <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span><span style="color: #339933;">;</span> y <span style="color: #339933;">&lt;</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getHeight</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> y<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
              <span style="color: #666666; font-style: italic;">// pixel position to get color values from</span>
              <span style="color: #000066; font-weight: bold;">int</span> loc <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span>x <span style="color: #339933;">+</span> y <span style="color: #339933;">*</span> img.<span style="color: #006633;">width</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #000000; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// add color values</span>
                r <span style="color: #339933;">+=</span> red<span style="color: #009900;">&#40;</span>img.<span style="color: #006633;">pixels</span><span style="color: #009900;">&#91;</span>loc<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                g <span style="color: #339933;">+=</span> green<span style="color: #009900;">&#40;</span>img.<span style="color: #006633;">pixels</span><span style="color: #009900;">&#91;</span>loc<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                b <span style="color: #339933;">+=</span> blue<span style="color: #009900;">&#40;</span>img.<span style="color: #006633;">pixels</span><span style="color: #009900;">&#91;</span>loc<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #666666; font-style: italic;">// pixel amount of the quad</span>
                count<span style="color: #339933;">++;</span>
              <span style="color: #009900;">&#125;</span> 
              <span style="color: #000000; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span><span style="color: #003399;">ArrayIndexOutOfBoundsException</span> e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #666666; font-style: italic;">// might occur that pixels outside the image get selected, catch that here</span>
              <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
          <span style="color: #009900;">&#125;</span>
          <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>count <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// get the average color values by deviding by the pixel amount</span>
            r <span style="color: #339933;">=</span> round<span style="color: #009900;">&#40;</span>r <span style="color: #339933;">/</span> count<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            g <span style="color: #339933;">=</span> round<span style="color: #009900;">&#40;</span>g <span style="color: #339933;">/</span> count<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            b <span style="color: #339933;">=</span> round<span style="color: #009900;">&#40;</span>b <span style="color: #339933;">/</span> count<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #666666; font-style: italic;">// save the colors to use it when the scaling is finished</span>
            rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">setColor</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>r, <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>g, <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span><span style="color: #009900;">&#41;</span>b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
      <span style="color: #666666; font-style: italic;">// not quite accurate but here we prevent all unwanted quads (e.g. the ones inside other quads) to be drawn, most of them are in size equal to 1 which is the initial size</span>
      <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// use saved average color to fill quad</span>
        fill<span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getColor</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">// draw quad</span>
        rect<span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getHeight</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    partFinished <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">// determine if all quads for the current round are finished</span>
    <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> j <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;</span> partSize <span style="color: #339933;">&amp;&amp;</span> j <span style="color: #339933;">&lt;</span> rects.<span style="color: #006633;">length</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>rects<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getIntersect</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        partFinished <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #666666; font-style: italic;">//scale up</span>
    scaling <span style="color: #339933;">+=</span> scaleFactor<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>partSize <span style="color: #339933;">&gt;</span> totalItems<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      finished <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
      <span style="color: #666666; font-style: italic;">// everything is done...save the image</span>
      PImage partial <span style="color: #339933;">=</span> get<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,img.<span style="color: #006633;">width</span>,img.<span style="color: #006633;">height</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      partial.<span style="color: #006633;">save</span><span style="color: #009900;">&#40;</span>outputImagePath<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span> 
  <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">// everything is finished ... only drawing is left</span>
    <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> rects.<span style="color: #006633;">length</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span> <span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// use saved average color to fill quad</span>
        fill<span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getColor</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">// draw quad</span>
        rect<span style="color: #009900;">&#40;</span>rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">x</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getUpLeft</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">y</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getWidth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, rects<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #006633;">getHeight</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">void</span> keyReleased<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>key <span style="color: #339933;">==</span> <span style="color: #0000ff;">'s'</span> <span style="color: #339933;">||</span> key <span style="color: #339933;">==</span> <span style="color: #0000ff;">'S'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    showImage <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>showImage <span style="color: #339933;">==</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #000066; font-weight: bold;">false</span> <span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #666666; font-style: italic;">// compares intersection between two quads and input image borders</span>
<span style="color: #000066; font-weight: bold;">boolean</span> rectRectIntersect<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span> left, <span style="color: #000066; font-weight: bold;">float</span> top, <span style="color: #000066; font-weight: bold;">float</span> right, <span style="color: #000066; font-weight: bold;">float</span> bottom, <span style="color: #000066; font-weight: bold;">float</span> otherLeft, <span style="color: #000066; font-weight: bold;">float</span> otherTop, <span style="color: #000066; font-weight: bold;">float</span> otherRight, <span style="color: #000066; font-weight: bold;">float</span> otherBottom<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #339933;">!</span><span style="color: #009900;">&#40;</span>left <span style="color: #339933;">&gt;=</span> otherRight <span style="color: #339933;">||</span> right <span style="color: #339933;">&lt;=</span> otherLeft <span style="color: #339933;">||</span> top <span style="color: #339933;">&gt;=</span> otherBottom <span style="color: #339933;">||</span> bottom <span style="color: #339933;">&lt;=</span> otherTop<span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>right <span style="color: #339933;">&gt;=</span> img.<span style="color: #006633;">width</span> <span style="color: #339933;">||</span> bottom <span style="color: #339933;">&gt;=</span> img.<span style="color: #006633;">height</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Helper class to save coordinates, scaling, color and intersection status of a quad</span>
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> Space <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">// the up left corner of the quad</span>
  <span style="color: #000066; font-weight: bold;">float</span> upLeftX<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">float</span> upLeftY<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// the down right corner of the quad</span>
  <span style="color: #000066; font-weight: bold;">float</span> downRightX<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">float</span> downRightY<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// the scale factor for the quad</span>
  <span style="color: #000066; font-weight: bold;">float</span> scaling<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// color values</span>
  <span style="color: #000066; font-weight: bold;">int</span> r<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">int</span> g<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">int</span> b<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// intersection status to determine if this quad intersected an other quad</span>
  <span style="color: #000066; font-weight: bold;">boolean</span> intersected<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// constructor</span>
  Space<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span> x1, <span style="color: #000066; font-weight: bold;">float</span> y1, <span style="color: #000066; font-weight: bold;">float</span> x2, <span style="color: #000066; font-weight: bold;">float</span> y2<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    upLeftX <span style="color: #339933;">=</span> x1<span style="color: #339933;">;</span>
    upLeftY <span style="color: #339933;">=</span> y1<span style="color: #339933;">;</span>
    downRightX <span style="color: #339933;">=</span> x2<span style="color: #339933;">;</span>
    downRightY <span style="color: #339933;">=</span> y2<span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">// 1 = no scaling</span>
    scaling <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">// no intersection yet</span>
    intersected <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">// initial color</span>
    r <span style="color: #339933;">=</span> g <span style="color: #339933;">=</span> b <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// set the color</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> setColor<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> newR, <span style="color: #000066; font-weight: bold;">int</span> newG, <span style="color: #000066; font-weight: bold;">int</span> newB<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    r <span style="color: #339933;">=</span> newR<span style="color: #339933;">;</span>
    g <span style="color: #339933;">=</span> newG<span style="color: #339933;">;</span>
    b <span style="color: #339933;">=</span> newB<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the color</span>
  <span style="color: #000000; font-weight: bold;">public</span> color getColor<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">return</span> color<span style="color: #009900;">&#40;</span>r, g, b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// set the intersection status</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> setIntersect<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">boolean</span> i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    intersected <span style="color: #339933;">=</span> i<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the intersection status</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">boolean</span> getIntersect<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">return</span> intersected<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// set the scaling for the quad</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> setScaling<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">float</span> s<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    scaling <span style="color: #339933;">=</span> s<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the up left corner</span>
  <span style="color: #000000; font-weight: bold;">public</span> PVector getUpLeft<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> PVector<span style="color: #009900;">&#40;</span>upLeftX, upLeftY<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the down right corner</span>
  <span style="color: #000000; font-weight: bold;">public</span> PVector getDownRight<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> PVector<span style="color: #009900;">&#40;</span>downRightX, downRightY<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the width</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">float</span> getWidth<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>downRightX <span style="color: #339933;">-</span> upLeftX<span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> scaling<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// get the height</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">float</span> getHeight<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span>downRightY <span style="color: #339933;">-</span> upLeftY<span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> scaling<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>The demo includes an example image which lies in the input folder and will produce an image in the output folder.<br />
Input: <a href="http://curltable.the-yard.net/files/2011/9/inputimage.jpg">demo image</a><br />
Output: <a href="http://curltable.the-yard.net/files/2011/9/outputimage.jpg">demo result</a></p>
<p>If your planning to rebuild the application for your system make sure to copy those two folders to the root project folder.</p>
<p>If your not satisfied with the result you can modify a few parameters to fit your needs:</p>
<ul>
<li><strong>totalItems</strong>: the amount of boxes to draw (is set pretty low in the demo to 10000) If you have large spaces left between boxes you should increase this value if your machine can handle it.</li>
<li><strong>scaleFactor</strong>: The value by which each box will be scaled in every draw call. Larger values will produce faster results but boxes may overlap more which will look bad.</li>
<li><strong>partSize</strong>: The amount of boxes to seed/draw in each cycle. Less boxes will produce larger ones at the beginning.</li>
</ul>
<p>Have Fun!</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/blog/boxfitting-algorithm/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Curltable V1.0 Alpha released</title>
		<link>http://curltable.the-yard.net/curltable/curltable-v1-0-alpha-released</link>
		<comments>http://curltable.the-yard.net/curltable/curltable-v1-0-alpha-released#comments</comments>
		<pubDate>Sun, 21 Mar 2010 22:30:10 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Curltable]]></category>
		<category><![CDATA[alpha]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[release]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=266</guid>
		<description><![CDATA[The first release is ready for sharing. You can find the source at http://github.com/DHoffm/Curltable.
If somebody needs an installer feel free to send me an email and I will see what I can do.
There is still a long way to go so be nice with your comments!]]></description>
			<content:encoded><![CDATA[<p>The first release is ready for sharing. You can find the source at <a href="http://github.com">Github</a>. </p>
<p><strong>Master:</strong> <a href="http://github.com/DHoffm/Curltable">http://github.com/DHoffm/Curltable</a><br />
<strong>Archives:</strong> <a href="http://github.com/DHoffm/Curltable/zipball/master">Zip</a>, <a href="http://github.com/DHoffm/Curltable/tarball/master">TAR</a></p>
<p>If somebody needs an installer feel free to send me an email and I will see what I can do.<br />
There is still a long way to go so be nice with your comments!</p>
<p>Leave your interesting and creative responses in the comment section beloooowwwww.</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/curltable/curltable-v1-0-alpha-released/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Mouse Trail</title>
		<link>http://curltable.the-yard.net/curltable/mouse-trail</link>
		<comments>http://curltable.the-yard.net/curltable/mouse-trail#comments</comments>
		<pubDate>Mon, 11 Jan 2010 13:25:46 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Curltable]]></category>
		<category><![CDATA[ccv]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[cursor]]></category>
		<category><![CDATA[elasticity]]></category>
		<category><![CDATA[friction]]></category>
		<category><![CDATA[mouse]]></category>
		<category><![CDATA[multitouch]]></category>
		<category><![CDATA[nuigroup]]></category>
		<category><![CDATA[trail]]></category>
		<category><![CDATA[tuio]]></category>
		<category><![CDATA[xna]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=227</guid>
		<description><![CDATA[To improve the feedback of the turntable, especially for the plate, a bit I wrote a simple DrawableGameComponent which draw&#8217;s a mouse trail. Simply call it in your game via:

1
Cursor c = new Cursor&#40;this&#41;;

The component will register itself. You may need to adjust the elasticity, friction and the scaling of each Trail Point in the [...]]]></description>
			<content:encoded><![CDATA[<p>To improve the feedback of the turntable, especially for the plate, a bit I wrote a simple <a href="http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.drawablegamecomponent.aspx">DrawableGameComponent</a> which draw&#8217;s a mouse trail. Simply call it in your game via:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;">Cursor c <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> Cursor<span style="color: #000000;">&#40;</span><span style="color: #0600FF;">this</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<p><span id="more-227"></span>The component will register itself. You may need to adjust the <strong>elasticity</strong>,<strong> friction</strong> and the <strong>scaling</strong> of each Trail Point in the component to fit your needs.<br />
</br><br />
Download: <a href="http://curltable.the-yard.net/files/2010/1/mouseTrail.rar">MouseTrail 1.0</a><br />
Screenshots: <a href="http://curltable.the-yard.net/files/2010/1/mouseTrailScreenshot.png">MouseTrail in Curltable</a>, <a href="http://curltable.the-yard.net/files/2010/1/mouseTrailScreenshot2.png">Standalone</a></p>
<p>In addition I setup a little multitouch device like the one from <a href="http://www.youtube.com/watch?v=pQpr3W-YmcQ">here</a> and used the <a href="http://www.tuio.org/?software">TUIO library and the TUIO C# Client</a> to have multiple Cursors. You will need to download the <a href="http://ccv.nuigroup.com/">CCV</a> from the NUIGroup too.<br />
</br><br />
Download: <a href="http://curltable.the-yard.net/files/2010/1/mouseTrailMultiTouch.rar">MouseTrail MultiTouch</a></p>
<p>Feel free to use it in your Game.</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/curltable/mouse-trail/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Use a potentiometer in XNA</title>
		<link>http://curltable.the-yard.net/curltable/use-a-potentiometer-in-xna</link>
		<comments>http://curltable.the-yard.net/curltable/use-a-potentiometer-in-xna#comments</comments>
		<pubDate>Sat, 12 Dec 2009 15:13:33 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Curltable]]></category>
		<category><![CDATA[arduino]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[potentiometer]]></category>
		<category><![CDATA[readExisting]]></category>
		<category><![CDATA[readLine]]></category>
		<category><![CDATA[serialPort]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=186</guid>
		<description><![CDATA[During my first researches on the curltable I thought it would be nice to have some functions controlled by external elements such as potentiometers, buttons or sliders. So I gave it a try and used my Arduino and the serialPort class for communication to the board. What I tried was to control the tempo of [...]]]></description>
			<content:encoded><![CDATA[<p>During my first researches on the <a href="http://curltable.the-yard.net/curltable/the-curltable">curltable</a> I thought it would be nice to have some functions controlled by external elements such as potentiometers, buttons or sliders. So I gave it a try and used my Arduino and the <a href="http://msdn.microsoft.com/en-us/library/system.io.ports.serialport.aspx">serialPort</a> class for communication to the board. What I tried was to control the tempo of an audio track by a potentiometer.<span id="more-186"></span> Normally a <a href="http://msdn.microsoft.com/en-us/library/system.io.ports.serialport.readline.aspx">SerialPort.readline()</a> should be enough to get the right data from the desired Port but in this case I tried to integrate it into XNA. The problem here is that your game can either run with a <a href="http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.game.isfixedtimestep.aspx">fixed</a> or a variable timestep. If you are using a variable timestep in XNA the readline method should work for you, if not it will hang because of timing issues. To get around that I used the <a href="http://msdn.microsoft.com/en-us/library/system.io.ports.serialport.readexisting.aspx">SerialPort.ReadExisting()</a> method instead. This one is reading the date without any timeout. Different then the readline method you need to seperate your incoming information from binary data such as &#8216;\n&#8217; (newline) and &#8216;\r&#8217; (carriage return) on your own. Also sometimes the information you get from this method are incorrect or incomplete. So you need to check that too. I set up a little example which can be downloaded from <a href="http://curltable.the-yard.net/files/2009/12/xnaPotentiometer.rar">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/curltable/use-a-potentiometer-in-xna/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>University is paying my Thesis</title>
		<link>http://curltable.the-yard.net/curltable/university-is-paying-my-thesis</link>
		<comments>http://curltable.the-yard.net/curltable/university-is-paying-my-thesis#comments</comments>
		<pubDate>Wed, 09 Dec 2009 14:51:16 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Curltable]]></category>
		<category><![CDATA[erfurt]]></category>
		<category><![CDATA[thesis]]></category>
		<category><![CDATA[turntable]]></category>
		<category><![CDATA[university]]></category>
		<category><![CDATA[vfai]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=131</guid>
		<description><![CDATA[For the first time the VFAI announced that the best thesis for bachelor and master students will be honored this year. The Curltable was nominated at my faculty at University of Applied Science Erfurt. Unexpectedly my thesis won and I recieved some cash which was luckily more than I payed for the printing of it. [...]]]></description>
			<content:encoded><![CDATA[<p>For the first time the <a href="http://www.ai.fh-erfurt.de/start/foerderverein.html">VFAI</a> announced that the best thesis for bachelor and master students will be honored this year. The Curltable was nominated at my faculty at <a href="http://www.fh-erfurt.de">University of Applied Science Erfurt</a>. Unexpectedly my thesis won and I recieved some cash which was luckily more than I payed for the printing of it.<span id="more-131"></span> The honor took place beside this years graduate celebration. Some pictures of this event can be found <a href="http://www.ai.fh-erfurt.de/galerien/fotogalerien/zeugnisausgabe-06112009/">here</a>. Again, thanks to everybody who made that possible, most of them where already named in my thesis.</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/curltable/university-is-paying-my-thesis/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Curltable</title>
		<link>http://curltable.the-yard.net/curltable/the-curltable</link>
		<comments>http://curltable.the-yard.net/curltable/the-curltable#comments</comments>
		<pubDate>Wed, 02 Dec 2009 14:16:27 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Curltable]]></category>
		<category><![CDATA[bass]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[thesis]]></category>
		<category><![CDATA[touchscreen]]></category>
		<category><![CDATA[turntable]]></category>
		<category><![CDATA[un4seen]]></category>
		<category><![CDATA[xna]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=110</guid>
		<description><![CDATA[This is hopefully one of many posts about my ongoing work for the Curltable. You may ask what exactly the curltable is? Well it&#8217;s basically another approach on integrating digital music into a dj mix. There are already several other approaches out there which work fine for most people. What I tried to accomplish with [...]]]></description>
			<content:encoded><![CDATA[<p>This is hopefully one of many posts about my ongoing work for the <strong>Curltable</strong>. You may ask what exactly the curltable is? Well it&#8217;s basically another approach on integrating digital music into a dj mix. There are already several other approaches out there which work fine for most people. What I tried to accomplish with this software is to simplify the mixing with digital music and to share a solution that is affordable.<span id="more-110"></span> The complete paper on that idea can be found <a href="http://curltable.the-yard.net/files/2009/12/ba-thesis-david-hoffmann.pdf">here</a>. To get a first impression on it I uploaded a video, which I used during my presentation at the University of Applied Science Erfurt. You can also find some pictures of it on my <a href="http://www.flickr.com/photos/davidhoffmann/sets/72157622345436862/">flickr page</a>.</p>
<div class="videoStyle"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/5DIbuYXavOg&amp;hl=de_DE&amp;fs=1&amp;" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/5DIbuYXavOg&amp;hl=de_DE&amp;fs=1&amp;" wmode="transparent"></embed></object></div>
<p>The software is developed in <a href="http://en.wikipedia.org/wiki/Microsoft_XNA">XNA</a>. To integrate audio I used the <a href="http://www.un4seen.com/">Bass Library </a> and several add-ons. Currently I&#8217;m working hard on the optimization of the scratching mechanism and some other functionalities like looping and id3 tagging. If you have any questions or suggestions on that idea let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/curltable/the-curltable/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Pc talking to my Nikon D40</title>
		<link>http://curltable.the-yard.net/blog/pc-talking-to-my-nikon-d40</link>
		<comments>http://curltable.the-yard.net/blog/pc-talking-to-my-nikon-d40#comments</comments>
		<pubDate>Thu, 26 Nov 2009 10:36:59 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[arduino]]></category>
		<category><![CDATA[csharp]]></category>
		<category><![CDATA[d40]]></category>
		<category><![CDATA[lapse]]></category>
		<category><![CDATA[nikon]]></category>
		<category><![CDATA[remote]]></category>
		<category><![CDATA[time]]></category>

		<guid isPermaLink="false">http://curltable.the-yard.net/?p=74</guid>
		<description><![CDATA[I was working lately on a simple peace of program to control my Nikon D40 by a PC. This little app communicates through my Arduino board with the camera. To get my d40 to capture something I used a bit of code from Gustav von Roth which can be found here. This Code sends a [...]]]></description>
			<content:encoded><![CDATA[<p>I was working lately on a simple peace of program to control my Nikon D40 by a PC. This little app communicates through my <a href="http://www.arduino.cc/">Arduino</a> board with the camera. To get my d40 to capture something I used a bit of code from Gustav von Roth which can be found <a href="http://www.vonroth.com/Arduino/NikonIrControl/">here</a>. This Code sends a signal over an IR Led to generate time lapse effects. An example is shown below.<span id="more-74"></span></p>
<div class="videoStyle"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/nTRwuKXf7QY&amp;hl=de_DE&amp;fs=1&amp;" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/nTRwuKXf7QY&amp;hl=de_DE&amp;fs=1&amp;" wmode="transparent"></embed></object></div>
<p>I captured about 1 hour with an interval of 1000ms in this example. The Code and Arduino Sketch can be downloaded from <a href="http://curltable.the-yard.net/files/2009/11/NikonRemoteV1.0.rar">here</a>. If you have any problems with setting this up feel free to leave a comment. The next Version will include some Servo controlling to move the camera while capturing.</p>
]]></content:encoded>
			<wfw:commentRss>http://curltable.the-yard.net/blog/pc-talking-to-my-nikon-d40/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

