Jekyll2022-03-22T12:12:17+01:00https://atc1.aut.uah.es/~david/feed.xmlDavid’s websiteAssistant professorDavid F. Barrerodavid fernandezb YOUKNOW aut uah esPlotting choropleth maps in Lattice2017-11-22T15:33:25+01:002017-11-22T15:33:25+01:00https://atc1.aut.uah.es/~david/notes/2017/11/choropleth-maps-in-lattice<p>Chropleth maps are a data visualization tool quite used in Social Sciences, this kind of maps represents an administrative unit (countries, states, etc) along with a colour that represents a variable of interest. <a href="https://en.wikipedia.org/wiki/Choropleth_map">Wikipedia</a> contains a nice article about chropleth maps.</p>
<p>R provides a complete collection of packages to deal with maps in general and chropleth maps in particular: <a href="http://blog.xavier-fim.net/2012/10/using-r-to-draw-maps-on-country-data/">rworldmap</a>, <a href="http://r-forge.r-project.org/projects/maptools/">maptools</a>. Perhaps the most widely used R package to visualize geographical data is ggplot, but lattice also ofers a much simpler method to plot maps.</p>
<p>Many ideas and code exposed in this note were taken from <a href="http://www.nickeubank.com/wp-content/uploads/2015/10/RGIS3_MakingMaps_part1_mappingVectorData.html#controlling-extent">Making maps in R</a> and <a href="http://www.xavigimenez.net/blog/2012/09/visualizing-data-with-r/">Visualizing data with R</a>.</p>
<h1 id="preliminary-steps">Preliminary steps</h1>
<p>In first place we need some libraries and data to visualize, in this case we will visualize the population density in Spain and absolute population in Spanish regions, to this end we first load our data:</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">library</span><span class="p">(</span><span class="n">sp</span><span class="p">)</span><span class="w">
</span><span class="n">data</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">read.table</span><span class="p">(</span><span class="n">text</span><span class="o">=</span><span class="s2">"
'Comunidad' 'density' 'population'
'Andalucía' 96 8409657
'Aragón' 28 1317076
'Cantabria' 109 581477
'Castilla-La Mancha' 26 2040379
'Castilla y León' 26 2435797
'Cataluña' 232 7441176
'Ceuta y Melilla' 6000 170000
'Comunidad de Madrid' 807 6475872
'Comunidad Foral de Navarra' 62 640502
'Comunidad Valenciana' 212 4934993
'Extremadura' 26 1077715
'Galicia' 92 2710607
'Islas Baleares' 231 1150839
'Islas Canarias' 289 2154905
'La Rioja' 62 312647
'País Vasco' 300 2167707
'Principado de Asturias' 98 1034449
'Región de Murcia' 130 1472949"</span><span class="p">,</span><span class="w"> </span><span class="n">header</span><span class="o">=</span><span class="kc">TRUE</span><span class="p">)</span></code></pre></figure>
<p>That simply creates a data table with the region name, population density and population.</p>
<h1 id="map-loading">Map loading</h1>
<p>Perhaps the most tricky topic in plotting maps is that you need a map first. There are many souces to find maps and the package rwordmap comes with a word map which simplies the plotting process. A good source of european maps is <a href="http://ec.europa.eu/eurostat/web/nuts/overview">Eurostat</a>. In our case we will use <a href="http://www.gadm.org/">GADM</a>, a terrific database with lots of administrative areas maps in several formats. We have used the <a href="http://www.gadm.org/download">map of Spain in R format</a>, maps in GADM comes with different levels of details, in this case we have selected the level 1, corresponding to the Spanish autnomous regions, in case you were interested in getting the map at a province level, level 2 should be your choice. The is a direct link to the map <a href="ESP_adm1.rds">here</a>.</p>
<p>The map is a R object stored in RDF, so reading it from R is straitforward with the sp package.</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">spain</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">readRDS</span><span class="p">(</span><span class="s2">"ESP_adm1.rds"</span><span class="p">)</span></code></pre></figure>
<p>The structure of the dataframe is quite complex (as you can obverve with a inspection str(spain)). Right now you only should know that there is a column named NAME_1 containing the region name at level 1 (region, in this case). Similarly, the dataframe contains a column NAME_0 storing the region name at level 0 (the country, in this case Spain for all the instances).</p>
<p>Another tricky task is merging geopraphical data with our data. In our case this step is quite simple, but in a more realistic scenario it would need some coding. To merge data we need to add new columns to the dataframe with our data, take into account that the order of our data determines to which region it is going to be mapped.</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">spain</span><span class="o">$</span><span class="n">density</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">as.numeric</span><span class="p">(</span><span class="n">data</span><span class="o">$</span><span class="n">density</span><span class="p">)</span><span class="w">
</span><span class="n">spain</span><span class="o">$</span><span class="n">population</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">as.numeric</span><span class="p">(</span><span class="n">data</span><span class="o">$</span><span class="n">population</span><span class="p">)</span></code></pre></figure>
<h1 id="plot-parameters">Plot parameters</h1>
<p>In order to get a nice customized map, we need to set up some parameters first. We begin defining a customized colour palette with 32 colours from white to orange.</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">colorPalette</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">colorRampPalette</span><span class="p">(</span><span class="nf">c</span><span class="p">(</span><span class="s2">"white"</span><span class="p">,</span><span class="w"> </span><span class="s2">"orange"</span><span class="p">))(</span><span class="m">32</span><span class="p">)</span></code></pre></figure>
<p>By default, Lattice will zoom and shift the map to cover the entire region represented in our dataframe. Most likely we will need to customize it in order to get a nicer maps. This is the case of Spain, the Canary Islands are far away from the continental land, so a common practice is to plot it next to the mainland. In our case, we will simply not plot it. Just execute the following lines:</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="c1"># Change these parameters</span><span class="w">
</span><span class="n">scale.parameter</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">0.65</span><span class="w"> </span><span class="c1"># scaling paramter. less than 1 is zooming in, more than 1 zooming out. </span><span class="w">
</span><span class="n">xshift</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">4.5</span><span class="w"> </span><span class="c1"># Shift to right in map units. </span><span class="w">
</span><span class="n">yshift</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">4</span><span class="w"> </span><span class="c1"># Shift to left in map units. </span><span class="w">
</span><span class="n">original.bbox</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">spain</span><span class="o">@</span><span class="n">bbox</span><span class="w"> </span><span class="c1"># Pass bbox of your Spatial* Object. </span><span class="w">
</span><span class="c1"># Just copy-paste the following</span><span class="w">
</span><span class="n">edges</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">original.bbox</span><span class="w">
</span><span class="n">edges</span><span class="p">[</span><span class="m">1</span><span class="p">,</span><span class="w"> </span><span class="p">]</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="p">(</span><span class="n">edges</span><span class="p">[</span><span class="m">1</span><span class="p">,</span><span class="w"> </span><span class="p">]</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="n">mean</span><span class="p">(</span><span class="n">edges</span><span class="p">[</span><span class="m">1</span><span class="p">,</span><span class="w"> </span><span class="p">]))</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="n">scale.parameter</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="n">mean</span><span class="p">(</span><span class="n">edges</span><span class="p">[</span><span class="m">1</span><span class="p">,])</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="n">xshift</span><span class="w">
</span><span class="n">edges</span><span class="p">[</span><span class="m">2</span><span class="p">,</span><span class="w"> </span><span class="p">]</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="p">(</span><span class="n">edges</span><span class="p">[</span><span class="m">2</span><span class="p">,</span><span class="w"> </span><span class="p">]</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="n">mean</span><span class="p">(</span><span class="n">edges</span><span class="p">[</span><span class="m">2</span><span class="p">,</span><span class="w"> </span><span class="p">]))</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="n">scale.parameter</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="n">mean</span><span class="p">(</span><span class="n">edges</span><span class="p">[</span><span class="m">2</span><span class="p">,])</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="n">yshift</span></code></pre></figure>
<h1 id="map-plotting">Map plotting</h1>
<p>Finally we are in position to plot the map, just execute the following code.</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="n">spplot</span><span class="p">(</span><span class="n">spain</span><span class="p">,</span><span class="w"> </span><span class="s2">"density"</span><span class="p">,</span><span class="w"> </span><span class="n">col.regions</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">colorPalette</span><span class="p">,</span><span class="w"> </span><span class="n">col</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">,</span><span class="w">
</span><span class="n">xlim</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">edges</span><span class="p">[</span><span class="m">1</span><span class="p">,</span><span class="w"> </span><span class="p">],</span><span class="w"> </span><span class="n">ylim</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">edges</span><span class="p">[</span><span class="m">2</span><span class="p">,</span><span class="w"> </span><span class="p">],</span><span class="w">
</span><span class="n">main</span><span class="o">=</span><span class="s2">"Densidad de población por comunidad autónoma"</span><span class="p">)</span></code></pre></figure>
<p>Which yield the following map.</p>
<p><img src="density.png" alt="Population density in Spain" /></p>
<p>The final code is as follows.</p>
<script src="https://gist.github.com/dfbarrero/c7d20aaee5e5073c1fa9a41d0e159160.js"></script>
<p>Since spplot() is a Lattice function, the usual Lattice parameters can be used. For more information, type ?spplot.</p>David F. Barrerodavid fernandezb YOUKNOW aut uah esChropleth maps are a data visualization tool quite used in Social Sciences, this kind of maps represents an administrative unit (countries, states, etc) along with a colour that represents a variable of interest. Wikipedia contains a nice article about chropleth maps.Symbolic regression with Genetic Programming and R2017-05-14T16:33:25+02:002017-05-14T16:33:25+02:00https://atc1.aut.uah.es/~david/notes/2017/05/symbolic-regression-with-genetic-programming-and-r<p>RGP is a R-based Genetic Programming implementation designed to address symbolic regression problems. It is under the umbrella of <a href="http://rsymbolic.org/">Rsymbolic</a> and hosted by the Cologne University of Applied Sciences.</p>
<p><a href="http://rsymbolic.org/projects/rgp">RGP web site</a> provides full documentation, including a collection of <a href="http://rsymbolic.org/projects/rgp/wiki/Tutorials">tutorials</a> and a <a href="https://cran.r-project.org/web/packages/rgp/vignettes/rgp_introduction.pdf">user’s manual</a>.</p>
<p>In addition to plain old-style tree based Genetic Programming, RGP provides some interesting ``advanded’’ features such as Strongly Typed Genetic Programming, evolutionary classification rules and good integration with SPOT (Sequential Parameter Optimization Toolbox).</p>
<p>RGP can be used programatically with R but it includes an intuitive GUI as well.</p>
<h1 id="installation">Installation</h1>
<p>First install R the package <code class="language-plaintext highlighter-rouge">RGP</code></p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="o">></span><span class="w"> </span><span class="n">install.packages</span><span class="p">(</span><span class="s2">"rgp"</span><span class="p">)</span></code></pre></figure>
<p>Then you can load the library</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="o">></span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="s2">"rgp"</span><span class="p">)</span></code></pre></figure>
<p>Optionally, an UI can also be installed.</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="o">></span><span class="w"> </span><span class="n">install.packages</span><span class="p">(</span><span class="s2">"rgpui"</span><span class="p">)</span></code></pre></figure>
<h1 id="rgp-graphical-interface">RGP graphical interface</h1>
<p>RGP comes with an intuitive GUI with many usefull features that makes exploratory experiments quite straitforward. In particular the GUI allows CSV data loading, regression run, control and result analysis. However, the gain full control on the evolutonary process it is better to use its API.</p>
<p>Run the GUI with</p>
<figure class="highlight"><pre><code class="language-r" data-lang="r"><span class="o">></span><span class="w"> </span><span class="n">library</span><span class="p">(</span><span class="s2">"rgpui"</span><span class="p">)</span><span class="w">
</span><span class="o">></span><span class="w"> </span><span class="n">symbolicRegressionUi</span><span class="p">()</span></code></pre></figure>
<p>If your lucky, a local webserver will be launched along with a browser pointing to http://localhost:1447/ as follows.</p>
<p><img src="rgpuiScreenshot.png" alt="RGPUi interface screenshot" /></p>
<p>The GUI comes with a predefined multiobjective-evolutionary algorithm, which includes an error measure and a measure of the solution complexity to introduce some parsimony pressure. This implements a basic yet effective bloat control mechanism. RGP UI provides five error measures: SMSE, SSSE, RMSE, SSE and MAE. The exact meaning of these acronyms is unclear to me.</p>
<p>In order to test the GUI, it is necesary a dataset in CSV format. A classical dataset for regression is <a href="https://vincentarelbundock.github.io/Rdatasets/datasets.html">Longley</a>, you can <a href="longley.csv">download Longley here</a>. The goal of this dataset is to predict the unemployed rate and contains six numerical attributes. Once you upload it, the evolutionary process can be run. However, for a reason I could not identify, the attributes “GNP.deflactor” and “Armed.Forced” makes the algorithm crash, so it is necesary to remove them from the regression formula. This is not perfect, but it works.</p>
<p>It seems that RGP requires all attributes in the data frame to be numeric, this is easy to solve using raw R by means of the <code class="language-plaintext highlighter-rouge">as.numeric()</code> function, but it cannot be used in the GUI. It seems that RGP does not accept well attributes containing dots. Again, it is easy to solve just renaming the attribute with a line of code, but harder to solve when using the UI. Both problems can be solved with some data file preprocessing.</p>
<p>The GUI allows the customization of the most classical parameters in GP, such as population size, crossover and mutation probability or selection mechanism. The GUI allow easy control of the run, with real-time fitness and Pareto front visualization, along with other interesting features.</p>
<p>However, the basic algorithm (multiobjective optimization of solution complexity and error measure) among other parameters remains fixed unless you use the programatic interface, which is explained in the next section.</p>
<h1 id="rgp-programatic-interface">RGP programatic interface</h1>
<p>RGP implements a whole GP stack which can be applied to any domain, however, it offers a convenient interface to symbolic regression, which simplifies it. The main function to symbolic regression is <code class="language-plaintext highlighter-rouge">symbolicRegression()</code>, whose main argument is a data frame with the trainning set. The other fundamental argument is a formula defining the regression task at hand, i. e., the formula determines wich variable approximate using which attributes. All the names used in this formula must coincide with the columns names provided in the data frame.</p>
<p>The signature of <code class="language-plaintext highlighter-rouge">symbolicRegression()</code> is</p>
<div class="language-R highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">symbolicRegression</span><span class="p">(</span><span class="n">formula</span><span class="p">,</span><span class="w"> </span><span class="n">data</span><span class="p">,</span><span class="w"> </span><span class="n">stopCondition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">makeTimeStopCondition</span><span class="p">(</span><span class="m">5</span><span class="p">),</span><span class="w">
</span><span class="n">population</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">NULL</span><span class="p">,</span><span class="w"> </span><span class="n">populationSize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">100</span><span class="p">,</span><span class="w"> </span><span class="n">eliteSize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">ceiling</span><span class="p">(</span><span class="m">0.1</span><span class="w"> </span><span class="o">*</span><span class="w">
</span><span class="n">populationSize</span><span class="p">),</span><span class="w"> </span><span class="n">elite</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(),</span><span class="w"> </span><span class="n">extinctionPrevention</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">FALSE</span><span class="p">,</span><span class="w">
</span><span class="n">archive</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">FALSE</span><span class="p">,</span><span class="w"> </span><span class="n">individualSizeLimit</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">64</span><span class="p">,</span><span class="w">
</span><span class="n">penalizeGenotypeConstantIndividuals</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">FALSE</span><span class="p">,</span><span class="w"> </span><span class="n">subSamplingShare</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">1</span><span class="p">,</span><span class="w">
</span><span class="n">functionSet</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">mathFunctionSet</span><span class="p">,</span><span class="w"> </span><span class="n">constantSet</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">numericConstantSet</span><span class="p">,</span><span class="w">
</span><span class="n">crossoverFunction</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">NULL</span><span class="p">,</span><span class="w"> </span><span class="n">mutationFunction</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">NULL</span><span class="p">,</span><span class="w">
</span><span class="n">restartCondition</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">makeEmptyRestartCondition</span><span class="p">(),</span><span class="w">
</span><span class="n">restartStrategy</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">makeLocalRestartStrategy</span><span class="p">(),</span><span class="w">
</span><span class="n">searchHeuristic</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">makeAgeFitnessComplexityParetoGpSearchHeuristic</span><span class="p">(),</span><span class="w">
</span><span class="n">breedingFitness</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">function</span><span class="p">(</span><span class="n">individual</span><span class="p">)</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w"> </span><span class="n">breedingTries</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">50</span><span class="p">,</span><span class="w">
</span><span class="n">errorMeasure</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">rmse</span><span class="p">,</span><span class="w"> </span><span class="n">progressMonitor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">NULL</span><span class="p">,</span><span class="w"> </span><span class="n">envir</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">parent.frame</span><span class="p">(),</span><span class="w">
</span><span class="n">verbose</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w">
</span></code></pre></div></div>
<p>The detailed description of these arguments come, as usual, in its help page <code class="language-plaintext highlighter-rouge">?symbolicRegression</code>. We can observe the following default algorithm setup:</p>
<ul>
<li>Population size: 100</li>
<li>Multiobjective search with Pareto front using age complexity fitness and an error measure</li>
<li>Default error measure: RMSE (Root Mean Squared Error)</li>
<li>Default function set: Predefined function sets: arithmeticFunctionSet (+, -, *, /), expLogFunctionSet (sqrt, exp, ln), trigonometricFunctionSet (sin, cos, tan). By default is points to mathematicalFunctionSet, which includes all.</li>
<li>Default terminal set: numericConstantSet, which takes samples from a N(0,1) distribution.</li>
</ul>
<h1 id="the-longley-regression-problem-can-be-solved-with-rgp-as-follows">The Longley regression problem can be solved with RGP as follows.</h1>David F. Barrerodavid fernandezb YOUKNOW aut uah esRGP is a R-based Genetic Programming implementation designed to address symbolic regression problems. It is under the umbrella of Rsymbolic and hosted by the Cologne University of Applied Sciences.Mathematical plots in LaTeX with symbolic expressions2017-05-10T16:33:25+02:002017-05-10T16:33:25+02:00https://atc1.aut.uah.es/~david/notes/2017/05/mathematical-plots-in-latex-with-symbolic-expression<p>Pretty ofted I need to include mathematical plots in my LaTeX documents. Using an external tools such as R to generate the plot and then including it to the documents is unconfortable and leads to many maintenance problems. Fortunetly, LaTeX provides several ways to overcome this problem.</p>
<p>A very convenient method to mathematical plotting from LaTeX from Tikz. An example follows.</p>
<script src="https://gist.github.com/dfbarrero/0543623a566f56e2df42ecd681681b8f.js"></script>
<p>In the example x and y labels are set as LaTeX expressions, so it is straightforward to show complex mathematical expressions. The formula that is actually depicted is another expression used with the command <code class="language-plaintext highlighter-rouge">\addplot</code>. The previous code generates the following plot.</p>
<div style="max-width: 300px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/mathematical-plots-in-latex-with-symbolic-expression/mathematicalplot.svg" type="image/svg+xml" />
</div>
<p>Customizing the output is quite easy, as the next example shows.</p>
<div style="max-width: 300px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/mathematical-plots-in-latex-with-symbolic-expression/mathematicaloverlapplot.svg" type="image/svg+xml" />
</div>
<p>The LaTeX/Tikz code that generates the previous plot is:</p>
<script src="https://gist.github.com/dfbarrero/bd789f82b6aec2960da843f2f7988617.js"></script>
<p>In this case the function <code class="language-plaintext highlighter-rouge">deg</code> transforms radians to degrees, the x domain is restricted to [-2, 4], two plots are overlapped with different colors and the plot includes a leyend.</p>David F. Barrerodavid fernandezb YOUKNOW aut uah esPretty ofted I need to include mathematical plots in my LaTeX documents. Using an external tools such as R to generate the plot and then including it to the documents is unconfortable and leads to many maintenance problems. Fortunetly, LaTeX provides several ways to overcome this problem.Data structures in Tikz2017-03-17T15:33:25+01:002017-03-17T15:33:25+01:00https://atc1.aut.uah.es/~david/notes/2017/03/datastructures-in-tikz<p>These figures were create to support one of my lectures, however, I am far from being a Tikz expert, surely there are better ways to use Tikz. None of these examples was created from scratch.</p>
<h2 id="vector-1-d-array">Vector (1-D array)</h2>
<div style="max-width: 250px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/vector.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/7acfa85098a52ae75ed38003fccda6b7.js"></script>
<h2 id="matrix-2-d-array">Matrix (2-D array)</h2>
<div style="max-width: 300px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/matrix.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/0b198bc7e57dd99b88eef0a0cc564f11.js"></script>
<h2 id="stack">Stack</h2>
<div style="max-width: 200px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/stack.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/0b198bc7e57dd99b88eef0a0cc564f11.js"></script>
<h2 id="queue">Queue</h2>
<div style="max-width: 200px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/queue.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/02d42b26bc6e89d82cb83f9e445c146e.js"></script>
<h2 id="linked-list">Linked list</h2>
<p>This figure was taken and modified from <a href="http://tex.stackexchange.com/questions/76267/creating-tikz-node-using-macro">StackExhange</a>.</p>
<div style="max-width: 300px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/list.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/0b412c9d973ec48f596f6e3e8d3c1760.js"></script>
<h2 id="hash-table-associative-array">Hash table (associative array)</h2>
<div style="max-width: 200px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/hashtable.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/228b4363ff06f8d2e7f21392d4830cbf.js"></script>
<h2 id="tree">Tree</h2>
<p>This figure was taken and modified from <a href="http://tex.stackexchange.com/questions/2340/how-to-make-a-3-level-deep-tree-with-tikz">StackExhange</a>.</p>
<div style="max-width: 300px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/tree.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/24b5ae208e8c5627aab073a99d1e1cfa.js"></script>
<h2 id="graph">Graph</h2>
<p>This figure was taken and modified from <a href="http://tex.stackexchange.com/questions/166083/showing-weights-on-tikz-graph-using-draw-edge-commands">StackExhange</a>.</p>
<div style="max-width: 300px; padding-bottom: 20px;" align="center">
<embed src="/~david/tizk_img/datastructures-in-tikz/graph.svg" type="image/svg+xml" />
</div>
<script src="https://gist.github.com/dfbarrero/dccb24d3cc39a494bc62338d11a7e22d.js"></script>David F. Barrerodavid fernandezb YOUKNOW aut uah esThese figures were create to support one of my lectures, however, I am far from being a Tikz expert, surely there are better ways to use Tikz. None of these examples was created from scratch.First steps with Slick2D2017-03-14T15:33:25+01:002017-03-14T15:33:25+01:00https://atc1.aut.uah.es/~david/notes/2017/03/first-steps-with-slick2d<p>Slick2D is a Java-based game engine. It provides, through a relatively simple API, all the basic features needed to succesfully develop a simple videogame. Its simplicity makes implementation of interesting games easy, but it is not so simple that hides the game architecture to the programmer. This makes Slick2D a good choice for educational purposes.</p>
<!--
On the contrary that stat-of-the-art game engines such as Unreal or Source, Slick2D is focused on 2D games, with limited graphical capabilities among other limitations.
//# This means that Slick2D is not a game engine suiteable for professional game development. There are several game engines designed for simplicity, like GameMaker or even Unity, they provide an IDE with simplified programming languages that make them suiteable without need of strong programming skills.
Slick2D does not provide state-of-the-art features but neither simplicity. What makes this game engine interesting is its good balance between complexity and simplicity. It is simple enought to let easy implementationg of interesting games but not so simple that hides the game architecture to the programmer. This makes Slick2D a good choice for educative purposes, but poorly prepared for high-end projects.
-->
<p>If you want a powerful, fully maintained, Java-based game engine, I would recommend you using <a href="http://libgdx.badlogicgames.com/">libgdx</a> instead. If you prefere developing games without worry about programming, GameMaker or even Unity may be better choices.</p>
<h2 id="slick2d-documentation">Slick2D documentation</h2>
<p>Perhaps one of the most relevant problems using Slick2D is the limited availability of documentation, at least when compared with other projects. There is an <a href="http://slick.ninjacave.com/wiki/index.php?title=Main_Page">official wiki</a>, but it only covers some very specific features. However, there are interesting tutorials which makes worth a visit to the wiki. Another interesting resource is the <a href="http://slick.ninjacave.com/forum/">forum</a>, which contains interesting technical discussions along with more general ones and even full videogames.</p>
<p>As long as I know, the only book about Slick2D is <a href="https://www.google.es/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiU5Zf8mdbSAhXos1QKHQpUC-4QFggaMAA&url=https%3A%2F%2Fcnx.org%2Fexports%2Fa0e2d2ac-7534-4994-ba68-7063820f42d6%4013.6.pdf%2Fanatomy-of-a-game-engine-13.6.pdf&usg=AFQjCNEyYID8FkV-85AA-QuFYjCVfMILmw&sig2=Dq6gy52LjeQpzuPx0KukKw">Anatomy of a Game Engine</a>, by R. G. Badwin. This book covers all the main features needed to develop a game, and given the lack of alternatives, reading it is almost a must.</p>
<p>The lack of manuals makes <a href="http://slick.ninjacave.com/javadoc/">JavaDoc</a> one of the most valuable tools, handling it is a must when dealing with slick2D.</p>
<p>In my opinion, the best way to learn Slick2D is by reading code. Slick2D source code comes with a collection of demos showing the main features, and is an excellent learning resource. In order to make full use of these demos, we first need to install and set-up a development environment.</p>
<h2 id="slick2d-on-netbeans">Slick2D on NetBeans</h2>
<p>We will use NetBeans for no real reason, the procedure that follows applies more or less unmodified to any other IDE.</p>
<ol>
<li>Download and unzip Slick2D.</li>
<li>Click on “File->New project”.</li>
<li>We want to import Slick2D source code into NetBeans, so select “Java proyect with Existing Sources”.</li>
<li>Fill out the form with a proyect name and the project folder, which must be the root folder that contains the source code.</li>
<li>Specify which folder actually stores the source code, so select “Add Folder…” and pick-up the <code class="language-plaintext highlighter-rouge">src</code> folder. Leave test package folder empty.</li>
<li>Finish code import.</li>
</ol>
<p>Once these steps are performed, NetBeans should contain a new project with the Slick2D source code. However, in order to be able to compile it, we must configure its libraries. Go to the project properties by right-clicking the mouse on the root project tree, select “Libraries” and add all the jar files contained in <code class="language-plaintext highlighter-rouge">lib</code>.</p>
<p>There is one final step left. Slick2D depends on native code to work properly, and its location must be configured. We do that in project properties->Run; “VM Options” must contain the path to the native library, one possible configuration might be <code class="language-plaintext highlighter-rouge">-Djava.library.path=.</code>. The exact path could be different in your computer, so be careful.</p>
<p class="notice--warning">Tip: Try to use a relative path instead of an absolute one, otherwise the configuration most likely will fail when used in other computer.</p>
<p>Testing the installation is pretty simple, just run any file contained in the package <code class="language-plaintext highlighter-rouge">org.newdawn.slick.tests</code>. This package is quite important becauseit contains lots of extremely useful code examples.</p>
<h2 id="slick2d-programming-model">Slick2D programming model</h2>
<p>One of the things I like about Slick2D is its programming model, which clearly shows how the main loop operates. All the programming model of Slick2D is based on two fundamental methods: <code class="language-plaintext highlighter-rouge">update()</code> and <code class="language-plaintext highlighter-rouge">render()</code>:</p>
<ul>
<li>
<p><code class="language-plaintext highlighter-rouge">update()</code> is invoked by the main loop each time that the game state has to be updated. This method must contain all the code needed to maintain the game state.</p>
</li>
<li>
<p><code class="language-plaintext highlighter-rouge">render()</code> is invoked by the main loop each time that the game has be rendered. This method must contain the code that renders the game state into a frame. The number of times this method is run per second determines the FPS.</p>
</li>
</ul>
<p>In addition two these two methods, there is a third fundamental method, <code class="language-plaintext highlighter-rouge">init()</code>. It is invoked one time at the beginning of the game execution, and it is usually in charge of loading all the resources needed by the game (images, sprites, sprite sheets, sound, music, etc).</p>
<p>The general form of a simple Slick2D game looks like the following code.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyGame</span> <span class="kd">extends</span> <span class="nc">BasicGame</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">init</span><span class="o">(</span><span class="nc">GameContainer</span> <span class="n">container</span><span class="o">)</span> <span class="kd">throws</span> <span class="nc">SlickException</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">render</span><span class="o">(</span><span class="nc">GameContainer</span> <span class="n">container</span><span class="o">,</span> <span class="nc">Graphics</span> <span class="n">g</span><span class="o">)</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">update</span><span class="o">(</span><span class="nc">GameContainer</span> <span class="n">container</span><span class="o">,</span> <span class="kt">int</span> <span class="n">delta</span><span class="o">)</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Basically, programming a Slick2D game is all about implementing those three methods. Please observe that our class must inherit from the <code class="language-plaintext highlighter-rouge">BasicGame</code> class, which is the one that executes all the nasty stuff (game loop, input handling, etc) behind the scenes thanks to OOP magic, making our job much more simpler.</p>
<p class="notice--primary">An example of a hello world in Slick2D can be found <a href="http://slick.ninjacave.com/wiki/index.php?title=Hello_World">here</a>. Download it into your IDE, run it and try to understand its (naïve) code.</p>
<h2 id="recommended-slick2d-demos">Recommended Slick2D demos</h2>
<p>IMHO, the best way to understand Slick2D is exploring its rich collection of demos, located in the package <code class="language-plaintext highlighter-rouge">org.newdawn.slick.tests</code>. One almost could program an entire videogame just by merging those demos.</p>
<p>In increasing complexity ordering, I would recommend to study the following demos:</p>
<ul>
<li>DoubleClick</li>
<li>FontTest</li>
<li>AnimationTest</li>
<li>SoundTest</li>
<li>InputTest</li>
</ul>
<p>The following demos provide the basic skeleton to implement a complete videogame, including its states, GUI and level loading:</p>
<ul>
<li>GUITest</li>
<li>StateBasedTest</li>
<li>TileMapTest</li>
</ul>David F. Barrerodavid fernandezb YOUKNOW aut uah esSlick2D is a Java-based game engine. It provides, through a relatively simple API, all the basic features needed to succesfully develop a simple videogame. Its simplicity makes implementation of interesting games easy, but it is not so simple that hides the game architecture to the programmer. This makes Slick2D a good choice for educational purposes.