<?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 &#187; Blog</title>
	<atom:link href="http://curltable.the-yard.net/category/blog/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>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>

