https://fietkau.blog/publications.xml2024-01-28T00:00:00Zhttps://fietkau.blog/assets/favicon-128.png?llBhrzitJulian’s BlogThis is my place for long-form writing on technology, academia, games, and whatever else I may be thinking about.Daily Rucks: The How and Whyhttps://fietkau.blog/2024/daily_rucks2024-01-28T00:00:00ZJulian Fietkauhttps://fietkau.blog
<p>As of this writing, I have just publicly launched my <a href="https://dailyrucks.fietkau.software/" target="_blank"><em>Daily Rucks</em></a> ActivityPub bot based on Python/Flask. As usual, there is a <a href="https://fietkau.software/daily_rucks" target="_blank">project page</a> on my website with a brief description and statement of purpose, but since this project is part of a longer journey, I figure it’s a good opportunity to talk a bit more about where this is coming from and where I’m intending for it to go in the future.</p>
<!-- break -->
<h2>What It Does</h2>
<p><audio src="https://fietkau.blog/assets/daily_rucks_1.mp3" controls aria-label="Rucks voice line: “Proper story’s supposed to start at the beginning. Ain’t so simple with this one.”"></audio></p>
<p><a href="https://dailyrucks.fietkau.software/" target="_blank"><em>Daily Rucks</em></a> is a self-contained ActivityPub bot – a (more or less) full-fledged, interoperable ActivityPub server hosting a single account. The account in question is a bot that posts a voice line by the character <a href="https://bastion.fandom.com/wiki/Rucks">Rucks</a> from the game <a href="https://www.supergiantgames.com/games/bastion/">Bastion (2011)</a> once per day. It’s followable from just about any ActivityPub platform that can read <em>Note</em> objects, and preferably also handle MP3 attachments.</p>
<p>A very short aside on <em>Bastion</em>: I first played the game after it was included in the Humble Indie Bundle 5. Back then, it kinda reinvigorated my passion for PC gaming after a few years of dormancy. While I believe it to be a great game that has no problem standing on its own, it also carries a special nostalgic torch for me. Rucks, who functions as the game’s narrator, is voiced by <a href="https://www.imdb.com/name/nm3079634/">Lo­gan Cun­ning­ham</a>. The combination of Rucks’s varied commentary and Cun­ning­ham’s charming grizzled voice proved to be a major part of the game’s appeal and a fitting aspect to single out for a retrospective. This project was further inspired by <a href="http://vectorpoem.com/bots/">JP LeBreton’s social media bots</a>, which post assets or scenes from beloved games for a regular dose of memories.</p>
<p><audio src="https://fietkau.blog/assets/daily_rucks_2.mp3" controls aria-label="Rucks voice line: “Kid’s thinking, maybe have another go at it.”"></audio></p>
<p><em>Daily Rucks</em>’s ActivityPub implementation is an evolution of what I started in <a href="https://fietkau.software/pinhole"><em>Pinhole</em></a>, an all-custom and somewhat incomplete implementation of the suite of protocols needed to set up a <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a> node. Where <em>Pinhole</em> is capable of nothing except sending messages to one single Mastodon follower (I never debugged its interoperability with other server implementations), <em>Daily Rucks</em> can be followed from a variety of ActivityPub platforms and can handle incoming likes and boosts as well as follows and blocks. As visitors to <a href="https://dailyrucks.fietkau.software/">the <em>Daily Rucks</em> website</a> can see, likes and boosts are counted for each post and aggregated into overall statistics.</p>
<p>Incoming replies are still dropped, though. Because no remote content is ever shown (neither incoming replies nor even user names of interacting AP actors), this hopefully obviates the need for content moderation.</p>
<p>So now <em>Daily Rucks</em> is sitting there and will hopefully keep doing its thing mostly unattended. I put more effort into the audio files and the website than I had planned at the start of the project (and maybe more than was warranted), but I’m hoping now it’ll pick up a few fellow Supergiant Games fans as followers.</p>
<h2>How We Got Here</h2>
<p>I don’t want to rehash all of <a href="https://fietkau.blog/2023/another_blog_resurrection_fediverse_new_comment_system">my thoughts on social media in general and the fediverse in particular</a>, but if this is your first time here, let me just say that I’m disillusioned by corporate platforms and intrigued by federated, self-hostable social media. I set up <a href="https://fietkau.social/@julian">my personal Mastodon instance</a> in late 2022 and got increasingly motivated to get involved with the landscape as a hobbyist programmer. In 2023, I set up Mastodon news feed bots for <a href="https://fietkau.social/@publications">my academic publications</a> and for <a href="https://fietkau.social/@blog">this blog</a>, and implemented interaction with my static site generator for Mastodon-based blog comments.</p>
<p>But putting something together in pure ActivityPub, without using an existing server, is more challenging. Last fall, Jennifer++ (who’s <a href="https://jenniferplusplus.com/no-universal-translators/">looking for collaborators on <em>Letterbook</em></a>) <a href="https://hachyderm.io/@jenniferplusplus/111342566946755633">posted this visual summary</a> of what it’s like to tackle an ActivityPub implementation, and you can feel the exasperation in it.</p>
<p><audio src="https://fietkau.blog/assets/daily_rucks_3.mp3" controls aria-label="Rucks voice line: “Well it’s all more than anyone could handle.”"></audio></p>
<p>When I saw it, I had just published <a href="https://fietkau.software/pinhole"><em>Pinhole</em></a>, and my first instinct was to bristle against her conclusion. After all, <em>Pinhole</em> had ostensibly been what she was describing, a “from zero to federation” project based on nothing but Python 3, Flask, and the <em>requests</em> package, and it was a literal weekend project – I had started with a blank text editor on Friday afternoon and finished the last bits of documentation by Sunday. <em>Pinhole</em>’s federated core consists of about 200 lines of Python implementing whatever thin slices of ActivityPub, WebFinger, and HTTP signatures were needed to get the thing to successfully send posts to Mastodon. It hardcodes almost everything, ignores JSON-LD completely, isn’t capable of receiving any Activity types except “Follow” and “Undo”, and doesn’t even have an outbox. But it <em>does</em> federate.</p>
<p>I checked myself rather than reply to her on the spot and thought some more about the perspective she was coming from. I was implementing a single broadcast-only bot, she was (and is) implementing an actual social platform where users will be able to create accounts and interact. She was thinking about standards compliance and measures to ensure the long-term health of the ecosystem, while I was dipping my foot in the water to get a feel for the protocol. I still hope her summary isn’t unduly discouraging to new implementers like me who just want to experiment, but it is an honest reflection of reality.</p>
<p><audio src="https://fietkau.blog/assets/daily_rucks_4.mp3" controls aria-label="Rucks voice line: “All too easy to lose one’s way out in the Wilds.”"></audio></p>
<p>I still had more plans for my ActivityPub work though, so I took the AP core from <em>Pinhole</em> and set off to the next thing. With a growing awareness of what I was getting myself into, I decided to create a low-stakes testbed for my AP implementation – something that, if it failed, it wouldn’t risk losing people’s data or connections. That’s how the concept for <em>Daily Rucks</em> was born. I decided to simultaneously expand the capabilities of my ActivityPub implementation to do more than just send posts to a single follower, to prepare some fun content for a bot to post based around a video game I enjoyed, and to ramp up my interoperability efforts with other implementations. For the latter, my thanks and a major shoutout go to <em>Daily Rucks</em>’s main tester <a href="https://box464.com/">Jeff Sikes</a>, who <a href="https://box464.weblog.lol/2024/01/dailyrucks-testing-follow-behavior">helped keep me accountable</a> and checked whether the bot could play nice with notable ActivityPub server software after each major change.</p>
<p>And now <a href="https://dailyrucks.fietkau.software/"><em>Daily Rucks</em> is done</a>. I’m watching and hoping it will survive its first contact with the wider world, and secretly crossing my fingers that some people will feel inclined to follow the account and spread the word. I will monitor it and make adjustments to the code as necessary and as I learn of problems, and in parallel I will set my eyes on the next goal.</p>
<h2>What Happens Next</h2>
<p>As noted above, my passion for the game <em>Bastion</em> wasn’t the only motivation for creating this project. The goal for me was always to improve my understanding and implementation of ActivityPub in order to do more things with it in the future.</p>
<p><audio src="https://fietkau.blog/assets/daily_rucks_5.mp3" controls aria-label="Rucks voice line: “He comes back, just like I knew he would.”"></audio></p>
<p>Most pressingly, <a href="https://fietkau.software/fediroster">FediRoster</a> is basically crying out for proper ActivityPub integration. I know of two public sites powered by FediRoster, my own <a href="https://directory.hci.social/">HCI Directory</a> and Randy Resnick’s <a href="https://fediverse.fans/">Fediverse Fans</a>. I still strongly believe in the potential of public opt-in topic lists for account discovery, and that Hendrik Erz’s <a href="https://nathanlesage.github.io/academics-on-mastodon/">Academics on Mastodon</a> has been a notable factor in helping the scientific community find their circles on the fediverse a bit better than some other communities have managed to. FediRoster currently relies on a Mastodon bot to send out updates about list additions, but I would love to turn the whole thing into a first-class ActivityPub participant. Adding yourself to a list could be as easy as following a “@join” account, and we could have a group-esque account for each FediRoster instance that boosts everything posted by list members, so you could conveniently follow everyone. This won’t be finished in time to demo it at the next FediForum, but the plan is fairly solid.</p>
<p>My other idea for ActivityPub integration is this very website. The comments on this blog post are currently loaded from my Mastodon server through its own API, but I would ultimately like to decouple the two and outfit this website with its own set of ActivityPub inboxes to provide followable feed accounts (to replace the two bots I linked earlier) and comment sections for individual pages.</p>
<p>You can probably tell from these two future use cases that they are less fault-tolerant than <em>Daily Rucks</em>. Before I set them loose upon the world, I want my ActivityPub implementation to be solidly capable of interoperating with most people’s accounts and properly handle their data for storage and presentation. <em>Daily Rucks</em> is straining badly against the single-file approach I kept when I migrated it from <em>Pinhole</em>, and for the ActivityPub implementation to grow further, I will want to refactor it into a shape with more high-level structure. I might even see if it isn’t possible to turn it into a general-use ActivityPub library after all.</p>
<p><audio src="https://fietkau.blog/assets/daily_rucks_6.mp3" controls aria-label="Rucks voice line: “Any good Trapper knows never to take a step ’til the time is right.”"></audio></p>
<p>There is still a lot of work to do, and I am planning to do it.</p>
<p>As one last point, you might ask yourself why I’m walking this all-custom path even though it would be easier and faster to reuse an existing implementation. <a href="https://blog.mauve.moe/posts/distributed-press-social-inbox">The Social Inbox by distributed.press</a> is a very cool project that does much of what I need for my website, and <a href="https://jointakahe.org/">takahē</a> would be a more mature existing Python implementation if the goal was to integrate it better with my existing publishing stack. To that, the only thing I want to say is that I’m the kinda weirdo who does this stuff for fun, and building my own ActivityPub implementation is my way of learning the standard and the ecosystem. At the end of the day I’m still a hobbyist programmer, and I want to spend my free time (outside of my full-time university employment and, as of this upcoming spring, a very cool teaching side gig on top of it) in a way that I find fulfilling.</p>
<p>So that’s the journey ahead for me. We’ll see how it goes!</p>
<p><audio src="https://fietkau.blog/assets/daily_rucks_7.mp3" controls aria-label="Rucks voice line: “High time we build something new.”"></audio></p>
ActivityPubPythonfediverseself-hostedopen sourceGenerating Worms-style Terrain with Simplex Noisehttps://fietkau.blog/2023/generating_terrain_simplex_noise2023-07-26T00:00:00ZJulian Fietkauhttps://fietkau.blog<p><strong>Note:</strong> This article contains a lot of interactive visualizations that will not work in feed readers. I recommend reading this one on the website. Thank you!</p>
<p>Have you ever played any of the classic 2D <em>Worms</em> games? I enjoyed a number of hectic battles in <em>Worms Armageddon</em> back in the day, but I was always more fascinated by the game’s randomly generated landscapes than by its combat mechanics. A game map in one of those early games might look something like this:</p>
<!-- break -->
<figure class="wide col">
<picture>
<source srcset="/assets/worms_2-2x.png 2x, /assets/worms_2.png 1x">
<img src="https://fietkau.blog/assets/worms_2.png" alt="Worms screenshot showing a jagged island landscape with a number of worms standing on it">
</picture>
<figcaption><em>Worms 2</em> screenshot by <a href="https://www.moddb.com/games/worms-2/images/worms-2-photos">λntonio22222285 on ModDB</a></figcaption>
</figure>
<p>Child me found it immensely fascinating how the game could generate infinite numbers of these landscapes on demand to make every round feel like a fresh challenge, and I wondered how I could do something like that for myself. A few decades later and with a lot more pertinent knowledge under my belt, I would like to take you on a journey to do just that! This article will show you how to procedurally generate <em>Worms</em>-like 2D side view game maps from a blank slate, requiring only basic programming knowledge and that you don’t run away screaming upon the sight of high school level math.</p>
<p>Wanna join me? Here’s where I want us to end up today:</p>
<aside class="paper down"><strong>FYI:</strong> Most of the images in this article can be clicked to re-randomize them!</aside>
<figure class="crisp">
<canvas id="terrain_demo_intro" class="minishadow" width="500" height="300" data-seed="98666957" data-override-fg="105,75,49" data-override-bg="117,164,238"></canvas>
</figure>
<p>That looks like a reasonable approximation of the 2D side view landscapes we want. Try clicking the image above to generate a few different ones! Not every one of them would necessarily be fun to play in <em>Worms</em>, but to show the principles of how this kind of world generation works, I think it’s a nice goal to aim for.</p>
<p>So how can we come up with a way to generate these landscapes on demand? Before we dive into the approach, let’s try to summarize some requirements.</p>
<ul class="bullet">
<li>The landscapes need to be suitable for side view gameplay, i.e. mostly have air at the top and solid ground at the bottom.</li>
<li>We want bits like caves, overhangs, and even little floating islands. No need to be realistic or to obey gravity, all it needs is to look fun to jump around on.</li>
<li>Simultaneously, the landscapes should look reasonably traversable. We want lots of flat and curved surfaces to walk and climb, no giant spikes or tiny hooks to get stuck on.</li>
</ul>
<p>With these requirements in mind, it becomes easier to judge which tools and methods will bring us closer to our goal. I’ll divide the journey from here into two parts: calculating the shape of our landscape in a pixel grid and deciding which parts are solid and which ones are air (we will be calling it the <em>collision mask</em>), and then turning that into a visually appealing result with cute textures and some basic detailing and shading.</p>
<h2 id="collision_mask">Calculating the Collision Mask</h2>
<p>By convention, digital 2D images are usually described and manipulated using a coordinate system that has its origin point in the top left corner, with the <em>x</em> axis going to the right and the <em>y</em> axis going down. This means that any pair of two positive whole numbers <em>(x, y)</em> identifies one single pixel in an image, assuming the numbers are smaller than the image’s dimensions.</p>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300" class="simplex_terrain minishadow">
<rect x="0" y="0" width="500" height="300" fill="#000"/>
<path stroke="none" fill="#fff" d="M15,15H170v-7l12,12l-12,12v-7L25,25V170h7l-12,12l-12-12h7z"/>
<text font-family="monospace" font-size="28" fill="#fff" text-anchor="start">
<tspan x="32" y="53">0,0</tspan>
<tspan x="190" y="30">x</tspan>
<tspan x="27" y="210" text-anchor="middle">y</tspan>
<tspan x="200" y="220" font-size="20" fill="#000" aria-hidden="true" id="terrain_demo_coordinate_easteregg">(no, not this one…)</tspan>
</text>
</svg>
</figure>
<p>Whatever game engine or programming environment you’re using, let’s assume that it gives you a way to create an image and access its pixels one by one to set and get colors at any specific point. So whatever calculation we’re doing, it’ll need to be done for each and every pixel. For this article I’m keeping my example images fairly small at just 500 by 300 pixels, because I want you to be able to experiment with things quickly without dragging down the performance too much, but for your game your images can be a lot larger.</p>
<p>Here’s a basic framework to go over our image pixel by pixel and fill them with something:</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">int</span>] gray = [<span class="number">127</span>, <span class="number">127</span>, <span class="number">127</span>];
image.<span class="function">setPixel</span>(x, y, gray);
}
}</code></pre>
<p>(The code examples in this article are a sort of C-style <a href="https://en.wikipedia.org/wiki/Pseudocode">pseudocode</a> that I hope are fairly straightforward to adapt to whatever language you’re using.)</p>
<p>Assuming our image contains RGB data with 8 bits per channel, as has been the most common way to store colors for a long time now, each pixel holds three color channels (red, green and blue) with a value between 0 (no intensity) and 255 (full intensity). The color (0, 0, 0) is solid black and (255, 255, 255) is solid white. For now, we’ll be pushing the same values to all three color channels to work in grayscale. The result of the above code would then be a full image of a sort of mid-gray:</p>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300" class="simplex_terrain minishadow">
<rect x="0" y="0" width="500" height="300" fill="#7f7f7f"/>
</svg>
</figure>
<p>Okay, so how should we fill our image?</p>
<p>We already know that we want to be able to generate infinite different random landscapes, so randomness has to enter our code somehow. Let’s just go wild and assign every pixel a random value.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">int</span> brightness = <span class="function">randomRange</span>(<span class="number">0</span>, <span class="number">255</span>);
image.<span class="function">setPixel</span>(x, y, [brightness, brightness, brightness]);
}
}</code></pre>
<p>This is assuming that <code>randomRange</code> is a function that returns a random integer value from the interval given by its two parameters. With this, every one of the pixels in our image now gets a valid random grayscale value.</p>
<figure class="crisp">
<canvas id="terrain_demo_white_noise" class="minishadow" width="500" height="300"></canvas>
</figure>
<p>This kind of value distribution is called <strong>white noise</strong> in signal processing, which is an area whose vocabulary we will encounter a few times in this article. It’s not called “white noise” because that’s how we decided to color it, but because every pixel’s individual value is completely unrelated to its neighbors, like photons in white light. If you’d like to learn more, <a href="https://en.wikipedia.org/wiki/White_noise">Wikipedia has you covered</a> as usual.</p>
<p>As cool as it looks, unfortunately it’s not super helpful for us. We don’t want to draw TV static after all, we want to create a landscape that has features like hills and caves. For that, we’re going to need a different kind of noise – a kind of noise that’ll give us values which are clumped together more, so we can use them to draw blobby, bulby shapes.</p>
<p>Enter <strong>simplex noise</strong>! Simplex noise is an algorithm that can generate that kind of blobby noise for us. There’s a whole story about how it works, but I’ll skip the mathematics outright and <a href="https://en.wikipedia.org/wiki/Simplex_noise">point you towards Wikipedia again</a> if you feel like digging into it further. For our purposes I’ll just ask you to find a nice library for it (I’m using a modified version of <a href="https://github.com/josephg/noisejs/">this public domain implementation by Seph Gentle</a>), or if you’re working in a large modern game engine, it might even come with a simplex noise function in its standard library. If it turns out too hard to find one, you can also use Perlin noise instead, it doesn’t make much of a difference for what we’re building here.</p>
<p>Going forward, I’ll assume you have procured a simplex noise function that accepts arbitrary numbers as <em>x</em> and <em>y</em> parameters and outputs values between 0 and 1. If yours is different, you may need to massage the values somehow. For example, some libraries have an output range of [-1;+1], which you’d have to map to [0;1] yourself by adding 1 (which shifts it to [0;2]) and then dividing by 2.</p>
<p>With a simplex noise function ready to go, it’s worth noting that its input is contiguously defined, meaning it accepts fractional numbers for its <em>x</em> and <em>y</em> inputs, and as we’re about to find out, it matters how much we scale the input parameters. We can’t just blindly pass in our pixel coordinates anymore. Instead, let’s calculate <em>relative</em> values for <em>x</em> and <em>y</em> to describe the position in the image as coordinates in the interval [0;1].</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">float</span> xRel = x / image.<span class="property">width</span>;
<span class="type">float</span> yRel = y / image.<span class="property">width</span>;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> value = <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="type">int</span> brightness = <span class="function">round</span>(<span class="number">255</span> * value);
image.<span class="function">setPixel</span>(x, y, [brightness, brightness, brightness]);
}
}</code></pre>
<p>Okay, there’s a bit more going on there with the frequency stuff, plus the division for <code>yRel</code> looks off if we’re dividing it by the width instead of the height. What’s happening there?</p>
<p>Generally, if we just pass <em>x</em> and <em>y</em> values on a scale between 0 and 1 into our simplex noise function, the result will resemble one big blob. I’m scaling both input parameters by a fixed number, 3 in this case, to squish the value space closer together so we’ll have a bit more to see in our image. In signal processing, this is called <strong>frequency</strong> because it describes how often we see something within the same range, and we’ll look into it in more depth in a bit. As for the image dimensions, it’s the price I pay for making the example images in this article non-square. If we let <code>xRel</code> and <code>yRel</code> both go from 0 to 1 even though these images are 500 by 300 pixels, the resulting blobs will be vertically squished. That may not be a disaster for our landscapes, but I want you to get a proper idea of what simplex noise looks like, so I’m making sure it’s scaled correctly. As a result of dividing <em>y</em> by the image’s width instead of the height, for the images in this article <code>yRel</code> will only go from 0 to 0.6, which corrects for the aspect ratio.</p>
<p>Alright, that’s a long enough explanation for what gives us the following image:</p>
<figure class="crisp">
<canvas id="terrain_demo_simplex_noise_example" class="minishadow" width="500" height="300" data-seed="1"></canvas>
</figure>
<p>Your first reaction to seeing simplex noise rendered like this might be, hey, that’s just blurry! And yeah, it totally is. Turns out blurry is what we want. Blurry will be super useful. I promised to keep the math simple for this article, so I’ll just say this: with the value field looking blurry like that, we’ll be able to turn it into smoothly curved landscapes with no weird tiny spikes or jaggies. In this image you can already see the blobby structure of simplex noise in contrast to white noise.</p>
<p>That said, at this point we should remind ourselves that this method of showing noise – rendering it as a grayscale image – is just one possible visualization. What the blurriness means here is that neighboring values form smooth shapes without any sharp drop-offs. Contrary to photography, this blurriness has nothing to do with a lack of clarity. To drive that home, let’s look at a different way to visualize the same field of simplex noise:</p>
<figure class="crisp">
<canvas id="terrain_demo_simplex_noise_heightmap" class="minishadow" width="500" height="300"></canvas>
</figure>
<p>Here you have a three-dimensional rendering of the exact same values, only now they’re expressed as mountains for high values and valleys for low ones. If you look closely, you can spot the features from the previous visualization in this one. Because they’re linked, if you click one of them to regenerate it, the changes will be reflected in the other one automatically.</p>
<p>Note that any dark spots you see in this 3D visualization are actual shadows, not low noise values. Dark spots in the 2D visualization correspond to valleys in the 3D one.</p>
<p>In game development, black and white images that serve as templates for the local elevation of a 3D landscape like this are called <strong>heightmaps</strong> and they’re very useful for 3D terrain. Our simplex noise field is infinitely large in theory, so we could generate as much of this landscape as we want without ever running into errors (or, technically, for a very very long but not quite infinite time). You can probably see how something like this could be used for a <em>Minecraft</em>-like game with infinite mountains to wander through.</p>
<p>But we’re not trying to make <em>Minecraft</em>, we’re trying to make <em>Worms</em>. So let’s keep digging into what we can do with this simplex noise.</p>
<p>As promised, we’ll take a closer look at the frequency. For this next visualization, I’m giving you a slider that lets you manipulate the frequency used to render our simplex noise. By dragging the slider, the frequency as seen in the prior code example can be changed within a range from 0 to 10. I’ll start you off at 3 again (although the exact values really don’t matter too much at this stage) and you can experiment with it.</p>
<figure class="wide crisp">
<canvas id="terrain_demo_frequency_source" class="minishadow" width="500" height="300" data-seed="1"></canvas>
<canvas id="terrain_demo_frequency_heightmap" class="minishadow" width="500" height="300"></canvas>
</figure>
<div class="slider_group">
<label for="terrain_demo_frequency_value">Frequency:</label>
<input type="range" id="terrain_demo_frequency_value" min="0" max="100" value="30" title="3.0">
</div>
<p>Alright, cool! So that does something interesting.</p>
<p>As you change the frequency, you can see in the 2D visualization that the size of the noise blobs is changing. Increasing the frequency lets you see more blobs, in exchange for each one of them getting smaller. Because we scale both input parameters by the same value, it looks a lot like we’re zooming out, away from the image. It feels like that because, with a 2D image, scaling it down linearly looks the same as pulling the camera away.</p>
<p>The 3D rendering offers a slightly different perspective on the frequency change. It reminds us that while the scale of the input parameters (<em>x</em> and <em>y</em> directions) is changing, the output range stays the same. Our 2D image still contains shades from all the way black to all the way white, and the 3D rendering keeps the mountains and valleys at the same height as before even while they get squished closer together. And I think the latter is the more useful metaphor for what’s happening, rather than zooming in and out. Think of increasing the frequency as <em>squishing the noise values closer together</em>, like a blanket that gets increasingly crumpled.</p>
<p>For our final landscape, we’ll be able to experiment with the frequency to pick a range that looks good. If you’re building something like this in your own game, the frequency you want will depend on the size of your target image.</p>
<p>Okay, so we can render blurry blobs at whatever size we want. But how do we get from there to an actual collision mask? So far, our output images have contained all sorts of grayscale values, but for our landscapes, there are only two valid collision values: any pixel is either ground or air, there are no in-between states. So we need to transform our blurry grayscale image into one that’s pure black and white. What’s a good strategy to do that?</p>
<p>Here’s an idea: we pick a <strong>threshold value</strong> somewhere between 0 and 1. For every pixel we render, we check whether the noise value is larger or smaller than the threshold value. If it is smaller, we color the pixel solid black (which we’ll later treat as air), if it is larger or equal – gotta account for exact equality too! – we’ll color the result white and treat it as solid ground.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">float</span> xRel = x / image.<span class="property">width</span>;
<span class="type">float</span> yRel = y / image.<span class="property">width</span>;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> value = <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="keyword">if</span>( value >= <span class="number">0.5</span> ) {
value = <span class="number">1.0</span>;
} <span class="keyword">else</span> {
value = <span class="number">0.0</span>;
}
<span class="type">int</span> brightness = <span class="function">round</span>(<span class="number">255</span> * value);
image.<span class="function">setPixel</span>(x, y, [brightness, brightness, brightness]);
}
}</code></pre>
<p>The color scheme here is, of course, completely arbitrary. You could pick white as air and black as ground if you prefer, or use completely different colors. Your world is your own! I’m just sticking with this one to keep it uniform throughout the article.</p>
<p>Alright, here’s some simplex noise rendered to solid black and white using a threshold value of 0.5:</p>
<figure class="crisp">
<canvas id="terrain_demo_threshold_simple" class="minishadow" width="500" height="300" data-seed="1"></canvas>
</figure>
<p>On average, we would expect that a threshold value of 0.5 would result in half the image being black and half being white, although outliers are technically possible.</p>
<p>If you’ve done any image editing before, you might realize that what we’ve done here is basically the same as taking a grayscale image and cranking the contrast up to the maximum. Any dark grays get pushed to solid black, any light grays get pushed to full white. And yeah, maximizing the contrast is basically the same process as taking a grayscale image and reducing the color palette to 1 bit (black and white) with the “nearest color” setting. If that means nothing to you, don’t worry about it, it’s just a neat parallel for people who have experience with that aspect of image editing.</p>
<p>So yeah, we could totally use this as a basic collision mask. It doesn’t really look like what we want yet, but at this point we have achieved a blobby-looking randomly generated landscape. Although before calling it done, maybe it’s worth exploring how picking a particular threshold value changes the result. In the process we might also gain a better intuition for what it actually means to render contiguous noise with a threshold value. So here’s a view for you where you can use a slider to change the threshold value between 0 and 1 while seeing the result rendered in 2D and 3D:</p>
<figure class="wide crisp">
<canvas id="terrain_demo_threshold_result" class="minishadow" width="500" height="300" data-seed="61658100"></canvas>
<canvas id="terrain_demo_threshold_mixed" class="minishadow optional" width="500" height="300"></canvas>
<canvas id="terrain_demo_threshold_heightmap" class="minishadow" width="500" height="300"></canvas>
<canvas id="terrain_demo_threshold_noise" class="hidden" width="500" height="300"></canvas>
</figure>
<div class="slider_group">
<label for="terrain_demo_threshold_value">Threshold:</label>
<input type="range" id="terrain_demo_threshold_value" min="0" max="100" value="50" title="0.50">
</div>
<p>As the 3D rendering shows, if you think about the threshold value in spatial terms, it’s like putting a horizontal plane into the noise field at a certain height and seeing which values are higher and which are lower. Increasing or decreasing the threshold value corresponds to raising or lowering that plane. And as you probably already realized, a threshold value of 0 means every noise value is higher (the resulting landscape is all solid) whereas a threshold value of 1 means no noise value surpasses it (the resulting landscape is all air). In between those two extremes it’s a smooth transition involving lots of blobby shapes.</p>
<p>This is our main instrument for transforming bulby, contiguous simplex noise into a landscape with hard edges. The next question is: how do we make it solid near the bottom and airy near the top? It stands to reason that to react to being at different heights in the image, we need to incorporate the <em>y</em> value into the result somehow. The easiest thing to do would be to put arbitrary top and bottom boundaries into our code and to simply blot out those stripes of the landscape.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">float</span> xRel = x / image.<span class="property">width</span>;
<span class="type">float</span> yRel = y / image.<span class="property">width</span>;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> value = <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="keyword">if</span>( value >= <span class="number">0.5</span> ) {
value = <span class="number">1.0</span>;
} <span class="keyword">else</span> {
value = <span class="number">0.0</span>;
}
<span class="keyword">if</span>( yRel < <span class="number">0.1</span> ) {
value = <span class="number">0.0</span>;
}
<span class="comment">// Remember, yRel only goes to 0.6 in our examples.</span>
<span class="keyword">if</span>( yRel >= <span class="number">0.5</span> ) {
value = <span class="number">1.0</span>;
}
<span class="type">int</span> brightness = <span class="function">round</span>(<span class="number">255</span> * value);
image.<span class="function">setPixel</span>(x, y, [brightness, brightness, brightness]);
}
}</code></pre>
<p>With the above code, the results look something like this:</p>
<figure class="crisp">
<canvas id="terrain_demo_threshold_band" class="minishadow" width="500" height="300" data-seed="34099718"></canvas>
</figure>
<p>Okay, that… fulfills the requirement of having air at the top and solid ground at the bottom, in the most technical sense. But needless to say, it’s not very aesthetically pleasing. Can we think of a better way to incorporate the <em>y</em> value more smoothly? What happens if we use it to modify the threshold value as we move down the image? By subtracting the relative <em>y</em> value (going all the way from 0 to 1 this time), we could have a high threshold value (lots of air) at the top of the image and a low threshold value (lots of ground) at the bottom.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">float</span> xRel = x / image.<span class="property">width</span>;
<span class="type">float</span> yRel = y / image.<span class="property">width</span>;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> value = <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="keyword">if</span>( value >= <span class="number">1</span> - (y / image.<span class="property">height</span>) ) {
value = <span class="number">1.0</span>;
} <span class="keyword">else</span> {
value = <span class="number">0.0</span>;
}
<span class="type">int</span> brightness = <span class="function">round</span>(<span class="number">255</span> * value);
image.<span class="function">setPixel</span>(x, y, [brightness, brightness, brightness]);
}
}</code></pre>
<p>Okay, so by dividing <em>y</em> by the image’s height, we get a true relative measure for how far down we are in the image from 0 (top border) to 1 (bottom border). If we were to use that as the threshold value directly, we would be rendering low noise values as solid at the top and not at the bottom, which is the reverse of what we want. We need to subtract the interim result from 1 to get the threshold value to <em>de</em>crease as we go down the image. Let’s see what that looks like when we render it:</p>
<figure class="crisp">
<canvas id="terrain_demo_simple_fade" class="minishadow" width="500" height="300" data-seed="1"></canvas>
</figure>
<p>Jackpot! We have found a way to make our landscapes much more suitable for side-view gameplay.</p>
<p>Let’s think for a second about what we just built. In all the threshold-based images so far, we had a threshold value that was constant regardless of the <em>x</em> and <em>y</em> values, which we visualized as a horizontal plane in the 3D view. If the threshold value is linearly dependent on <em>y</em> (but not <em>x</em>), that means we’re now <em>tilting</em> the threshold plane. If you want to be fully technically accurate, it’s more like we’re <em><a href="https://en.wikipedia.org/wiki/Shear_mapping">shearing</a></em> it rather than tilting, although if you imagine the plane as infinitely large it doesn’t make a difference in the end result.</p>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300" class="simplex_terrain minishadow">
<rect x="0" y="0" width="500" height="300" fill="#000" stroke="#fff" stroke-width="1"/>
<g fill="none" stroke="#fff" stroke-width="2">
<rect x="40" y="140" width="190" height="20"/>
<g transform="translate(135 150) rotate(45)">
<rect x="-95" y="-10" width="190" height="20" stroke="#000" stroke-width="6"/>
<rect x="-95" y="-10" width="190" height="20" stroke="#c00"/>
</g>
<rect x="270" y="140" width="190" height="20"/>
<g transform="translate(365 150) skewY(45)">
<rect x="-95" y="-10" width="190" height="20" stroke="#000" stroke-width="6"/>
<rect x="-95" y="-10" width="190" height="20" stroke="#c00"/>
</g>
</g>
<path fill="#c00" d="M275 132v-48h-2l3 -4l3 4h-2v48zM455 168v48h2l-3 4l-3 -4h2v-48zM45 132a60 60 45 0 1 12 -32l-1.4-1.4l4 -2l1.2 5l-2-1.4a60 60 45 0 0 -12 32zM225 168a60 60 45 0 1 -12 32l1.4 1.4l-4 2l-1.2 -5l2 1.4a60 60 45 0 0 12 -32z"/>
<circle cx="135" cy="150" r="3" fill="#fff"/>
<circle cx="365" cy="150" r="3" fill="#fff"/>
<text font-size="16" fill="#fff" text-anchor="middle">
<tspan x="135" y="260">rotating</tspan>
<tspan x="365" y="260">shearing</tspan>
</text>
</svg>
</figure>
<p>Making the threshold value depend directly on the <em>y</em> value is one way to do it, and as we just saw, the resulting landscapes tend to have a very good distribution of solid ground. But what if we want a bit more flexibility? What if we want a dial for a <strong>fade</strong> value that dictates how much the <em>y</em> value influences the threshold? And what if we would like to still have a separate fixed threshold value that we can manipulate regardless of the fade value? There are a couple of ways to accomplish it, but here’s one that I find elegant:</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">float</span> xRel = x / image.<span class="property">width</span>;
<span class="type">float</span> yRel = y / image.<span class="property">width</span>;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> fade = <span class="number">0.5</span>;
<span class="type">float</span> threshold = <span class="number">0.5</span>;
<span class="type">float</span> value = fade * (y / image.<span class="property">height</span>) + (<span class="number">1</span> - fade) * <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="keyword">if</span>( value >= threshold ) {
value = <span class="number">1.0</span>;
} <span class="keyword">else</span> {
value = <span class="number">0.0</span>;
}
<span class="type">int</span> brightness = <span class="function">round</span>(<span class="number">255</span> * value);
image.<span class="function">setPixel</span>(x, y, [brightness, brightness, brightness]);
}
}</code></pre>
<p>In this code you can see a fade value that’s being set to 0.5. Any value between 0 and 1 is valid. You can see that <code>(y / image.height)</code>, a linear vertical value distribution without any random noise, gets multiplied by <code>fade</code>. Next to it, our existing noise function gets multiplied by <code>(1 - fade)</code> and the results of those two multiplications are added together. This means that, for a fade value of 0, we just see our existing simplex noise distribution with no difference along the vertical position. For a fade value of 1, we get only the linear vertical distribution. Any fade value between 0 and 1 will proportionally interpolate between the two. The result is a “fade” dial that we can freely manipulate.</p>
<figure class="crisp wide">
<canvas id="terrain_demo_vfade_result" class="minishadow" width="500" height="300" data-seed="88817427"></canvas>
<canvas id="terrain_demo_vfade_heightmap" class="minishadow" width="500" height="300"></canvas>
<canvas id="terrain_demo_vfade_noise" class="hidden" width="500" height="300"></canvas>
</figure>
<div class="slider_group">
<label for="terrain_demo_vfade_threshold_value">Threshold:</label>
<input type="range" id="terrain_demo_vfade_threshold_value" min="0" max="100" value="50" title="0.50">
<label for="terrain_demo_vfade_fade_value">Fade:</label>
<input type="range" id="terrain_demo_vfade_fade_value" min="0" max="100" value="50" title="0.50">
</div>
<p>As we can see here, our two rendering parameters <em>threshold</em> and <em>fade</em> can be visualized as shifting and shearing a clipping plane within our simplex noise field. In conjunction with the <em>frequency</em> parameter we explored earlier, they form a pretty flexible toolkit for generating a good variety of acceptable side-view landscapes.</p>
<p>With these dials at our disposal, our black and white collision masks are now looking fairly solid (pun intended). Let’s call them done at this stage and move on to making things pretty.</p>
<h2 id="texturing_and_lighting">Texturing and Lighting</h2>
<p>With the finished collision mask in hand, it’s time to start rendering nicer-looking versions. Why don’t we start by throwing in some different colors?</p>
<pre><code class="highlight"><span class="keyword">function</span> <span class="function">isSolid</span>(<span class="params"> <span class="type">int</span> x, <span class="type">int</span> y, <span class="type">int</span> width, <span class="type">int</span> height </span>): <span class="type">boolean</span> {
<span class="type">float</span> xRel = x / width;
<span class="type">float</span> yRel = y / width;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> fade = <span class="number">0.5</span>;
<span class="type">float</span> threshold = <span class="number">0.5</span>;
<span class="type">float</span> value = fade * (y / height) + (<span class="number">1</span> - fade) * <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="keyword">return</span> value >= threshold;
}
<span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">150</span>, <span class="number">196</span>, <span class="number">255</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
color = [<span class="number">178</span>, <span class="number">143</span>, <span class="number">78</span>];
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>We’ve actually done two things here. First and most obvious, the collision mask calculation has been moved out of the main loop and into its own <code>isSolid</code> function. For a given <em>x</em> and <em>y</em> value (and corresponding image dimensions) it returns a boolean value that states whether that particular pixel is solid ground or not. That leaves us in a better position to work on our rendering logic without distractions. (I’ll omit the <code>isSolid</code> function in code listings from here on.)</p>
<p>The other thing we’ve done is assigning unique RGB colors for ground and air. Until now we’ve only been working with brightness values, which we passed into the <code>setPixel</code> method three times to make grayscale colors. Now the color channels actually have different values, for which I just picked some fitting RGB values out of my image editor. Let’s see what that looks like:</p>
<figure class="crisp">
<canvas id="terrain_demo_colors_basic" class="minishadow" width="500" height="300" data-seed="13480560"></canvas>
</figure>
<p>It’s wild how much just a dash of color can liven things up. Just this basic step already sells the idea of the open sky at the top and solid ground at the bottom much better than the raw collision mask did.</p>
<p>But can we do better? Since we’re already procedurally generating the landscape itself, let’s do a little experiment with procedural texturing.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] skyGradient = [ [<span class="number">92</span>, <span class="number">133</span>, <span class="number">255</span>], [<span class="number">150</span>, <span class="number">196</span>, <span class="number">255</span>] ];
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] groundPalette = [ [<span class="number">155</span>, <span class="number">118</span>, <span class="number">83</span>], [<span class="number">159</span>, <span class="number">128</span>, <span class="number">90</span>], [<span class="number">169</span>, <span class="number">138</span>, <span class="number">96</span>] ];
<span class="type">float</span> yRel = y / image.<span class="property">height</span>;
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
color = <span class="function">randomChoice</span>(groundPalette);
} <span class="keyword">else</span> {
<span class="keyword">for</span>( <span class="type">int</span> c = <span class="number">0</span>; c < <span class="number">3</span>; c++ ) {
color[c] = yRel * skyGradient[<span class="number">0</span>][c] + (<span class="number">1</span>-yRel) * skyGradient[<span class="number">1</span>][c];
}
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>You can see that we’re defining two palettes: <code>skyGradient</code> contains two colors and <code>groundPalette</code> contains three. The code uses each of them in different ways.</p>
<p>For the sky, we’re taking the two colors and linearly interpolating between them as we progress down the <em>y</em> axis. You’ve seen this trick used before for the fade value. This time around, we use it to morph smoothly between two colors, with both of them sitting at opposite ends of the image. Simply calculating the weighted arithmetic average for each of the RGB channels is a crude way to make a gradient (<a href="https://www.fastcompany.com/3002676/magical-tech-behind-paper-ipads-color-mixing-perfection">you can get much deeper into that topic</a>), but it should work well enough for our purposes.</p>
<p>For the ground, we have a palette of three separate colors from which we pick randomly for each pixel. If the colors go together well enough, this should give us a sand-like texture. Let’s see what we get!</p>
<figure class="crisp">
<canvas id="terrain_demo_colors_advanced" class="minishadow" width="500" height="300" data-seed="21949605"></canvas>
</figure>
<p>I’d say that’s another big step forward. Gradients are an underappreciated way to give a surface a bit more character, and the sand looks all nice and grainy. If this were a challenge to generate every component of the final image procedurally, we could have gone ahead with this.</p>
<p>But I’m motivated to put together some actual bitmapped textures to make things look even more decadent. Here’s a pair of air and ground textures that fit our canvas:</p>
<figure class="crisp wide">
<img src="https://fietkau.blog/assets/simplex_terrain_sky.png" alt="A background texture made mostly of light blue and purple pastels, showing a cartoony sun, clouds, and some mountains in the background" id="terrain_demo_back_texture" class="minishadow">
<img src="https://fietkau.blog/assets/simplex_terrain_ground.png" alt="A ground texture that’s layerd tones of brown soil with cartoony rocks scattered throughout" id="terrain_demo_ground_texture" class="minishadow">
<figcaption>Image credit: Background texture assembled by me based on <a href="https://openclipart.org/">Openclipart</a> assets by <a href="https://openclipart.org/detail/176488/sun">purzen</a>, <a href="https://openclipart.org/detail/20774/set-of-soft-clouds">rg1024</a>, and <a href="https://openclipart.org/detail/255870/flat-shaded-mountains-scene">GDJ</a>. Soil texture by <a href="https://www.vectorstock.com/royalty-free-vector/seamless-texture-ground-with-small-stones-vector-25552497">BabySofia on VectorStock</a>.</figcaption>
</figure>
<p>Don’t these kinda match the cartoony <em>Worms</em> art style? They go well together, but also maintain a strong enough contrast between each other that we won’t run the risk of muddying our foreground/background distinction. With those two textures loaded into our program, all we need to do is to sample from these two images at the corresponding <em>x</em> and <em>y</em> coordinates.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
color = groundTexture.<span class="function">getPixel</span>(x, y);
} <span class="keyword">else</span> {
color = skyTexture.<span class="function">getPixel</span>(x, y);
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>Without the procedural texture generation, our code has gotten a bit simpler again. Because the two textures provided above already match our canvas size, we are able to simply pass <em>x</em> and <em>y</em> values along to them unchanged, but if they were tiling textures it would not have been much more difficult – we would have used the modulo operator to map the world coordinates to repeating texture coordinates, like so: <code>color = skyTexture.getPixel(x % skyTexture.width, y % skyTexture.height);</code></p>
<p>In any case, here’s the result:</p>
<figure class="crisp">
<canvas id="terrain_demo_textures_basic" class="minishadow" width="500" height="300" data-seed="87258478"></canvas>
</figure>
<p>As much fun as it can be to muck around with simple generative textures, I gotta admit these pre-made ones have a really nice feel to them. Now the only issue is that our dirt layer is looking a bit flat. Maybe we can do something about that! With that goal in the back of our heads, it’s time to think about the order in which we’re drawing our pixels.</p>
<p>Thus far, all the calculation and color setting that we’ve been doing for each <em>x</em> and <em>y</em> coordinate pair has been <em>independent</em>. Each pixel gets set without regard for its neighbors, or for how much of the image we’ve already calculated. All that we use as input is the specific coordinates. To use a bit of computer science terminology, the inside of our main loop is <em>side effect free</em>. A common convention is for pixel images to be described line by line going from top to bottom, but we could have drawn our pixels in any order we wanted.</p>
<p>Depending on your level of programming experience, you may have just had one or several of the following thoughts:</p>
<ol>
<li>“Huh, that means we could swap our two <code>for</code> loops inside out and nothing about the result would change.”</li>
<li>“Huh, that means our program would work super well as a shader.”</li>
<li>“Huh, I remember how <a href="https://en.wikipedia.org/wiki/BMP_file_format#Pixel_array_(bitmap_data)">BMP files</a> would for some reason be stored bottom to top.”</li>
</ol>
<p>Sadly, only the first one is relevant for the purpose of this article. If you have the scanline model of image storage rather ingrained, like I have, you may have subconsciously thought that we were drawing our image line by line from top to bottom. But if you actually look closely at our loops, that’s not the case:</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
...</code></pre>
<p>It so happens that by arbitrarily starting the loop on <em>x</em> before the loop on <em>y</em>, we are currently drawing our images column by column! We start at the top left corner, then move downwards drawing each pixel as we go, then when we reach the bottom of the image we move one pixel to the right and start again at the top.</p>
<p>Why am I making such a big deal out of this if the order of the pixels doesn’t matter anyway? Well, it is about to start mattering. To do some shading, we’re going to break away from our elegantly independent draw operations and introduce some side effects. 😈</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="type">int</span> depth = <span class="number">0</span>;
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
depth++;
color = groundTexture.<span class="function">getPixel</span>(x, y);
} <span class="keyword">else</span> {
depth = <span class="number">0</span>;
color = skyTexture.<span class="function">getPixel</span>(x, y);
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>With this change, we now have a <code>depth</code> variable that keeps track of how many uninterrupted pixels of solid ground we have experienced. It starts at 0 at the top of each pixel column, then for every pixel we draw, it either gets incremented if it’s solid or set to 0 if it’s air. Can you see where I’m going with this? What if we use this variable to detect whenever we’re near the top of some solid ground and do something special in that case?</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="type">int</span> depth = <span class="number">999</span>;
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
depth++;
<span class="keyword">if</span>( depth <= <span class="number">3</span> ) {
color = [<span class="number">255</span>, <span class="number">0</span>, <span class="number">0</span>];
} <span class="keyword">else</span> {
color = groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
depth = <span class="number">0</span>;
color = skyTexture.<span class="function">getPixel</span>(x, y);
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>With this change, the first three pixels of every solid part of any pixel column should be colored bright red. I’ve also preempted a small issue by initializing <code>depth</code> to some high value rather than 0. If we did not do that, we would see our special red pixels every time a solid piece of the landscape touched the top of the canvas, which isn’t what we want. Let’s see the result.</p>
<figure class="crisp">
<canvas id="terrain_demo_lighting_basic" class="minishadow" width="500" height="300" data-seed="9030293"></canvas>
</figure>
<p>So simple, but so effective! If we now go ahead and come up with a way to draw a little bit of lighting on these first few pixels (maybe a few more than just three), it’ll be a huge boon for making the foreground feel tangible.</p>
<p>But to make the lighting look good, it won’t be enough to simply replace the ground texture with completely new colors. We’re going to want to blend our highlight color with the existing texture. So how about this: we define a <em>top highlight</em> as a list of colors for the topmost ground pixels, but in addition to the RGB channels, we also supply an opacity value (also called <em>alpha value</em>) between 0 and 1. That would allow us to mix the highlight color with the existing texture as we draw and create a smooth semi-transparent gradient for the lighting.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="type">int</span> depth = <span class="number">999</span>;
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] topHighlight = [
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">200</span>, <span class="number">0.7</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.5</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.3</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.2</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.15</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.1</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.05</span>]
];
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
depth++;
<span class="keyword">if</span>( depth <= topHighlight.<span class="property">length</span> ) {
<span class="keyword">for</span>( <span class="type">int</span> c = <span class="number">0</span>; c < <span class="number">3</span>; c++ ) {
color[c] = topHighlight[depth-<span class="number">1</span>][<span class="number">3</span>] * topHighlight[depth-<span class="number">1</span>][c] + (<span class="number">1</span> - topHighlight[depth-<span class="number">1</span>][<span class="number">3</span>]) * groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
color = groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
depth = <span class="number">0</span>;
color = skyTexture.<span class="function">getPixel</span>(x, y);
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>For the RGB channels, the entries in <code>topHighlight</code> all contain the same values making a sort of warm yellow-white. When blending daylight colors like this, using a warm off-white usually looks better than stark white. I have it starting off at 0.7 opacity and then reducing pretty quickly at first, then slower as the list goes on. That means the color blending will not be linear, but sort of rounded.</p>
<p>The actual mixing happens in the innermost <code>for</code> loop. Each RGB component is individually blended between the highlight texture and the ground texture according to the alpha value at that specific depth. It would have probably been viable to generate that list procedurally instead of writing up the entries one by one like this, but I am preparing for future grassy ambitions here.</p>
<figure class="crisp">
<canvas id="terrain_demo_lighting_alpha" class="minishadow" width="500" height="300" data-seed="73528853"></canvas>
</figure>
<p>Yeah, that looks pretty good! It helps a lot for making the terrain look like something tangible that exists in the world with the background. Now, can we do the same thing for the underside of the terrain blobs? Thanks to our fade value we tend to have fewer of them than we do top sides, but it would still be nice to have some shadows there.</p>
<p>Well, since we’re traversing the image top to bottom, we can’t use the same depth trick. We’ll have to do something where we watch for transitions from solid to air and, once we encounter one, draw our shadow on top of the previous few pixels. It’s more cumbersome, but we can do it.</p>
<pre><code class="highlight"><span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="type">int</span> depth = <span class="number">999</span>;
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] topHighlight = [
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">200</span>, <span class="number">0.7</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.5</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.3</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.2</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.15</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.1</span>],
[<span class="number">255</span>, <span class="number">245</span>, <span class="number">220</span>, <span class="number">0.05</span>]
];
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] bottomHighlight = [
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">1.0</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.8</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.6</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.45</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.3</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.2</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.1</span>]
];
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
depth++;
<span class="keyword">if</span>( depth <= topHighlight.<span class="property">length</span> ) {
<span class="keyword">for</span>( <span class="type">int</span> c = <span class="number">0</span>; c < <span class="number">3</span>; c++ ) {
color[c] = topHighlight[depth-<span class="number">1</span>][<span class="number">3</span>] * topHighlight[depth-<span class="number">1</span>][c] + (<span class="number">1</span> - topHighlight[depth-<span class="number">1</span>][<span class="number">3</span>]) * groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
color = groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
<span class="keyword">if</span>( depth > <span class="number">0</span> ) {
<span class="keyword">for</span>( <span class="type">int</span> yBack = y - <span class="number">1</span>; yBack > <span class="number">0</span> && y - yBack < depth && y - yBack - <span class="number">1</span> < bottomHighlight.<span class="property">length</span>; yBack-- ) {
<span class="type">Array</span>[<span class="type">int</span>] shadedColor = image.<span class="function">getPixel</span>(x, yBack);
<span class="type">int</span> index = y - yBack - <span class="number">1</span>;
<span class="keyword">for</span>( <span class="type">int</span> c <span class="keyword">of</span> [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>] ) {
shadedColor[c] = bottomHighlight[index][<span class="number">3</span>] * bottomHighlight[index][c] + (<span class="number">1</span> - bottomHighlight[index][<span class="number">3</span>]) * shadedColor[c];
}
image.<span class="function">setPixel</span>(x, yBack, shadedColor);
}
}
depth = <span class="number">0</span>;
color = skyTexture.<span class="function">getPixel</span>(x, y);
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>We define <code>bottomHighlight</code> as a gradient of warm brown/black from full opacity towards full transparency. When we encounter a pixel of air while <code>depth</code> is not 0, that means we just hit the first air pixel after at least one ground pixel. We define a helper variable <code>yBack</code>, which we use to traverse a short distance back up the image, blending our bottom texture colors into whatever was already rendered. When you implement this yourself, watch out for off-by-one errors in the array indexing, and keep in mind that <code>bottomHighlight</code> is effectively drawn in reverse compared to <code>topHighlight</code>.</p>
<p>Our shading and lighting result now looks like this:</p>
<figure class="crisp">
<canvas id="terrain_demo_lighting_shadows" class="minishadow" width="500" height="300" data-seed="97301910"></canvas>
</figure>
<p>That looks satisfyingly shaded. We’ve really improved the tangibility of our terrain using just the fairly simple touch of painting on a sliver of shadow wherever the ground has a bottom edge. And you may have noticed that we don’t take curvature into account at all – any lighting and shading we do is based on individual columns of pixels. As a side effect of that, the effects look as if they’re lessened on slopes. Another happy coincidence!</p>
<p>Alright, we’re getting pretty close to finishing up. But because our landscape is still looking a bit barren, I have one more trick up my sleeve. What if, instead of a translucent gradient for lighting, we try painting some grass along the top? Here’s a tiny little grass texture I came up with in my image editor:</p>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="200" height="200">
<rect x="0" y="0" width="10" height="1" fill="#09900f"/>
<rect x="0" y="1" width="10" height="1" fill="#13b71a"/>
<rect x="0" y="2" width="10" height="1" fill="#13b71a"/>
<rect x="0" y="3" width="10" height="1" fill="#09900f"/>
<rect x="0" y="4" width="10" height="1" fill="#0a780f"/>
<rect x="0" y="5" width="10" height="1" fill="#0c6e33"/>
<rect x="0" y="6" width="10" height="1" fill="#0f4b27"/>
<rect x="0" y="7" width="10" height="1" fill="#301514bf"/>
<rect x="0" y="8" width="10" height="1" fill="#3015147f"/>
<rect x="0" y="9" width="10" height="1" fill="#3015143f"/>
</svg>
</figure>
<p>It’s ten pixels high in total, with a bright green base grass color framed by a darker shade above and below, turning into a darker bluish green for the shadow and then into a translucent red-brown shadow for alpha blending. That should fit the art style we’ve got going on. I can copy and paste the RGB and transparency values from my image editor into the <code>topHighlight</code> variable and be done with it.</p>
<p>Except that I have one more detail I want to try for this version. If we use this texture as-is, it will look smoother than we want, more like green plastic than vegetation. We can introduce just a tiny little bit of procedural randomness to make it look more like blades of grass, by randomly offsetting the texture by one pixel half the time. With that little modification, here is our final code:</p>
<pre><code class="highlight"><span class="keyword">function</span> <span class="function">isSolid</span>(<span class="params"> <span class="type">int</span> x, <span class="type">int</span> y, <span class="type">int</span> width, <span class="type">int</span> height </span>): <span class="type">boolean</span> {
<span class="type">float</span> xRel = x / width;
<span class="type">float</span> yRel = y / width;
<span class="type">float</span> frequency = <span class="number">3.0</span>;
<span class="type">float</span> fade = <span class="number">0.5</span>;
<span class="type">float</span> threshold = <span class="number">0.5</span>;
<span class="type">float</span> value = fade * (y / height) + (<span class="number">1</span> - fade) * <span class="function">simplex</span>(xRel * frequency, yRel * frequency);
<span class="keyword">return</span> value >= threshold;
}
<span class="keyword">for</span>( <span class="type">int</span> x = <span class="number">0</span>; x < image.<span class="property">width</span>; x++ ) {
<span class="type">int</span> depth = <span class="number">999</span>;
<span class="type">int</span> topHighlightOffset = <span class="function">randomRange</span>(<span class="number">0</span>, <span class="number">1</span>);
<span class="keyword">for</span>( <span class="type">int</span> y = <span class="number">0</span>; y < image.<span class="property">height</span>; y++ ) {
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] topHighlight = [
[<span class="number">9</span>, <span class="number">144</span>, <span class="number">15</span>, <span class="number">1.0</span>],
[<span class="number">19</span>, <span class="number">183</span>, <span class="number">26</span>, <span class="number">1.0</span>],
[<span class="number">19</span>, <span class="number">183</span>, <span class="number">26</span>, <span class="number">1.0</span>],
[<span class="number">9</span>, <span class="number">144</span>, <span class="number">15</span>, <span class="number">1.0</span>],
[<span class="number">10</span>, <span class="number">120</span>, <span class="number">15</span>, <span class="number">1.0</span>],
[<span class="number">12</span>, <span class="number">110</span>, <span class="number">51</span>, <span class="number">1.0</span>],
[<span class="number">15</span>, <span class="number">75</span>, <span class="number">39</span>, <span class="number">1.0</span>],
[<span class="number">48</span>, <span class="number">21</span>, <span class="number">20</span>, <span class="number">0.75</span>],
[<span class="number">48</span>, <span class="number">21</span>, <span class="number">20</span>, <span class="number">0.5</span>],
[<span class="number">48</span>, <span class="number">21</span>, <span class="number">20</span>, <span class="number">0.25</span>]
];
<span class="type">Array</span>[<span class="type">Array</span>[<span class="type">int</span>]] bottomHighlight = [
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">1.0</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.8</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.6</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.45</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.3</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.2</span>],
[<span class="number">50</span>, <span class="number">35</span>, <span class="number">0</span>, <span class="number">0.1</span>]
];
<span class="type">Array</span>[<span class="type">int</span>] color = [<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>];
<span class="keyword">if</span>( <span class="function">isSolid</span>(x, y, image.<span class="property">width</span>, image.<span class="property">height</span>) ) {
depth++;
<span class="keyword">if</span>( depth + topHighlightOffset <= topHighlight.<span class="property">length</span> ) {
<span class="type">int</span> index = depth + topHighlightOffset - <span class="number">1</span>;
<span class="keyword">for</span>( <span class="type">int</span> c = <span class="number">0</span>; c < <span class="number">3</span>; c++ ) {
color[c] = topHighlight[index][<span class="number">3</span>] * topHighlight[index][c] + (<span class="number">1</span> - topHighlight[index][<span class="number">3</span>]) * groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
color = groundTexture.<span class="function">getPixel</span>(x, y);
}
} <span class="keyword">else</span> {
<span class="keyword">if</span>( depth > <span class="number">0</span> ) {
<span class="keyword">for</span>( <span class="type">int</span> yBack = y - <span class="number">1</span>; yBack > <span class="number">0</span> && y - yBack < depth && y - yBack - <span class="number">1</span> < bottomHighlight.<span class="property">length</span>; yBack-- ) {
<span class="type">int</span> shadedColor = image.<span class="function">getPixel</span>(x, yBack);
<span class="type">int</span> index = y - yBack - <span class="number">1</span>;
<span class="keyword">for</span>( <span class="type">int</span> c <span class="keyword">of</span> [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>] ) {
shadedColor[c] = bottomHighlight[index][<span class="number">3</span>] * bottomHighlight[index][c] + (<span class="number">1</span> - bottomHighlight[index][<span class="number">3</span>]) * shadedColor[c];
}
image.<span class="function">setPixel</span>(x, yBack, shadedColor);
}
}
depth = <span class="number">0</span>;
color = skyTexture.<span class="function">getPixel</span>(x, y);
}
image.<span class="function">setPixel</span>(x, y, color);
}
}</code></pre>
<p>Aaaand that’s it! We have some grassy looking highlights on our procedural landscapes.</p>
<figure class="crisp">
<canvas id="terrain_demo_lighting_grass" class="minishadow" width="500" height="300" data-seed="46666084"></canvas>
</figure>
<p>I don’t know about you, but I’m ready to call things done in this state. If you scroll back up and compare this to the <em>Worms 2</em> screenshot, I think we’ve gotten pretty close. Alright, let’s finish up this journey.</p>
<h2 id="results">Final Results</h2>
<p>To recap:</p>
<ul class="bullet">
<li>We have used simplex noise to generate collision masks suitable for 2D pixel landscapes.</li>
<li>We defined <em>frequency</em>, <em>threshold</em> and <em>fade</em> parameters that let us fine-tune the generated landscapes.</li>
<li>We have gone from plain colors to simple procedural textures and to full painted ones.</li>
<li>We have introduced a simple highlight system that lets us dynamically add surface detail.</li>
</ul>
<p>Not bad for one blog article, I would say! And the result really does look pretty close to what we set out to imitate. Here’s a final little playground for you, where you can tweak all our parameters to your heart’s content and see what comes out the other end. Remember that you can click the image to reshuffle the simplex noise. If you find a landscape you particularly like, feel free to right click and save, it’s yours to keep!</p>
<figure class="crisp wide">
<canvas id="terrain_demo_final_result" class="minishadow" width="500" height="300" data-seed="98281260"></canvas>
<canvas id="terrain_demo_final_heightmap" class="minishadow" width="500" height="300"></canvas>
<canvas id="terrain_demo_final_noise" class="hidden" width="500" height="300"></canvas>
<canvas id="terrain_demo_final_tex_helper" class="hidden" width="500" height="300"></canvas>
</figure>
<div class="slider_group">
<label for="terrain_demo_final_frequency_value">Frequency:</label>
<input type="range" id="terrain_demo_final_frequency_value" min="15" max="70" value="30" title="3.0">
<label for="terrain_demo_final_threshold_value">Threshold:</label>
<input type="range" id="terrain_demo_final_threshold_value" min="0" max="100" value="50" title="0.50">
<label for="terrain_demo_final_fade_value">Fade:</label>
<input type="range" id="terrain_demo_final_fade_value" min="0" max="100" value="50" title="0.50">
<label for="terrain_demo_final_textures_value">Textures:</label>
<input type="range" id="terrain_demo_final_textures_value" min="0" max="3" value="3" title="Full textures">
<label for="terrain_demo_final_highlights_value">Highlights:</label>
<input type="range" id="terrain_demo_final_highlights_value" min="0" max="3" value="3" title="Full highlights">
</div>
<p>If this has gotten you motivated to do some creative stuff with simplex noise or to come up with some other way to make procedural terrain, I wish you the best! Here’s some food for thought for possible steps after this:</p>
<ul class="bullet">
<li>So far we have a simple, linear fade function from the top of the landscape to the bottom. But <em>Worms</em> levels were usually islands or enclosed caves, so you’d be unable to walk out the side. How could our fade function be modified to make sure the left and right sides are all solid or all air?</li>
<li>Part of the fun of <em>Worms</em> and other games like it is the destructible world. Assuming you’ve generated some terrain and you have a copy of the collision mask, how would you blow a circular hole somewhere into the terrain and how would you update the final render result?</li>
<li>We’ve been working with two-dimensional simplex noise, but generating higher-dimensional noise is no trouble. What would you do with three-dimensional simplex noise? Can landscapes be made out of it? What would they look like and what kind of gameplay would they be suitable for?</li>
</ul>
<p>This has been my first blog article about game development, and also my highest-effort blog article ever, by some margin. I learned how to do a bunch of new things in three.js for this! If you enjoyed it or found it helpful, I would appreciate it if you shared it in whatever game dev / indie dev community you’re a part of. I would like to thank <a href="https://www.youtube.com/@Christinacreatesgames">Christina</a> for her feedback on a draft version of this article, and <a href="https://bamboy.itch.io/">Bamboy</a> for inspiring me to properly write all of this down by posting <a href="https://mastodon.gamedev.place/@bamboy/110561886431913180">a thread on his own (completely different) approach</a>. More feedback is always appreciated – you can leave a comment, <a href="https://fietkau.social/@julian">contact me on Mastodon</a>, or <a href="mailto:julian@fietkau.me">send me an email</a>. That said, there are absolutely no guarantees for what I’ll write about next. This blog is a pretty big topical catch-all for my interests and the next article will, statistically speaking, most likely not be about game development. We’ll see what happens. For now, thanks for reading!</p>
game devprocedural generationproc genprogrammingAnother Blog Resurrection, the Fediverse, and a New Comment Systemhttps://fietkau.blog/2023/another_blog_resurrection_fediverse_new_comment_system2023-06-30T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>I thought there wouldn't be another “I have a blog again” post on here, and if I'd just quietly put it back online, I promise I wouldn't be publishing one. But since this iteration of my blog now sports a new commenting system that pulls comments from the fediverse, I should at least write up a few paragraphs about that before I set time aside for deep-dive posts on other topics.</p>
<p>Before that though, a very short history of this blog: my previous blog ran from 2010 until 2015 and mostly featured posts about my undergrad studies, with an extensive article series detailing the week-by-week progress on my first bachelor thesis, as well as loosely related topics from the realm of programming and computer science. For this version of the blog, I brought back almost all previous posts of mine (with very few exceptions that amounted to now-obsolete product ads) and translated everything into English that used to be available only in German.</p>
<!-- break -->
<p>In the spirit of my recent mantra of being <em>even more open</em> about what I create and what I enjoy, I also pulled in all my old Steam game reviews and a few posts from even older versions of my website and other blogs I've written for. For example, <a href="https://fietkau.blog/2007/my_custom_built_modded_pc">the tale of how I built and extensively customized my PC in 2007 and somehow bumbled my way into that year's German Case Modding Championship</a> is now documented in English for the very first time. As much as my instinctual reaction is to cringe at my old writing, I'm trying to stand by the things I've made and to give you access to my complete blogging archive, even if that means the archive will look a bit incoherent in tone and topic.</p>
<h2>Community-owned Social Media</h2>
<p>If you happened to speak to me on the topic of social media some time in the past half a decade or so, you already know that I'd grown very disenchanted with the world of social platforms. I was pretty active on Twitter from 2010 until around 2013, then I slowly fell off. The same happened with Facebook. Reddit held out a while longer as something I still thought was good fun, <a href="https://fietkau.social/@julian/110559482296958059">until just these past few weeks</a>. My fully abandoning Twitter in favor of Mastodon goes back a little further than that, to November 2022. Elon Musk's purchase of the platform provided a convenient justification, but truthfully my reasons for leaving it behind are a bit more multi-layered than that, even as <a href="https://twitterisgoinggreat.com/#verified-neo-nazism-returns-to-twitter">the platform's trajectory</a> keeps solidifying the decision as the correct one.</p>
<p>In a nutshell, six to eight years ago I'd started wondering why so many big successful websites would stop prioritizing the needs and priorities of their users. As someone working in human-computer interaction, I'm primed to think about the quality of interactive systems in terms of what they do for people and what needs they fulfill. With the big social media sites, it felt increasingly like they were working <em>against</em> their users' well-being instead of in support of it. Recently, Cory Doctorow coined the term “<a href="https://pluralistic.net/2023/01/21/potemkin-ai/">enshittification</a>” for this kind of platform progression:</p>
<blockquote>
<p>Here is how platforms die: first, they are good to their users; then they abuse their users to make things better for their business customers; finally, they abuse those business customers to claw back all the value for themselves. Then, they die.</p>
<p>I call this enshittification, and it is a seemingly inevitable consequence arising from the combination of the ease of changing how a platform allocates value, combined with the nature of a “two sided market,” where a platform sits between buyers and sellers, holding each hostage to the other, raking off an ever-larger share of the value that passes between them.</p>
</blockquote>
<p>Doctorow explains the market forces that drive this decay and I recommend <a href="https://pluralistic.net/2023/01/21/potemkin-ai/">his article</a> to anyone interested in how online platforms and communities work, or who has been feeling puzzled about what's going on at Twitter and Reddit these days.</p>
<p>For a bit over a decade, the social internet had coalesced into four or five huge websites run by American tech companies. They got the people of the world used to the idea of free online social infrastructure, then when they felt confident enough in their lock-in effects, they started turning the thumbscrews. <a href="https://mastodon.social/@mcc/109383696907716007">Here's a good summary of the venture capital tech funding model by Andi McClure</a> that explains why these platforms are running almost literally on borrowed time.</p>
<blockquote>
<p>Here is the thing you have to understand about VCs (and therefore, companies and websites that have accepted VC money), always and forever. Repeat it like a mantra.</p>
<p>--- Venture capitalists do not invest in the company. Venture capitalists invest in the exit. ---</p>
<p>Eventually any site, app whatever has a Sell Out Moment. They get bought by a big established corp, they go IPO, something. There is an “Exit”. If you accept VC money, you are <em>promising</em> that Exit day is coming and it will be <em>big</em>.</p>
<p>Generally the VC model does not look like you invest in a company and you expect your investment to get a bit bigger. It looks more like, you invest in ten companies and you expect nine to fail and one to make back <em>more than 10x</em> what you invested in it.</p>
<p>VC startups, when they're trying to build groundwork for an Exit, often do warm & fuzzy market-irrational things like build a personal relationship with happy customers. The exponential payoffs the VCs want don't look like making people happy.</p>
<p>If you see people alarmed at a Twitter replacement “taking VC money”, this is the reason that's alarming. A company might have the most well-meaning, nice people running it, but those nice people will have to deliver an Exit. We are no longer in the era you can even really hope that Exit will be an IPO. “Well, now the cruel hand of the market rules us” is too much to ask. We've now established the most profitable Exit for a social media company is to sell to a Musk/Murdoch/Trump style oligarch.</p>
<p>This isn't to say new VC-funded social companies won't make good products—they might even <em>stay</em> good products longer than you stick around! But you need to be aware there's a ticking, <em>legally unavoidable</em> time limit.</p>
<p>This is why I have more long-term trust in Mastodon (run by a nonprofit, & set up such the nonprofit is effectively extraneous) or Cohost (funded, as I understand, through conventional bank loans, which are non-exponential and can be someday paid off without sacrificing kittens).</p>
</blockquote>
<p>The past half a year has made this problem a lot more obvious to a large number of people, with Twitter, Reddit, Discord, and literally as I write this <a href="https://www.androidauthority.com/youtube-confirm-three-strikes-policy-ad-blocking-test-3340826/">even YouTube</a> getting increasingly desperate about monetization. With corporate, VC-funded social media in such decline, what might replace them?</p>
<p>It may suprise some of you to read this, but I'm actually pretty conservative in terms of what platforms I join. When it comes to my online presence, I'm not much for experimentation just for the fun of it. By October 2022, I'd been watching Mastodon from a distance for years with a growing degree of curiosity. <a href="https://joinmastodon.org/">Mastodon</a>, in case you need a primer, is a social network that looks a lot like Twitter, but (1) it is open source and can be self-hosted, and (2) those self-hosted Mastodon servers can seamlessly interact, allowing participants to exist as part of a federated social network using <a href="https://www.w3.org/TR/activitypub/">the ActivityPub W3C standard</a>. By October/November 2022, it looked like the Elon Event Horizon had prompted about half of the people I used to follow on Twitter to give Mastodon a shot (a privilege afforded by my tech-adjacent social bubble), so being a self-hosting nerd, I sat myself down and <a href="https://fietkau.social/">set up a Mastodon instance</a>. And, honestly, it's been great! Right away I felt so much lighter and more eager to talk to people because I knew my every action wasn't fueling some ad-targeting panopticon. One of the things that utterly took the fun out of Twitter for me was looking through the analytics data they had on me and understanding how the platform was using every word I typed and every <em>Like</em> button I pressed against me. Running my own social networking infrastructure felt incredibly freeing by comparison.</p>
<p>I can run my own Mastodon instance because I'm the type of nerd who does self-hosting as a hobby, but most people will probably want to join an existing server. There are plenty of options for that. The question is, who should own this infrastructure? Who do we trust with it? You'd think that as they walk away from the latest enshittified corporate platform, people would stop for a minute and consider this question before throwing themselves into the next one. It is increasingly clear that big American tech companies are structurally unable to foster a sustainable social network – the pressure to extract as much financial value from it as possible is just too high.</p>
<p>Personally, I think it is time for the social infrastructure of the web to be owned by the communities that rely on it. Federated social media projects like Mastodon make this possible. Anyone can run a server for their community, be that a geographical community, a professional community, a community based around some other interest, or even just a family or a circle of friends. These communities themselves should decide who they talk to, what content is and isn't allowed in their space, and how they want to interact with one another. Their exchanges should not be a vehicle for some external tech company to extract value, but what they post online should continue to be their property.</p>
<p>Like old-school internet forums, federated social media makes this kind of ownership model possible. Unlike forums, it does it while still letting people from different communities seamlessly talk to one another. Because ActivityPub is an open standard, they don't even need to be running the same software. I like Mastodon well enough, but some people don't enjoy the way Mastodon looks and may prefer to use something like <a href="https://calckey.org/">CalcKey</a> instead. Or if they just left reddit behind, they may opt to find a new home on <a href="https://kbin.pub/">kbin</a> and browse the fediverse through that kind of interface. People have different preferences for how they want to look at social content online, and that's great! They should be free to use whatever app or website they like and still be able to talk to all their friends. The thriving fediverse exposes corporate social media's lock-in effect – the way Discord forces you to use Discord if you want to talk to your friends who use Discord, or how WhatsApp forces you to use WhatsApp to talk to your friends who use WhatsApp, etc. – as the user-hostile entrenchment strategy that it is.</p>
<p>That isn't to say that there are no questions yet to be answered. On the contrary, lots of issues still need to be thought through, experimented with, and solved (such as account portability, cross-instance user interaction in web browsers, or admin accountability to server users). But what's nice is that all these problems <em>are</em> being worked on and <em>can</em> be solved. In community-owned social media, we <em>can</em> tackle these problems and shape the online spaces we inhabit according to our needs. <a href="https://www.zdnet.com/article/reddit-threatens-to-remove-moderators-of-subreddits-that-are-still-closed/">Whereas if someone else owns them, we find out sooner or later that we have no such power.</a> This is the fundamental promise that I see in federated social media and that has me optimistic about it. Putting the ownership of social infrastructure into the hands of the communities themselves is something that makes too much sense not to do, is too aligned with human needs to push aside indefinitely. <a href="https://hachyderm.io/@mekkaokereke/110576679467800367">As Mekka Okereke recently put it</a>:</p>
<blockquote>
<p>I'm still sticking with my call that <em>long-term</em>, decentralized social media will be the winner. Too many of the world's greatest Android and iOS mobile development teams are now building for the fediverse. Too many of the world's best <em>human</em> moderation, privacy, and safety, experts are on the fediverse. The user benefits are too aligned, despite companies not having the usual metrics and analytics to optimize the experience.</p>
</blockquote>
<h2>A Shift in Complexity</h2>
<p>That said, not all of us currently on social platforms are old enough to remember Usenet's heyday. For young people who have grown up on and internalized the idea of corporate social media, disentangling social graphs, connections and conversations from centralized platforms and their owners is a paradigm shift. I have a strong suspicion that not nearly all of the causes for people calling Mastodon or kbin “confusing” come down to immature user experience design (though that is certainly an area where most fediverse software needs to make progress as well), but that the concept of federation itself is something new for most people to wrap their heads around. Though contrary to most people I've seen discuss this, and here comes probably the most controversial part of this post, I don't think federation actually adds any new complexity to social platforms. It just shifts it around. Okay, please bear with me for a second.</p>
<p>In user interface design, there is this notion of <em>conservation of complexity</em>. It posits that the tasks for which we use our interactive systems have some degree of innate complexity that we can't just “work around.” You can make your interface more friendly by providing a sensible structure that's easily adapted into a mental model, and you can often reduce existing complexity if it provides no benefit, but there is a limit. No matter how hard you try, most tasks cannot be reduced to a single button press. The complexity still has to exist somewhere in the interaction. And if you're not careful, you may find yourself inadvertently introducing complexity somewhere by reducing it somewhere else – for example, you might try to reduce the visual complexity of an interactive form by separating a group of inputs across two pages of a wizard, and it'll <em>look</em> less complex, and your users may even prefer it and <em>describe</em> it as less complex, but even so, you may have just accidentally increased the amount of information they have to keep in their short-term memory to effectively do what they want to do. It might still be a good change! But if you're unlucky, maybe you just increased the error rate for people using your interface. And if you get <em>too</em> overzealous about simplifying your interface, you might reduce the capabilities of your software so much in the process that your users will need to find something new to fulfill their tasks. Basically, whenever you simplify something, make sure you're not just pushing the complexity somewhere else.</p>
<p>If you've ever tried to explain the fediverse to people, you may have mentioned conversations you've had across separate servers and across different social platforms. “You can use Mastodon if you like it, or you can use CalcKey if you prefer the way it looks,” you might have said. “You can talk to all the same people either way, just pick the software you like best!” And to that you may have encountered responses along the lines of: “That sounds way too confusing, people just want one single place to go. You really need to simplify this stuff if you want it to catch on.” And then you might have found yourself wondering how you're not getting across that what the person is describing – all your conversations in one place – is what the fediverse can offer, but the corporate social networks they're currently using cannot. This is the complexity that social lock-in brings with it: if I want to talk to one of my friends, I have to remember on which platforms we're connected or not, what their account name might be in this or that place, and if it's a platform I don't use often I might have to create an account or reset my password. Internet users at large are so used to this complexity that they usually don't even realize it's there. And when something comes along that does away with that complexity – on the fediverse, you can use your favorite platform and still talk to all your friends from your one single account no matter what platform they're using – that challenges their basic assumptions on such a level that it feels confusing or even unfathomable.</p>
<p>This paradigm shift, which can <em>look</em> like upfront complexity but actually offers simplification for your interactions, is challenging to explain, and I hope we can continue to rise to that challenge.</p>
<h2>Fedi-enabled Comments</h2>
<p>The previous iteration of this blog had a comment section where people could leave pseudonymous comments. It optionally allowed authentication via OpenID, which came with a perk: commenters who authenticated through any OpenID provider were allowed to place links in their comments, unauthenticated comments had any and all links stripped out for spam protection. (I got a lot of spam comments and even ended up implementing my own detection heuristic.)</p>
<p>This time around, now that I have been active on Mastodon for more than half a year, I thought it would be cool to hook this blog into the fediverse as a way to provide a way to comment. WordPress sites can do things like that through an ActivityPub plugin, but with my website being powered by a static HTML generator, I knew I'd have to find a different approach.</p>
<p>So instead, I set up a <a href="https://fietkau.social/@blog">news feed account</a> for this blog on my Mastodon server. Each time I publish a new post here, a post also goes out through that Mastodon account. I can then hook into the replies to that post to provide an integrated comment section here. The implementation is very closely inspired by <a href="https://jan.wildeboer.net/2023/02/Jekyll-Mastodon-Comments/">Jan Wildeboer's Mastodon comment integration for Jekyll</a> and <a href="https://mastodon.blaede.family/@cassidy/110623574992080570">Cassidy Blaede's second iteration of it</a>, although I didn't end up copying any of their code verbatim. Compared to Cassidy's version I've made the following changes:</p>
<ul>
<li>Comments are indented according to their threading position.</li>
<li>Comments within each level are shown chronologically (no preferential treatment for the parent comment's author).</li>
<li>If a reply starts with an “@” mention of the parent comment's author, as is normal on Mastodon, it is stripped out automatically.</li>
<li>I show likes and boosts only if their count is non-zero, and I skip reply counts entirely.</li>
</ul>
<p>I replicated Cassidy's idea to limit comments to just the ones posted with the visiblity set to “public.” If you'd rather not see your comment here, you can still reply with “unlisted” visibility or less.</p>
<p>Depending on how this new system gets used in practice, I may make further adjustments such as limiting thread depth. We'll see!</p>
<p>If you enjoy this and would like to copy it for your own page, you can <a href="https://stuff.jfietkau.me/mastodon_comments">take a look at the code here</a>. (That's just the client-side comment loading and rendering code, the auto-poster is rather tightly coupled within <a href="https://fietkau.software/makesite.git">my all-custom static website generator</a> which powers this blog and the rest of my website.)</p>
<p>And if you're already somewhere on the fediverse, do feel free to leave me a comment on this blog post so the new system can prove itself.</p>
metaMoving from GitHub to Self-hosted Git Repositories: My Journeyhttps://fietkau.blog/2022/moving_from_github2022-08-29T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>This website functions sort of like a work portfolio, where I show off the things I do. Since one of
the things I make is software, I have project showcases for my homemade software tools, large and
small. I see my personal website as an opportunity to be a craftsman without deadlines, to come up
with solutions that are fun to me even if they're not the most efficient way, and to have everything
under one roof if I can. I have moved my stuff that used to be distributed on services like SlideShare,
Scribd and YouTube all onto my website.</p>
<p>For the last few years, the only major holdout was my open source code on GitHub. This post is about
my considerations and goals for moving from GitHub to self-hosted Git repositories, possible solutions
I considered, the solution I ended up going with, and how I integrated it into my existing website
design. It's about a mixture of self-hosting, service integration and web development. I hope some of
you will find it interesting.</p>
<!-- break -->
<h2>What I Wanted</h2>
<p>At the start of this project, I had about a dozen repositories on GitHub, nearly all with no outside
activity to speak of and with me as the sole developer. I barely network in the free software
community, I have contributed small patches here and there but most of the time I make things for
my personal use. I'm in the privileged position as a software developer where if a tool I want doesn't
exist, I can take a shot at creating it myself, and if I like what I make I often put it under a free
license because I might as well.</p>
<p>Here's a list of what I wanted for my self-hosted Git repositories:</p>
<ul>
<li>A simple web interface (no additional client required)</li>
<li>The ability for users to browse the commit history and the corresponding files</li>
<li>Direct zip downloads for version snapshots, at the very least for the latest version</li>
<li>A nice and pretty cloneable https URL per repository</li>
<li>Pages that are always up to date – I want to be able to push to one of the repositories and have
the new commit show up right away</li>
<li>Something I can seamlessly integrate into my existing website</li>
<li>Ideally each repository's landing page would show the readme file if available, like GitHub does</li>
</ul>
<p>And here's what I didn't want or need:</p>
<ul>
<li>Issue trackers, wikis, pull requests, essentially any of GitHub's social features</li>
<li>Anything showing arbitrary user input I'd have to secure and moderate, really</li>
<li>Pushable https URLs through the web interface – I can access my own server via SSH and I
would like to avoid the possible attack surface</li>
<li>Something that I need to worry about keeping updated all the time for security reasons – one of
my earlier websites used a popular CMS and it has made me very wary of getting roped onto a
neverending update treadmill. I want to spend my free time making cool stuff, not reading
release notes about security fixes in components I don't even need. My current website is
statically generated and served as plain HTML files via Apache, if that gives you an idea of my
web engineering style.</li>
</ul>
<h2>Other Possible Solutions</h2>
<p>I briefly installed the community version of GitLab, largely because that's what I use at work, but it
really struggled to run on my server and starved other processes of resources, so it didn't last longer
than an afternoon of experimentation. Way too bulky for my use case.</p>
<p>I also looked at Gitea. In terms of ready-to-run products you can download, it's probably the closest
to what I was after, but it still does a lot more than I need and I feel a bit iffy about it being kind of a
black box – a compiled binary based on source code in a language I don't know. Integrating it into my
website seems like it would have been a major undertaking. Also I gave it a few hours of fiddling and
if I remember right I couldn't really get it to run. Might have been something about dependencies, I
don't remember, it's been a while.</p>
<p>A much more barebones idea I also considered was setting up a highly restricted user account on my
server, putting all the Git repositories in its home directory with read-only access, and just sort of…
informing people of the SSH URL if they wanted to clone anything. I quickly decided against this
because it didn't fulfill nearly enough of my wants and I wasn't confident I could secure it enough.
Apparently gitolite or gitosis can help with this but I didn't look into them very much.</p>
<h2>What I Went With: Gitweb + My Own Wrapper Script</h2>
<p><a href="https://git-scm.com/docs/gitweb">Gitweb</a> is Git's “official” web frontend. It's essentially a CGI script written in Perl that makes a
directory containing Git repositories web-browsable. It's very lightweight, doesn't have any concept of
user accounts or social features, and just knows what Git commands to run to get the relevant
information out of the repositories. The cherry on top is that it's essentially a finished project – it gets
like 3 commits a year, mostly to keep up with web standards, and I don't think anything short of Git
itself breaking its user interface is going to break this thing.</p>
<p>Its main downside is that it looks and feels a bit old school – the visual design feels very early 2000s
and it's not mobile-friendly at all. I knew there were some features inspired by GitHub I'd need to add
to the landing pages, like a nice button with the clone URL and a zip download link and a readme
display case. I also wasn't too happy with the URLs that use ugly query string parameters instead of a
virtual path hierarchy.</p>
<p>I could have made these modifications to the gitweb Perl script directly, but despite the relative rarity
of updates, I was still not thrilled with the prospect of merging future versions with my modifications
time and again, plus my Perl experience is very limited. So I decided to write a wrapper script in
Python that handles the CGI request.</p>
<p>So if you click on a Git link on my website, the server does the following:</p>
<ul>
<li>Apache receives the request, prepares a CGI environment, and launches my wrapper script
through Python</li>
<li>The wrapper script adjusts the input and calls the gitweb Perl script as a subprocess</li>
<li>gitweb does its thing and outputs the HTML result</li>
<li>The wrapper script captures the gitweb output and makes a bunch of customizations before
outputting it via CGI</li>
<li>Apache sends the result to the client</li>
</ul>
<p>I dare say that it's pretty neat, and also plenty fast, which I admit I was concerned about.
My wrapper script does things like accepting a hierarchical path request and converting that into a
query string for gitweb (and the other way around for internal URLs in the output), adding the
download popup to the repository landing page, and surrounding the content with my website's
header and footer for the coveted seamless integration.</p>
<p>Showing the readme file on the landing page was one of the bigger challenges. <a href="https://gist.github.com/epost/3841798">I found this code
snippet</a>
by Erik Post, which is a patch for gitweb itself to do the thing, and which allowed me to
learn which Git commands to run in what order to achieve the result I needed, which I then
implemented in Python in my wrapper script. I also run the file through Python's markdown module at
that point.</p>
<p>Also, gitweb doesn't offer clone-able http(s) URLs. I don't fully understand why, it seems they just
decided against putting that in there. They have <a href="https://git-scm.com/docs/gitweb#_advanced_web_server_setup">documentation on how to configure Apache</a> to
delegate the appropriate URLs to Git's HTTP backend instead of gitweb, so after futzing with my own
Apache config for a while (which already relies on a probably overly complex web of rewrite rules) I
gave up and implemented the rules into my wrapper script, which now knows when to call Git directly
instead of gitweb.</p>
<p>I made sure that the static files gitweb needs are available on my server and spent some time
modifying gitweb's CSS to bring it in line with my website. Making the individual pages responsive
involved liberal use of CSS grid to shuffle table cells around. Try dragging your browser window
smaller on one of the pages if you'd like to see it.</p>
<h2>Conclusion</h2>
<p><a href="https://fietkau.software/git_repositories">Here's the result</a>! This list and the repository views linked on it are provided by gitweb, whereas the
project pages accessible from <a href="https://fietkau.software/">the overview</a> are part of my statically generated website. Please let
me know if you see anything that doesn't work or that looks wrong.</p>
<p>I'm extremely satisfied with what I got out of this. I've only had it running for a few weeks now so I'll
see if I run into any issues down the line, but so far I'm optimistic. If you'd like to know more about
any part of this or need help deciding whether to replicate it, ask away.</p>
<p>I have deleted most of my old GitHub repositories now. Some I decided to keep on there because
their GitHub URLs have appeared in external publications that I cannot update, so I don't want to kill
the links. Those also happen to be my most “popular” repositories (if you go check, please don't laugh
– like I said, my projects don't tend to be popular) and this way people can keep one-click forking
them over there if they feel like it.</p>
programmingself-hostingGame Review: Sweetest Monsterhttps://fietkau.blog/2017/sweetest_monster2017-02-13T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>No matter how rewarding it can be much of the time, a full family life comes with its own hardships, especially as the years wear on. Routine can smother the spark, if no effort is made to keep it alive. The protagonist of this story feels unloved and abandoned, his wife argues with him day in and day out, his daughter avoids him altogether. So when a pretty young girl appears, seemingly out of nowhere, and offers him a new perspective, will his familial loyalty manage to subdue his base desires?</p>
<!-- break -->
<p><a href="https://store.steampowered.com/app/585890/Sweetest_Monster/"><strong>Sweetest Monster</strong></a> is the newest kinetic novel born of <em>ebi-hime</em>'s quill and published on Steam by <em>Sekai Project</em>. Its 40 000 words of non-branching story translate to three hours of reading time, give or take one. It boasts widescreen visuals (although the assets are not quite 1080p) as well as a custom original soundtrack and all the quality-of-life features we are used to from modern VNs, like multiple save slots and a skip-read-text mode. It's available on all three major platforms, and as always, I'll note that the presence of a Linux version makes it that much more convenient for me personally.</p>
<p>It's difficult to talk about <em>Sweetest Monster</em>'s technical and artistic choices without delving right into <a href="https://fietkau.blog/assets/sweetest_monster_1.jpg">the atmosphere</a>. Every piece of artwork and music in this title is bespoke, and the resulting coherence and intensity of the mood is something that would be impossible to achieve with the stock sprites and elevator music often seen in the lower priced VN market segment. Everything is gloomy and eerie, not so far outside the norm that it would scare you away immediately, but just far enough to make you doubt your own judgment. <a href="https://fietkau.blog/assets/sweetest_monster_2.jpg">Bell</a> is a very interesting take on the <em>femme fatale</em>, the art as well as the writing convey very clearly that there is more to her than meets the eye.</p>
<p>Speaking in terms of genres, what <em>can</em> one expect from <em>Sweetest Monster</em>? I'd say that “psychological horror” is a good enough fit, even though it paints an incomplete picture. There are also slight allusions to cosmic horror, and if you like your stories to make you feel small and insignificant, this one may be a decent bet. There is character drama, of course, and a story centered around a young seductress may be particularly appealing to some. Though no matter your expectations going into it, and even if you pick up on more details than I did, the final act should still leave you thoroughly disturbed.</p>
<p>Those who have read my other reviews may already be aware that I'm generally fond of genre subversions. Granted, if <em>Sweetest Monster</em> were nothing more than a boring rehash of moege catgirl clichés, I wouldn't be writing about it in the first place, but just as a general note: I like being surprised by the fiction I read, and this VN managed to keep me on my toes, even though it was nothing if not upfront about where its story would be headed. On the contrary, watching the main character slide <a href="https://fietkau.blog/assets/sweetest_monster_3.jpg">from one careless mistake into the next</a> and seeing the <a href="https://fietkau.blog/assets/sweetest_monster_4.jpg">potential consequences pile up</a>, it comes with all the morbid fascination of <a href="https://fietkau.blog/assets/sweetest_monster_5.jpg">watching a train derail in slow motion</a>.</p>
<p>I'm going to dwell on Robin Hawkins a bit more, just because apart from his being rather timid and indecisive, he is pretty far outside the norm for male VN protagonists as well. He is around 40 years old, has a full-time job and a family. He's not a blank slate at all, we start the story learning about his life, his hopes and worries, and it's made very clear that he is a full-fledged character. This also opens him up to being potentially unlikable, depending on how well the reader's views align with his own. Reading some other reviews of this VN, I found that the whole gamut was covered from “very relatable main character, highly immersive” to “implausibly dumb protagonist” and everything in between. Even though Robin likes to prop himself up as a hapless victim, I fall into the faction that thinks the story might have unfolded very differently if someone had told him earlier and more often that his problems are <a href="https://fietkau.blog/assets/sweetest_monster_6.jpg">largely his own damn fault</a>.</p>
<p>Any discussion of <em>Sweetest Monster</em> would be decidedly incomplete without an intertextual perspective. By the author's own admission, popular moege like <em>Nekopara</em> were a major influence on this title, but – again – if this were a mere attempt at going with the flow and pandering to market forces, I wouldn't be writing about it. Nor is it a shallow dismissal of the genre or of its audience – it's a tough balancing act, but this VN manages to deliver a rewarding story in its own right while also calmly holding up a mirror from time to time, but without becoming overtly preachy. (If there is an Aesop in here that goes deeper than “don't trust strange catgirls,” it has evaded me.)</p>
<p>Are there any negatives to this VN? Well, on a technical level, I'll say that the highly ambitious sound design was perhaps just slightly too ambitious for its own good. It makes very good use of rain, of heavy footsteps and other sound effects to build its atmosphere, but there were a few spots where the attention to detail took a momentary dip, such as when outside footsteps sound like they're happening in a closed room because of too much reverb. But as I often seem to say, if that's the heaviest criticism I can come up with, then that already speaks volumes about the work as a whole. Everything else is largely a matter of opinion: some people might find the story distasteful, others may have wished it to be longer. If you like your catgirls only when padded with cotton candy fluff, chances are you've already figured out that this isn't one of those cases. But if you're yearning for something disturbing that can be finished in an afternoon, then be sure to give it a shot.</p>
Quoting Online Sources: An Example Casehttps://fietkau.blog/2016/quoting_online_sources2016-11-25T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>While doing research for UrbanLife+ and my own dissertation, I came across the book “Patterns in Game Design” by Staffan Björk and Jussi Holopainen a while back, which I thought would help me avoid ontological headaches: it's basically a reference book that provides definitions for all sorts of established terms from the field of game design.</p>
<p>Unfortunately, it proved difficult to get my hands on the book. It is no longer in print and used copies are only available at high prices. I therefore wrote to the first author asking for advice.</p>
<!-- break -->
<p>He referred me to the page <a href="http://virt10.itu.chalmers.se/index.php/Main_Page">gameplaydesignpatterns.org</a>, a (closed) wiki, which – according to Prof. Björk – contains the full contents of the book and completely replaces it as a successor reference.</p>
<p>Back when I was in school, I learned that wikis are not citable. That was a number of years ago, and I have since learned a few more things about literature references in scientific works – among others, how to indicate references to online sources in a meaningful way and how to refer to a specific dated version of a (Media)Wiki article.</p>
<p>Nevertheless, the aura of unscientificness still precedes sources of this kind. While neither a wiki nor a book can be assumed to have been peer reviewed, the publisher is responsible, at least on paper, for a certain level of quality control that a website host does not provide. In addition, libraries and archives help to ensure the future availability of books, which is also not generally the case for websites.</p>
<p>Intuitively, one point in particular is now clear to me: In my work, I naturally reference the source that I have actually read. Other than that, there are a number of open questions. Especially for the dissertation, I hear again and again that the first impression from skimming the bibliography is crucial. Do I catch an unintended negative impression with a wiki reference (compared to a book)? Is it worthwhile to somehow get the book anyway and then reference it? In what sense is a book that is no longer available even a “better” source than an available website? Or is this such a special case that I don't need to worry about the one source?</p>
<p>I'm sure many of you have been through questions like this, and I'd be interested in your opinions (as well as anecdotes of your own, if you like).</p>
Game Review: Lucy -The Eternity She Wished For-https://fietkau.blog/2016/lucy2016-06-15T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>The steady advance of technological progress has brought us many unforeseen challenges. With robotics and AI slowly but surely encroaching on what we used to think of as uniquely human, we are confronted with the question of what makes us so special and on what basis we deem ourselves superior to the intelligent beings we create. Take this cerebral topic and intermingle it with some comedy, drama and romance, and what you get is one of the most promising indie VN releases of the year.</p>
<!-- break -->
<p><a href="https://store.steampowered.com/app/430960/Lucy_The_Eternity_She_Wished_For/"><em>Lucy -The Eternity She Wished For-</em></a> is a short visual novel developed and published by <em>Modern Visual Arts Laboratory</em>. Set in a mostly contemporary world where robots and AI are ubiquitous and have almost reached the point where they are difficult to distinguish from humans, it tells the story of how a prototype android upsets the fickle balance in a conservative family critical of such technology. A chance encounter has the teenaged main character take “Lucy” from the junkyard, pitting her exuberance against his cynicism and ensuring ample amounts of comedy hijinks as well as drama and tragedy. While his struggles to integrate Lucy into his daily life play out on one timeline, the story intersperses <a href="https://fietkau.blog/assets/lucy_1.jpg">snippets from the android research laboratory</a> about the man (referred to as “Doctor”) who pours all of his energy into assembling Lucy and protecting her from government interference, leaving the reader to hypothesize early on about how Lucy ended up at the junkyard.</p>
<p>In terms of visual novel mechanics, <em>Lucy</em> packs few surprises. The <a href="https://fietkau.blog/assets/lucy_2.jpg">above average amount of choices</a> packed into its three to five hour main story leads to many of them feeling a bit railroad-y, even though there are multiple endings to be conquered. The visual presentation is crisp and polished, the backgrounds and CGs are of a high quality. While there is nothing wrong with any one character sprite by itself, at times their visual styles are noticeably different, which can make scenes look incoherent (<a href="https://fietkau.blog/assets/lucy_3.jpg">some more than others</a>). The soundtrack is fitting but not particularly memorable. Korean and Japanese voiceovers are provided and I opted for the former since it was a welcome change of pace after having read mostly Japanese VNs in the recent past. The lack of multiplatform support (the VN is available for Windows only) is regrettable. Something that is definitely worth pointing out is the absurd amount of post-game content and alternate endings that bumped my own reading time from just three hours all the way up to five – I am a quick reader though, and looking at the reviews, playtimes of anywhere between 7 to 10 hours seem within the norm. The post-game content also provided the story with some much-needed rounding out, so you will most definitely want to keep reading after the credits roll for the first time.</p>
<p>Thematically the VN attempts to cover quite a lot of ground. At face value there is the “cute robot girl” story, which would have been easy to turn into clichéd “fated love” schlock, but thankfully the story stays very light on the romance elements and delivers its tender budding affection so subtly that you could almost miss it. Lucy's character itself is unfortunately less immune to clichés, seeing as she is rooted firmly in the “clumsy, ditzy, caring but naive” tradition of robot girls, and her characterization is at least consistent and believable even if it's not innovative. Most of the situational humor falls in line with what you would expect from this part of anime culture, with Lucy being oblivious of her surroundings and the main character (whom, by the way, you get a chance to name yourself) having to clean up behind her.</p>
<p>More interestingly, the story also makes a more than solid effort at tackling the philosophical questions <a href="https://fietkau.blog/assets/lucy_4.jpg">that arise</a> when robots become almost indistinguishable from humans. For example, a part of the story's tension is derived from the question of <a href="https://fietkau.blog/assets/lucy_5.jpg">what grants one's identity</a> if memories as well as body parts can be replicated and replaced as needed (the <em>Ship of Theseus</em> is even mentioned by name). As a narrative theme, the idea of artificially created humans has a long literary tradition. VN aficionados will of course tend to notice the many parallels to <em>planetarian ~the reverie of a little planet~</em>, both overt and more abstract, but in the broader cultural world the concept dates back at least to the story of Pygmalion and Galatea of Ancient Greece and the golem from Jewish folklore, and has had one of its major spotlight moments in the form of Shelley's <em>Frankenstein</em>, which Lucy's story also reflects in many ways (including a formidably executed “we were the real monsters all along” moment). Now, like then, the question is posed what it is that supposedly makes us humans more deserving of a self-determined life than the ones we create as our servants. The VN is not shy about exploring these difficult questions even at the expense of subverting its own characters from time to time (such as when the protagonist shows a knowledge of Schopenhauer that is most definitely uncharacteristic for a teenager who claims to have no interest in formal education).</p>
<p>Another topic that <em>Lucy</em> tackles is the question of <a href="https://fietkau.blog/assets/lucy_6.jpg">labor automation</a>. Androids capable of sophisticated reasoning are pushing humans out of the workforce because electricity is much cheaper than minimum wage. In the world of the VN, this seems to be just as much of an open question still as it is in ours. Admittedly this topic is not explored all that deeply, but it manifests itself very clearly in <a href="https://fietkau.blog/assets/lucy_7.jpg">the character of the protagonist's father</a>, who I suspect is hostile to the point of belligerence towards androids because he identifies so deeply with his work and considers his role as a productive employee the central aspect of his own sense of purpose. Scrolling through the reviews of this title, it seems to me that not very many readers understood this connection, painting him as a mere cartoon villain instead, which is disappointing.</p>
<p>For all its interesting thematic points, there are also aspects of <em>Lucy -The Eternity She Wished For-</em> that I had to grapple with, the biggest one being the general unlikability of the main character. A lot of this can be explained away by his age and familial situation, but with as many external sources of tension as the story possesses, I wish they had relied less on the protagonist's egotism and carelessness as a source of drama, since it tends to strain the immersion. In terms of minor nitpicks, I didn't care for how <a href="https://fietkau.blog/assets/lucy_8.jpg">the screen showing Asimov's <em>Three Laws of Robotics</em></a> was used as a scene transition, since clicking through it every time quickly became tedious.</p>
<p>Overall, <em>Lucy</em> is a very well-written story that profits especially from the aforementioned post-game content. Even though this review is, as always, as free of spoilers as I can manage, I absolutely cannot avoid highlighting the brilliance of the final reveal during the true ending that astonishingly weaves everything together and tempts the reader to start the story over again right away. It's just one moment out of many, but I appreciate the careful construction of the story leading up to it immensely.</p>
<p><em>Lucy -The Eternity She Wished For-</em> stands on the shoulders of giants and it knows it. Its themes have been explored in other works before and the VN has <a href="https://fietkau.blog/assets/lucy_9.jpg">references aplenty</a>. However, it is still a worthwhile story on its own that is sharp and polished and has everything a good visual novel would need. If you absolutely cannot stand ditzy anime girls, this may be too much to stomach, but if you're up for a cutesy tale about existentialism and sociotechnical progress, you can't go wrong here.</p>
Game Review: Cursed Sighthttps://fietkau.blog/2015/cursed_sight2015-12-21T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>The fundamental question behind the concept of fate is as old as storytelling itself. Do we truly forge our own path through the causality of the universe, or are we beholden to some kind of unknowable higher order? And if the universe is set on a specific course, <a href="https://www.youtube.com/watch?v=zVc4RKQSHa8">maybe someone can steer it</a>?</p>
<!-- break -->
<p><a href="https://store.steampowered.com/app/360550/Cursed_Sight/"><strong>Cursed Sight</strong></a> is a visual novel developed and written by <em>InvertMouse</em>, it was released in August 2015 following a successful Kickstarter campaign earlier the same year. It's 45000 words long with four different endings and took me a bit more than three hours for 100% completion.</p>
<p>The story is set in a fictional medieval far-east-inspired nation where a select few people are born with the gift (or curse, depending on how you look at it) of fate magic. One of the central characters, a young girl named Miyon, can influence the tides of fate in her nation's favor, but everyone who looks into her eyes is <a href="https://fietkau.blog/assets/cursed_sight_1.jpg">fated to die within the week</a>. Enter the protagonist of the story, Gai, a young boy <a href="https://fietkau.blog/assets/cursed_sight_2.jpg">sold into slavery by his parents</a>. He gets assigned to do various household chores in the temple where Miyon is held.</p>
<p>First things first: I really liked this VN and I have no regrets at all about reading it. It has high-quality artwork and a fitting soundtrack – neither is deeply unique or special compared to other VNs, but they go together well to form a very cohesive whole, and I have to appreciate <a href="https://fietkau.blog/assets/cursed_sight_3.jpg">an inspired color scheme and visual design</a> when I see one. It packs everything you'd expect from a modern VN, including auto and skip modes as well as copious amounts of save slots. As always, the multiplatform support is something that I personally greatly appreciate.</p>
<p>The story is an interesting beast, the premise sounds generic enough at first but the plot does itself a huge favor by avoiding romance-themed routes and most of the clichés that typically come with them, focusing on <a href="https://fietkau.blog/assets/cursed_sight_4.jpg">action and drama</a> instead. The plot is beautifully rich and engaging, the events of the story could easily fill out twice or thrice the word count, and if there is one otherwise common problem that <em>Cursed Sight</em> deftly avoids, it's boredom. The introduction is short and sweet, the conflict comes swiftly, and there was never any moment where I felt like I wanted to stop reading.</p>
<p>Regrettably, the riptide of dramatic events is also the biggest problem I had with <em>Cursed Sight</em>. It has been said that a story needs a rhythm, an ebb and flow, to not push its readers away. If there's one thing for me that would have turned my somewhat shaky recommendation into a firmer one, it would have been <em>a whole lot more ebb</em>. Even though the story only features one explicit time skip, it feels like too much character development happens off screen. To its credit, the novel still manages to make the <a href="https://fietkau.blog/assets/cursed_sight_5.jpg">gradual change</a> of Gai's and Miyon's interactions from <a href="https://fietkau.blog/assets/cursed_sight_6.jpg">mutual dislike</a> to <a href="https://fietkau.blog/assets/cursed_sight_7.jpg">close companionship</a> pretty believable, but if it had had more slice-of-life segments where the characters just simply talk to one another, learn about each other and clarify <a href="https://fietkau.blog/assets/cursed_sight_8.jpg">who they are</a> and where they stand on various issues, I think that would have worked wonders to sell me more forcefully on the relationships portrayed in the dramatic scenes. Additionally, a minority of the endings also seemed unduly rushed.</p>
<p>I'm not sure whether I can put my finger on all of <em>Cursed Sight</em>'s strengths, and it's hard to summarize what a new reader should expect from the story. Romance is hinted at, but not really explored. Political intrigue <a href="https://fietkau.blog/assets/cursed_sight_9.jpg">is also hinted at</a>, but not really explored either. The worldbuilding is <a href="https://fietkau.blog/assets/cursed_sight_10.jpg">colorful and imaginative</a>, but too coarse to really be able to make up your own stories in the setting. But perhaps the most glaring issue I had was with the weird colloquialisms and anachronisms sprinkled throughout the script (the worst offender: a quip about chainsaws) that are probably intended to be charming, but just come across as out of place.</p>
<p>I'm doing a pretty terrible job recommending a VN I liked, aren't I?</p>
<p>Let's loop back to something I liked about the story: I like being surprised (I have a bit of a soft spot for genre subversions), and a very positive surprise I got from <em>Cursed Sight</em> was the way it handles its main characters.</p>
<p>With many stories you get the impression that the setting shapes itself around the protagonist, hiding all sorts of plot conveniences <em>just</em> well enough to fool most casual readers, and in the end everyone gets what they deserve because that's how stories tend to work. Gai starts out in a position of complete and utter helplessness (and in hindsight the start of the VN does a great job at portraying the mindset of a ten year old boy who just had the belief strongly reinforced that, in the grand scheme of things, nothing he values is safe and nothing he does matters), and you'd expect a “hero's journey” style rise to glory as he overcomes his inner demons. But then that doesn't happen at all, Gai and Miyon simply keep being normal people with normal issues, tossed here and there by circumstance like plastic bags in the wind, and when you reach your first ending, chances are you won't find it satisfyingly fulfilling but rather just <a href="https://fietkau.blog/assets/cursed_sight_11.jpg">depressingly plausible</a>. It seems that for someone imbued with fate magic, Miyon has tragically little control over her own fate – a bittersweet irony and one of the literary masterstrokes that make me like <em>Cursed Sight</em> as much as I do.</p>
<p>I'd love to go into more detail here, but more than that I want to give you the chance to read <em>Cursed Sight</em> spoiler-free. There's certainly enough in there to be worth a read, and unless you dislike fantasy as a genre (or you think that every fantasy protagonist needs to follow the “hero's journey” and be virtuous and just at all times), you <em>probably</em> won't be disappointed.</p>
Game Review: Over the Hills and Far Awayhttps://fietkau.blog/2015/over_the_hills_and_far_away2015-09-18T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>When you're traveling through a war zone on foot during a storm, you tend to not be very picky when an opportunity to find shelter presents itself. This is how one wounded former soldier, having abandoned his comrades during one of North America's many formative wars in the early 1800s, winds up in a shed together with a young Native American girl waiting out the storm. The shared experience is sure to tear down some of the cultural barriers between them, but will others be too sturdy to be toppled just like that?</p>
<!-- break -->
<p><a href="https://store.steampowered.com/app/396860/Over_The_Hills_And_Far_Away/"><strong>Over The Hills And Far Away</strong></a> is a short kinetic novel (a visual novel without choice-based story branches), developed and self-published on Steam by <em>WarGirl Games</em> in collaboration with <em>Collateral Damage Studios</em> and <em>Seycara Music and Arts</em>. It uses western-influenced visuals as opposed to the more common anime style, and tells its story in about three hours.</p>
<p>The VN is built on the Ren'Py engine and has full SteamPlay support on Windows, Mac and Linux, which is something that I personally greatly appreciate. You can save and load at any time (somewhat curiously, the developer chose to provide <a href="https://fietkau.blog/assets/over_the_hills_and_far_away_1.jpg">no less than 250 save slots</a>). It runs in fullscreen or windowed mode, and while it does not quite achieve full 1080p graphics, it runs at a very comfortable widescreen resolution slightly above 720p. The characters are not voiced, and at the time of this review, the VN is only available in English.</p>
<p>The visual style, while having some anime influences, is pretty unique and distinct from most other VNs on Steam. It makes <a href="https://fietkau.blog/assets/over_the_hills_and_far_away_2.jpg">expert use of color and lighting</a> to set the tone, the backgrounds are as pretty as they are detailed and always fun to look at. The character sprites and CGs tend to be consistent between one another, and the characters have strong visual designs. While the coloring and most of the drawing technique is impeccable, I have to nitpick about the faces. The artist is good enough at drawing faces for it not to be too jarring, but they often end up looking kind of wooden or distorted and not really fitting the rest of the body. In one instance this actually made me laugh when a character was clearly supposed to be looking angry, but ended up looking more like he was struggling with constipation. That is the one unfortunate weak spot in the otherwise delightful painterly artwork.</p>
<p>Since I don't have the knowledge to assess whether the soundtrack has any particular relevance to the time period of the story, I can only say that it seemed well-produced and always fit the mood. It's one of those immersive soundtracks that you tend not to notice anymore after a while, which can be a good thing, even though it makes it hard to identify any stand-out tracks (beside the vocal track during the credits that I enjoyed very much). That said, I really have to highlight the sound effect direction in this VN, which feels like it has a unique little bit of audio for almost everything that happens. It's clear that a lot of attention to detail went into the sound design, and the result is impressive. In this particular regard it may actually the best VN I've read so far. The only sound problem that I noticed is that the background music does not loop very well and you frequently hear it fade out before starting over from the beginning. This is a common problem that always challenges my immersion unnecessarily and I wish more developers would take it into account. That said, if this is the worst audio problem that I can find, then that says more about what they did right than what they did wrong.</p>
<p>I always perk up a little when I see someone announcing a VN with an interesting original setting, and in this regard <em>Over The Hills And Far Away</em> certainly brings something valuable to the table. I don't know all that much about American history, so a lot of the context of the war and the motivations of the various factions were undoubtedly lost on me, but it's worth noting that I never felt like I was being admonished for that. The story carries all the context that it needs to function, and I would imagine that many aspects of this story would transfer with little issue to many other wars in human history, so this title is not only for the history buffs to appreciate. If you are hoping to learn more about Shawnee culture from this VN, you are likely to be disappointed, as what little information it gives about them stays on a very superficial level. This is not an educational story (in the scholarly sense) like, for example, <em>Never Alone (Kisima Ingitchuna)</em> tries to be.</p>
<p>As original as the setting is, the rest of the broader plot framework unfortunately cannot keep pace. The tragic story of the <a href="https://fietkau.blog/assets/over_the_hills_and_far_away_3.jpg">battle-hardened warrior</a> meeting the <a href="https://fietkau.blog/assets/over_the_hills_and_far_away_4.jpg">innocent little girl</a> is a safe genre staple, which regrettably also makes it feel a little stale. You know there will be a time period of the two warming up to each other, you know there will be lots of moments of joy, and you know it's going to tug at your heartstrings a bit. That's all just fine, and taken by itself every one of those moments works well, but you tend to see the heartstring-tugging coming from a mile away if you've read a few stories of this kind before, so depending on your own degree of genre-savvy cynicism, there's a tangible risk that this story might leave you feeling like you just went through the motions again.</p>
<p>All that is not to say that the writing isn't good, it's merely not particularly innovative. I'm under the impression that <em>Over The Hills And Far Away</em> is the first “big” serious project of its writer, and sticking closely to a proven story archetype was probably not a bad idea at all. The writing shows very few rookie mistakes (some misplaced humour, some overreliance on clichés) in an otherwise rock-solid and immersive experience, and I have high hopes for the raw talent of the writer, who I'm sure will spread his creative elbows out a little more for his next work.</p>
<p>I've often said that a great execution can do a lot to make up for some things that the framework may be lacking, and this is definitely true for <em>Over The Hills And Far Away</em>. I've already talked about the attention to detail in the sound design, but the same excellence extends to almost all other detail areas of the VN. When the protagonists are walking through a forest, you can see the thicket <a href="https://fietkau.blog/assets/over_the_hills_and_far_away_5.jpg">draw leafy shadows</a> on the character sprites that lightly sway in the wind, the animated fog effects are a joy to look at, and the occassional sprite animation when a character falls down or climbs a tree just gives the whole thing an aura of authenticity that you only get when the developers pay ample attention to the little things. <em>Over The Hills And Far Away</em> is practically polished to a mirror sheen.</p>
<p>Even if it breaks less new literary ground than the setting made me hope initially, I have no qualms giving <em>Over The Hills And Far Away</em> a positive recommendation. There's almost nothing to it that needs criticism, and at the end of the day it is an enjoyable story with a very competent presentation. For people who dislike anime-style art, this is an obvious recommendation. Everyone else will have to weigh it against other VNs that they have not read yet and ask themselves whether the setting and the attention to detail are strong enough selling points.</p>
Using DOSBox and emscripten to Put Old Games onto the Webhttps://fietkau.blog/2015/dosbox_emscripten_old_games2015-08-28T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Back in January of this year, the <a href="https://archive.org/">Internet Archive</a> published their <a href="https://archive.org/details/softwarelibrary_msdos_games">interactive DOS game library</a>, allowing anyone to play old games that used to run on MS-DOS machines right in their browser, without the need for any plug-in or external software. This was very inspiring to me and reminded me of the time when I took my first steps in the world of programming using Turbo Pascal and compiling for DOS. Naturally, I made games in it.</p>
<p>I made a mental note to check out the underlying technology, but in January I was knee-deep in the process of finishing <a href="https://fietkau.science/social_presence_scaling_fidelity">my master's thesis</a> (followed by a move and a new job), so the “DOS in my browser” thing went somewhere near the bottom of my priority list.</p>
<p>In early June I dedicated a weekend to finally figuring that stuff out, which culminated in me adding a playable version of <a href="https://fietkau.media/revelation_mentis">Revelation Mentis</a> to my website. The way I first learned programming was by taking existing source code (typically little games) and tinkering with it, first changing values, then single instructions, then larger blocks of code. RM is notable in my personal history for being the first game (as well as the first non-trivial program) that I created on my own and completely from scratch, so it seemed like a good candidate for something to put on my website for posterity.</p>
<!-- break -->
<p>As I found out, many talented developers have made this process comparatively smooth – smoother than I had expected, anyway. Still, it's not a “drag and drop” kind of solution, you still need some coding chops to put all the pieces together. I'd like to walk you through what I did, just in case you're interested in doing something similar or you're curious about how it works.</p>
<h2>Setting Up the Build Environment</h2>
<p>In a nutshell, emscripten compiles C/C++ code to JavaScript, while DOSBox is an application that can run most DOS applications, including my old Revelation Mentis binary. I won't pretend to be knowledgeable enough about emscripten to know how exactly the various abstractions are divided between the two, but the end result is a (from what I can tell) complete version of DOSBox including graphics, sound, file system access and more that runs without a hitch in modern browsers.</p>
<p>My development machine is running Ubuntu Linux 15.04, which packages emscripten 1.22 as of today. That turned out to not be enough for the version of DOSBox that I used, so I got <a href="https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">the portable SDK</a> and followed the instructions for installation of the most recent version of emscripten on Linux, which are straightforward. The compilation involved can take a while though, so it's best to have your beverage of choice ready at this point.</p>
<p>With a recent version of emscripten up and running, the next step is to grab <a href="https://github.com/dreamlayers/em-dosbox">em-dosbox</a>, a port of <a href="https://www.dosbox.com/">DOSBox</a> to emscripten maintained by Boris Gjenero, and follow those installation instructions as well. The first <code>make</code> command leaves you with a bare instance of DOSBox compiled to HTML and JavaScript. Due to the same-origin policy, you'll need to launch the generated webpage through a local webserver (for example <code>python -m SimpleHTTPServer 8000</code>) to get it running.</p>
<h2>Packaging the Game Data</h2>
<p>The next question is how to get the DOS application binary into our webpage. The em-dosbox documentation has instructions for that too, the tool includes a packager that can easily put your EXE file into a virtual filesystem that em-dosbox can later use. That should allow you to quickly get your DOS application up and running.</p>
<p>In the case of Revelation Mentis, I had some fine-tuning to do in order to get the exact experience that I wanted. Out of the box, some characters in the title screen ASCII art are rendered wrong. This is because my machine from back then used <a href="https://en.wikipedia.org/wiki/Code_page_850">code page 850</a> and I (blissfully ignorant of internationalization at the time) used the 0xF7 <a href="https://en.wikipedia.org/wiki/Cedilla">Cedilla</a> as part of my game's title screen. After a few minutes spent on the DOSBox wiki, I learned that I needed a <a href="https://www.dosbox.com/wiki/Dosbox.conf">dosbox.conf</a> with the line <code>keyboardlayout=gr</code> in the <code>[dos]</code> section to rectify this problem. Unnecessarily, this should also change the keyboard layout to German for all users, but as it turns out Revelation Mentis only uses keys that are identical on US and DE keyboards, so it's not an issue. Packaging my dosbox.conf along with the game binary was accomplished by following em-dosbox instructions again.</p>
<p>By default, the generated instance of DOSBox automatically launches the intended binary. Unfortunately, after exiting the game the user is left at a DOS prompt. By passing it the <code>-exit</code> parameter, DOSBox can be instructed to terminate itself after the designated DOS process has ended. There are two easy ways to accomplish this with em-dosbox, you can either modify the packager script to include the option (advisable if you're rather sure you want this behavior for everything you package) or you can modify the generated HTML file afterwards (recommended if you just want to test it out or you're not sure if it's what you want).</p>
<p>If you decide to adjust the packager script, look into <code>src/packager.py</code> for the line where a string containing <code>Module['arguments']</code> is being written – in the current repository snapshot I'm looking at it's line 124:</p>
<pre><code>f.write("Module['arguments'] = [ " + cmdline + " ];\n&lt;/script&gt;\n")
</code></pre>
<p>Please note that this is Python code outputting JavaScript code (and a closing HTML tag), so don't waste too many brain cells wrapping your head around the syntax here. You can add the exit parameter as follows:</p>
<pre><code>f.write("Module['arguments'] = [ '-exit', " + cmdline + " ];\n&lt;/script&gt;\n")
</code></pre>
<p>If you instead decide to change the generated HTML file, it's actually that very line that the packager script is writing that you need to adjust. Look for the JavaScript line starting with <code>Module['arguments']</code> that looks about like this:</p>
<pre><code>Module['arguments'] = [ './binary.exe' ];
</code></pre>
<p>And change it to this:</p>
<pre><code>Module['arguments'] = [ '-exit', './binary.exe' ];
</code></pre>
<p>But keep in mind that this line gets overwritten every time you run the packager.</p>
<p>After all this, I had a version of DOSBox inside a webpage that ran my game as intended. The only remaining task was to change the resulting webpage into something suiting my tastes.</p>
<h2>Polishing the Front End</h2>
<p>With all the compiling and packaging woes out of the way, you should now have one HTML file and some JS and data files. This is where your HTML and JavaScript knowledge comes in and you get to make whatever changes you want to the HTML code. There's nothing particularly challenging or unique about this part, so I'll just quickly go over what I did.</p>
<p>I hid a number of UI elements that I didn't want, like the DOSBox stdout text field and the graphics/mouse settings. I chose to hide them through CSS rather than outright removing them, since I wasn't sure how the DOSBox JavaScript actually interacts with them, and I didn't feel inclined to disentangle the DOSBox JS, the DOM elements and the glue code in order to remove them cleanly.</p>
<p>I applied a palatable dark gray background and a drop shadow – this is of course up to personal taste and you may want to go with your own design. I also added a CSS-based loading animation from Tobias Ahlin's <a href="https://github.com/tobiasahlin/SpinKit">SpinKit</a> to be displayed while the browser fetches the data files.</p>
<p>I wrote a JS snippet that adjusts the size and position of the DOSBox HTML canvas depending on the window size. It's a pretty neat little algorithm that actually causes the game to “snap” to clean multiples of its native resolution of 320x200 with some tolerance, preserving pixel-accurate rendering whenever possible.</p>
<p>Somewhat notably, I also added a little JavaScript hack to detect when my game would finish running. Since DOSBox was configured to terminate upon the process ending, all drawing operations to the HTML canvas element would simply cease. So what I did was to check the document title for the currently running process, which DOSBox updates while it's running. As soon as the name of my game binary no longer appears, I hide the canvas element and show a “Thank you for playing” message instead.</p>
<h2>Conclusion</h2>
<p>And that's pretty much it! As you can see, while the whole process is certainly not geared towards the average user, it's nothing that an adventurous hobbyist coder couldn't get done in an afternoon.</p>
<p>Now something that I haven't really talked about is the amount of abstraction in this technology stack. My first reaction to the Internet Archive DOS game library was probably something along the lines of “Wow, JavaScript has come a long way.” It's hard not to be impressed by what amounts to a PC emulator running in JS inside a browser. However, with abstraction comes overhead, and my little 20KB DOS binary now requires 35MB of data to be downloaded by the user (the bulk of it is DOSBox I assume). It's a DOS binary running inside DOSBox, which has been compiled to JS using emscripten, running in a browser on my – and your – machine.</p>
<p>Any real discussion of the ramifications of this technology for archivists and the question whether everything should be running in a browser would definitely exceed the scope of this article, but when I first tweeted about this renaissance of Revelation Mentis, someone linked me <a href="https://www.destroyallsoftware.com/talks/the-birth-and-death-of-javascript">this talk</a>, which I found fun to watch.</p>
<p>Please let me know if this is helpful to you! If it compels you to play around with emscripten and do something cool, I would like to see the results!</p>
programmingretroGame Review: Ame no Marginalhttps://fietkau.blog/2015/ame_no_marginal2015-07-08T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Rain. It's more than just a phenomenon that exists in our world. Going back to the very cradle of humankind, the rain has been our companion wherever we have gone. Sometimes it has been appreciated, other times tolerated, but never has it really been friend or foe, just always a companion. If you've ever wandered the streets during a downpour, fallen asleep to the pattering of the droplets, or smelled the sticky and humid air after a summer thunderstorm, you know that we humans <em>get</em> rain. We understand it on a level where not much else can compare. It's no wonder then, that a story about a world that has nothing but rain and an endless amount of time does not take long to bloom. What is life without death, what is yearning without salvation? Can rain wash away sin just like dirt?</p>
<!-- break -->
<p><a href="https://store.steampowered.com/app/348950/Ame_no_Marginal_Rain_Marginal/"><strong>Ame no Marginal -Rain Marginal-</strong></a> is a short visual novel by <em>stage-nana</em> (written by Tomo Kataoka) and published by <em>Sekai Project</em>. It's about an empty parallel world of perpetual rain where there is no hunger, no suffering and no death, just emptiness all around you and the feeling of water drizzling onto your skin no matter where you go.</p>
<p>Although there are no choice-based story branches like in many bigger visual novels, it is not a kinetic novel in the strict sense either. It follows two story branches in parallel, and you as the reader decide which one of two chapters to follow first until the threads intertwine again near the end. In typical stage-nana fashion, the <a href="https://fietkau.blog/assets/ame_no_marginal_1.jpg">visual presentation</a> is dominated by negative space, black areas fill large parts of the screen and create a sense of distance, as if you are looking at a world through a window instead of being there. The backgrounds are often forlorn, even in scenes that have people in them you don't always see any on screen. The soundtrack is heavily dominated by the piano, but most tracks have some background instruments as well. It is probably one that works best in sync with the VN rather than enjoyed on its own, but its quality and ambiance is good enough that you may find yourself eager to listen to it again later to remember the experience. Japanese voice acting is available and enabled by default.</p>
<p>The story starts with the main character, who <a href="https://fietkau.blog/assets/ame_no_marginal_2.jpg">grapples with his feelings of directionlessness</a> in an uncaring society before mysteriously being transported into the nameless world of infinite rain. He meets a young girl (who introduces herself as <em>Rin</em>) claiming to have been the sole inhabitant of this timeless world <a href="https://fietkau.blog/assets/ame_no_marginal_3.jpg">for uncounted years</a>. The two carefully start getting to know each other, but both realize that the other is keeping important thoughts for themselves. Some long-held secrets get washed ashore, others seem to fade away like chalk in the rain. The reader gets to experience how the two of them live their days of frozen time, while in another story thread the girl's past <a href="https://fietkau.blog/assets/ame_no_marginal_4.jpg">is revealed bit by bit</a>. Could the timeless world of rain be a punishment enacted by the gods? Or is it actually more of a blessing, a second chance? Or is it simply an uncaring piece of secluded space, not concerned at all with human morals or suffering, a secret part of the world that always has been and always will be? Or is it true that everything that exists must – at some point, ultimately, eventually – come to an end?</p>
<p>This is a story about humans. (I guess if I were to be pedantic, it is mostly a story about one human. But you'll see that as you go through it.) If you want to really read it, you will need a certain degree of empathy, a willingness to hear someone's thoughts and make them your own. It connects to things that exist in most of us, depending on how deep you are willing to dig. It's not flashy or glamorous, it won't have you on the edge of your seat. But if you've ever wondered about your place in the universe, about fate and higher orders, about <a href="https://fietkau.blog/assets/ame_no_marginal_5.jpg">whether you mean something to this world</a>, then <em>Ame no Marginal</em> has something for you. Not answers, of course, but an invitation for a walk. The rain may be slightly uncomfortable at first, but you quickly get used to it.</p>
<p>Depending on how fast you read, <em>Ame no Marginal</em> will most likely take you between two and five hours. I would recommend reading it in one go. If you already liked Kataoka's previous work <em>Narcissu</em>, I'd say there's a good chance that this somewhat more fantastical take on the search for meaning may speak to you as well. As a matter of fact, this game includes a full copy of <em>Narcissu</em> (plus an exclusive bonus scene) that's unlocked after your first full playthrough. Some aspects of the story would probably have benefitted from a bit more attention, but all in all it comes together as a harmonious whole that I would rank rather highly among the current VN catalogue on Steam.</p>
Game Review: eden*https://fietkau.blog/2015/eden2015-06-13T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>If you knew that the world was going to end soon, how would you want to spend your remaining time? What would change for you, how would your priorities shift? Assuming you'd find an opportunity to escape, would you choose a future of perpetual narrow walls and cramped spaces over a short time of ultimate freedom followed by certain doom?</p>
<p>For the people living in the world of <a href="https://store.steampowered.com/app/315810/eden/"><strong>eden*</strong></a>, these questions are no longer abstract.</p>
<!-- break -->
<p><em>MangaGamer</em> delivers the English release of this 2009 title by <em>minori</em> to Steam and its own oline store. <em>eden*</em> is a kinetic novel (a story without choices or gameplay) about the last few people on a <a href="https://fietkau.blog/assets/eden_1.jpg">dying planet</a>. Its most unique selling point compared to similar titles is its visual presentation: Instead of the waist-up character sprites positioned in front of static backgrounds that we are used to from most modern visual novels, it relies almost entirely on scene-by-scene <a href="https://fietkau.blog/assets/eden_2.jpg">custom images</a>, <a href="https://fietkau.blog/assets/eden_3.jpg">each one</a> carefully designed to take character positions and camera perspectives into account. This gives the experience a very cinematic feel, quite literally reminiscent of movies, compared to other titles of its kind. Most scenes also features blinking eyes and lip syncing with the Japanese voices, which makes it impressively lively.</p>
<p>Needless to say, the asset quality is <a href="https://fietkau.blog/assets/eden_4.jpg">excellent throughout</a>, starting with the backgrounds ranging from the <a href="https://fietkau.blog/assets/eden_5.jpg">painterly</a> to the <a href="https://fietkau.blog/assets/eden_6.jpg">borderline naturalistic</a>. The same attention to detail extends to the characters who, despite the multitude of poses and perspectives, always appear consistent, unique, and alive. From what I can tell as someone who does not speak Japanese, the voices really fit well, and coupled with the competent sound design and the soundtrack by Tenmon (if you happen to enjoy Makoto Shinkai's movies: yes, <em>that</em> Tenmon), which expands a small number of recurring motifs into a <a href="https://www.youtube.com/watch?v=_fkXilmYxq0">gripping soundscape</a>, this is an aural experience that you are unlikely to forget.</p>
<p>The story revolves around <a href="https://fietkau.blog/assets/eden_7.jpg">Warrant Officer Ryou Haruna</a> and his assignment to guard a remote research facility during the planet's final moments. A peculiar (but largely unspecified) astronomical phenomenon is going to wipe out all life on Earth, and humanity is putting the finishing touches on a centennial plan to migrate into space and search for a new home. One component of this plan are the felixes, genetically engineered superhumans whose intellect propels scientific progress far beyond its normal pace. However, there are dissenting voices claiming that humanity should face its ultimate fate head-on instead of trying to escape, so military protection is granted to essential actors within the plan – in particular to Sion, the supreme felix, mastermind behind the giant starships and humanity's savior.</p>
<p>The central themes of <em>eden*</em> include destiny and free will as well as the morality of living one's life for someone else. Ryou, as the self-described “military's attack dog,” and Sion, as the people's only hope to keep on living, are both so devoted to their duties that they have fallen out of touch with <a href="https://fietkau.blog/assets/eden_8.jpg">their own humanity</a>. Circumstances force them to confront their deeply buried sense of self and be thrust before the <a href="https://fietkau.blog/assets/eden_9.jpg">most pivotal decision of their lives</a>: to keep on living in the narrow golden cages of their own design, or to choose the ultimate act of defiance and experience the freedom and joy that they had always denied themselves, living life to the fullest until the curtain falls.</p>
<p>The writing tends to focus on character interaction and personal growth over story complexity – <em>eden*</em> is all about the human condition, not about hard sci-fi. In fact, even the scientific details of the end of the world are almost completely glossed over. If you are looking for an apocalyptic sci-fi story with cool technology, this isn't it. Rather, the focus on the characters is so strong that it could be described as downright melodramatic in parts, insofar as that can be a good thing. It features countless <a href="https://fietkau.blog/assets/eden_10.jpg">charming</a> and <a href="https://fietkau.blog/assets/eden_11.jpg">memorable</a> moments that easily smooth over the fact that some of the tension maybe could have been resolved in easier ways, or that there's a certain degree of plot convenience constructing the situations that are most interesting for the characters. It all ends up feeling very complete and satisfying.</p>
<p>All in all, I can recommend <em>eden*</em> without much in the way of caveats. If you dislike visual novels or anime-style art, odds are you have not read this far down. If you like visual novels but you're not sure if this one is worth your time, my answer is that it is. I also recommend avoiding playtime estimates. Reading speed varies from person to person anyway, but the later parts of this story work best if you can empathize with the sense of impending dread that the characters are feeling. For them, any day, any moment, could be the last one. It'll be more fun for you if you can get lost in that feeling as well, instead of calculating how many hours you might have left. Even if you have little to no experience with visual novels, this one is probably a better one to get started than most titles currently on Steam. With the above-mentioned reservations in mind, <em>eden*</em> easily gets a positive recommendation from me.</p>
<hr />
<p>In the interest of fairness, I usually don't directly reference or compare other titles in my reviews. However, these parallels are too useful to ignore, so I'm including them as an appendix:</p>
<p>The plot framework that leads to the particular juxtaposition of the two main characters in <em>eden*</em> calls back to older genre mainstays like <em><a href="https://fietkau.blog/2014/planetarian">planetarian</a></em> (in contrasting the innocent and sheltered girl with the cynical and battle-hardened hero, compelling one to grow beyond her cocoon and the other to remember what makes life worth living) and <em><a href="https://fietkau.blog/2015/narcissu">Narcissu</a></em> (in using the impending certain death as a critical literary device, evoking the ever-present dread that any day could be the last one). If you already liked those two VNs, <em>eden*</em> is a very safe bet for you. At the same time, before delving in, you should understand that it has a much more ambitious plot than the two above-mentioned influences: If <em>planetarian</em> and <em>Narcissu</em> are parables, <em>eden*</em> is a novella. Expect a bigger cast of characters with more complex motivations and personalities. I'm not saying that this is an unambiguously better thing, just that it's different.</p>
<p>About version differences: <em>eden*</em> as sold on Steam is rated 17+. This is the original, full release. The publisher later released the AO-rated “PLUS+MOSAIC” version, which includes some additional blood and light nudity as well as some “bonus” adult scenes. These were apparently created without the involvement of the original writers and are not part of the story even in PLUS+MOSAIC. Instead, they are unlocked in the Extras menu after the end of the story. The <a href="https://www.mangagamer.org/eden/#info">info section and FAQ</a> on the <em>eden*</em> website offer more detailed information. If you want to take my word for it: you are not missing much if you skip them.</p>
Game Review: Narcissu 1st & 2ndhttps://fietkau.blog/2015/narcissu2015-04-25T00:00:00ZJulian Fietkauhttps://fietkau.blog<blockquote>
<p>This is a story of disease and suffering; of medication and adverse effects; of thoracotomy scars and cellular poisons; of the living who cannot help but to die and of the dying who cannot help but to live; of a resting place other than “on 7F” or “at home.”</p>
</blockquote>
<p>Usually I would start a review with some sort of story hook, an attempt to use my own words to evoke the kind of atmosphere you can expect from the full experience, something to show you at a glance whether it could really speak to you or whether you would not connect with it at all. In the case of <a href="https://store.steampowered.com/app/264380/Narcissu_1st__2nd/"><strong>Narcissu 1st & 2nd</strong></a>, I feel that no matter how long I try, I will not be able to top the original summary by <em>Insani</em> (quoted above and throughout this review), the fan translation group that first brought <em>Narcissu</em> to English-speaking audiences. Instead I will just quote their writing where appropriate and just dive straight into the facts myself.</p>
<!-- break -->
<p><em>Narcissu</em> and its sequel <em>Narcissu Side 2nd</em> are rather famous kinetic novels (meaning they have no branching story or player choices) with a strong legacy in the VN community. They are known for their use of minimalist visuals, mostly showing <a href="https://fietkau.blog/assets/narcissu_1.jpg">backgrounds with no character sprites</a> or even <a href="https://fietkau.blog/assets/narcissu_2.jpg">just a gray void</a>, with only very few <a href="https://fietkau.blog/assets/narcissu_3.jpg">character CGs</a> inbetween. The soundtrack relies heavily on <a href="https://www.youtube.com/watch?v=Y_Yea7aZwjI">piano pieces</a>, but also makes use of <a href="https://www.youtube.com/watch?v=C2UrHRJPNKU">other instruments</a> in some places, and features two <a href="https://www.youtube.com/watch?v=DMuZLQeF6cA">title tracks</a> with Japanese vocals. The engine shows its age in some aspects and does not have a fullscreen mode for example, but apart from that it has everything you'd expect, including save states and a soundtrack menu. As a reader, you have the choice between two different English translations or the original Japanese script, and you can opt to listen to the Japanese voice acting if you so choose.</p>
<blockquote>
<p>Imagine what it would be like to have your entire life – your friends, your family, your interests, your loves, your hatreds, your future – all taken away from you in a single instant. Imagine a hard, lumpy bed, a noise-filled ward, the sharp sting of needles entering your flesh at all hours of the day, the indignity of being woken up just as you are about to fall asleep for incessant vital statistics measurements, the doctors whose names you don't know (but that's okay, because they don't remember your name, either; they just remember you as “the non-small cell lung carcinoma in room 6”), and your own name, your very own name, that you have just about forgotten.</p>
<p>Then you might have some clue as to what it is like to be dying in a hospital.</p>
</blockquote>
<p>It would be off the mark to describe <em>Narcissu</em> as an “emotional rollercoaster” since the concept would imply lots of ups and downs, but even though <em>Narcissu</em> ends on a bittersweet note of resolution, it is pretty much devoid of “up” moments. VN connoisseurs might note that this places it in the <em>utsuge</em> genre, everyone else seeking more stories like it now has a keyword to search by.</p>
<p>The story is about an unnamed young man who falls terminally ill. After all venues of hope are exhausted, he is moved to the hospice ward of the local hospital, where he meets a girl of about his age who conveys to him the unwritten rules of the inhabitants of the <a href="https://fietkau.blog/assets/narcissu_4.jpg">7th floor</a>, of those who are going to die. The two begin a series of awkward non-interactions that culminate in their decision to reject the dichotomy of dying either in the hospital or at home, which kicks off the main arc of the story.</p>
<p>The way that <em>Narcissu</em> hones in on its themes with every fiber of its being is both its strongest asset and biggest liability. Everything about it, from the background visuals to the character interactions, is teeming with the drabness that you would expect from a story about young people in palliative care, which is not at all a melodramatic “woe is me” caricature of exaggerated sadness and self-pity, but a cold collage of loss and hopelessness rooted in questions that no human should have to ask themselves, such as: What does it even mean to be alive if there can be nothing to look forward to? Both main characters' actions and non-actions need to be viewed through this lens to have any hope of being understood.</p>
<p>In that sense, <em>Narcissu</em> as a piece of literature is more demanding of your sense of empathy than many other games and visual novels: It could easily be misunderstood as a story trying to show “normal” people what it is like to be terminally ill by taking their hands and walking them through the experience, but in actuality it's closer to a slice-of-life story about people who are terminally ill, that asks you to make the necessary mental steps towards those people on your own if you wish to understand them. In short: This story isn't written for you, it's written for its main characters.</p>
<p>One example that I can give without veering too far into story spoilers is Setsumi's attitude towards the protagonist. She initially comes across as standoffish and rude, and there's the tacit expectation of a pivotal moment where she finally starts to open up so the “proper” story can start, but that moment never comes. Where a less patient or empathetic reader might leave the story unsatisfied, we can instead take the opportunity to examine Setsumi's behavior with her medical situation in mind, and ponder the way that human relationships develop. Most of us go through life every day making small passing connections to people, but only once in a while do we meet someone we like enough to allow ourselves to be vulnerable around them (which takes courage) in hopes of forging a lasting connection that we can depend on in the future. But what, then, if there quite literally <em>is</em> no future? Suddenly there is no point in opening up to anyone new. Why bother taking the risk of potentially getting hurt if we will not live to see the reward?</p>
<p>The novel doesn't spell these details out to you, it asks you to understand the characters on the basis of their actions. Questions like why having a goal is suddenly such a big deal to the protagonist are left up to interpretation. The combination of strong characterization (which if you've seen my previous VN reviews you already know I am crazy for) and partially unapproachable writing is not for everyone, especially not if you are looking for light entertainment, but there is a lot of substance to it for people willing to make the effort.</p>
<p>In summary, <em>Narcissu</em> is a great visual novel that can be genuinely rewarding to read, but is ill-suited for those of us with short attention spans.</p>
<blockquote>
<p>This is a story of so many things.</p>
<p>But most of all …</p>
<p>This is the story</p>
<p>of a girl whose heart was standing still</p>
<p>and a boy whose breath was being stolen away,</p>
<p>both of whom die.</p>
</blockquote>
Game Review: Hate Plushttps://fietkau.blog/2015/hate_plus2015-03-02T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Most of us take it for granted that our society is getting ever more liberal. Our parents were more tolerant, inclusive and equal than their parents, and we are yet more tolerant than they. There's no telling whose rights our children will one day fight for, or even their children. But if you look at various cultures throughout history, there are actually many instances of relatively egalitarian societies slowly morphing into socially stratified class systems, often drastically reducing the quality of life for a large segment of the population. Few people talk about the fact that this is something that can happen, and even fewer talk about <em>why</em>.</p>
<p>This is just one of the many uncomfortable questions that <a href="https://store.steampowered.com/app/239700/Hate_Plus/"><strong>Hate Plus</strong></a>, the sequel to <em>Analogue: A Hate Story</em>, raises.</p>
<!-- break -->
<p>Having been originally planned as DLC before morphing into a half-sequel, half-standalone-expansion, the story of <em>Hate Plus</em> is deeply interwoven with the one of <em>Analogue</em>. It would make very little sense to play this one before the first, and in fact, I would go as far as saying that you should play <em>Analogue</em> before you read this review if you wish to have the best spoiler-free experience. I will also draw more comparisons and make more overt references than I would for most other sequels, so if you are unfamiliar with <em>Analogue</em>, much of this review might be useless to you. <a href="https://fietkau.blog/2015/analogue">You can find my review for <em>Analogue</em> here.</a></p>
<p>The plot of <em>Hate Plus</em> picks up right where its predecessor ended, with you, the space investigator, <a href="https://fietkau.blog/assets/hate_plus_1.jpg">having recovered</a> the documents and one of the A.I.s from the <em>Mugunghwa</em>. You can either continue from an existing <em>Analogue</em> save file, or you can <a href="https://fietkau.blog/assets/hate_plus_2.jpg">start a new game</a> and decide right then which of the two A.I.s you brought with you. In either case, that A.I. will accompany you on your three-day journey back to Earth. Instead of sitting around and being bored for that time, she offers to investigate with you the contents of some mysterious files she'd found in her own code. As it turns out, these files detail the fate of *Mute's previous instance from before the computer crash and the <em>Mugunghwa</em>'s descent from a thriving postmodern society into a despotic and totalitarian implementation of Joseon-inspired principles. They cover several <a href="https://fietkau.blog/assets/hate_plus_3.jpg">individual lives</a> throughout the years as well as some of the changes in the <a href="https://fietkau.blog/assets/hate_plus_4.jpg">political machinery</a> and the intentions of the people pulling the strings into <a href="https://fietkau.blog/assets/hate_plus_5.jpg">different directions</a>, and of course, how their political actions lead to <a href="https://fietkau.blog/assets/hate_plus_6.jpg">societal consequences</a>. Your job is, once more, to find out the truth.</p>
<p>Compared to <em>Analogue</em>, this game makes a much stronger immediate visual impression. Instead of the black-on-white look from before, it goes with a rather striking (if still largely monochromatic) color scheme, mostly using lighter text on dark tinted backgrounds. The character sprites have seen an expansion of their palette of poses and facial expressions, making them even more expressive than before. Long documents are no longer paginated, instead there is free-form scrolling. Texts are imbued with hyperlinks pointing you to “<a href="https://fietkau.blog/assets/hate_plus_7.jpg">photos</a>” of the important characters, which is certainly a big help in keeping track of the abundance of political actors. You no longer have to activate the A.I. after reading a document, instead she always accompanies you throughout the texts and comments as you go. Even though <a href="https://fietkau.blog/assets/hate_plus_8.jpg">plot contrivances</a> still prevent you from any bidirectional free-form chat, this change produces a more noticeable aura of companionship and teamwork from which the emotional investment strongly benefits. The soundtrack is <a href="https://isaacschankler.bandcamp.com/track/ritual-2">unobtrusive</a> but <a href="https://isaacschankler.bandcamp.com/track/resolve-2">on point</a> and comes with a wacky, ironically self-aware <a href="https://isaacschankler.bandcamp.com/track/its-not-ero-feat-senah-kim">theme song</a>.</p>
<p>The player freedom regarding the order in which the story is explored is so much bigger that it is almost impossible to overstate. If you felt artificially constrained by <em>Analogue</em>, you might be happy to hear that (with one single exception) the game gives you no direction or guidance whatsoever. You just <a href="https://fietkau.blog/assets/hate_plus_9.jpg">pick some files</a> whose titles sound intriguing and hope that you can piece together the events and causalities after the fact. I would argue that the pendulum may have swung a little too far into the “player freedom” direction, as it is rather easy to ruin any dramatic arc and feel completely lost by choosing the wrong files early on or skipping some important ones for too long.</p>
<p>Your companion A.I. choice has a significant influence on the delivery of the story. Since the events documented in <em>Hate Plus</em> take place while the Pale Bride is still in cryogenic sleep, *Hyun-ae only has a very vague knowledge of the circumstances and a low personal investment, which manifests itself in a <a href="https://fietkau.blog/assets/hate_plus_10.jpg">more easily distracted</a> and <a href="https://fietkau.blog/assets/hate_plus_11.jpg">less attentive</a> demeanour that is occassionally detrimental to the investigation. I would recommend *Hyun-ae's route if you really liked her in <em>Analogue</em>, if you are looking for a more <a href="https://fietkau.blog/assets/hate_plus_12.jpg">playful and cute</a> experience, or if you have difficulties focussing on one thing for long periods of time. If <em>Analogue</em> is *Hyun-ae's story, <em>Hate Plus</em> is *Mute's. The former security A.I. has a noticeably better (but still fallible) grasp of society before <em>and</em> after the drastic political changes, and she is much more strongly invested because her previous instance is a <a href="https://fietkau.blog/assets/hate_plus_13.jpg">main character in the story</a>. Even if you were initially put off by *Mute's behavior in <em>Analogue</em>, I would recommend her route in <em>Hate Plus</em> if you really want to <a href="https://fietkau.blog/assets/hate_plus_14.jpg">dive in</a> and get the full experience.</p>
<p>One interesting mechanic that bears mentioning if only for its controversy is the <a href="https://fietkau.blog/assets/hate_plus_15.jpg">real-time break enforcement</a>. Since you are reading the files throughout your trip back to Earth, you are twice met with a mandatory break time of twelve real-world hours, to sleep and recharge the ship's batteries. I could see good arguments being made in favor of players being in charge of when and how much they play, and from what I've seen many people seem to be understandably critical of this design choice. However, I personally believe that I benefitted from the extra time I had to let the details sink in and mull everything over in my head. After all, that is how humans learn, and <em>Hate Plus</em> contains a lot of information that needs to be internalized. I also know myself well enough to say that I very likely would have binge-played it if this mechanic had not been in place, and as a result I would be remembering it with less clarity right now. I understand how it might feel a bit weird to not be solely in charge of your game pace, but I would encourage you to go along with it instead of trying to circumvent it (which happens to be not very difficult).</p>
<p>With much of the game being rooted in plot exploration, there is little of the story that I would want to give away here. It is more or less like <em>Analogue</em>, but even more intense, detailed, and shocking. The stronger focus on political intrigue (which the Pale Bride was mostly shielded from in <em>Analogue</em>), the engine improvements detailed above (even if the scrolling often feels rather jerky), and the overall more competent writing leave me in a position where I have to conclude that I liked <em>Hate Plus</em> even more than <em>Analogue</em>. Both titles have strong character writing and a compelling mixture of moods, but the sequel stands out thanks to the extra portion of effort that went into it. Don't play it before <em>Analogue</em>, but if you liked that one, I can't imagine you being disappointed by <em>Hate Plus</em>.</p>
Game Review: Analogue: A Hate Storyhttps://fietkau.blog/2015/analogue2015-01-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>What would you do if you were to wake up tomorrow, having been thrust into a completely foreign society? Being greeted by your “new family” who tell you what to say, what to think and even how to feel in order to not violate their social norms? Being told that your identity, the place you carved out for yourself in the world, is long forgotten, but that they already have a new role good and ready for you? That your dreams no longer matter?</p>
<p>This fate, among many others, is one of the gears in the complex machinery that would end up removing all traces of life from humanity's great hope, the huge pioneer starship <em>Mugunghwa</em>, in <a href="https://store.steampowered.com/app/209370/Analogue_A_Hate_Story/"><strong>Analogue: A Hate Story</strong></a>.</p>
<!-- break -->
<p>In this unconventional sci-fi/mystery visual novel, <a href="https://fietkau.blog/assets/analogue_1.jpg">you are a space investigator</a> hired to find out the truth about what happened to the <em>Mugunghwa</em> and how it got lost on its mission to settle foreign planets. Arriving at the wreckage and linking up to the ship's computer, you are greeted by the archival A.I., who offers to help you sort through the letters, reports, and diary entries of the people who lived on board before a mysterious catastrophe killed everyone. You quickly learn that very little is as it seems, and there are <a href="https://fietkau.blog/assets/analogue_2.jpg">so many personal motives</a> wrapped up in the situation that actual honesty is hard to come by.</p>
<p>The presentation in <em>Analogue</em> sets up a computer-y atmosphere with abstract backgrounds and actual in-story explanations for things like the multiple choice “dialogue wheels.” The effort put into the art is largely concentrated into the two highly detailed on-screen characters, who delight with a plethora of poses and facial expressions to convey their emotions. The soundtrack, especially the <a href="https://isaacschankler.bandcamp.com/track/hyun-ae-innocence">character</a> <a href="https://isaacschankler.bandcamp.com/track/mute-mischief">themes</a>, features recognizable melodies (sometimes in several variations) realized in a consistent style that works extremely well with the atmosphere constructed by the rest of the story.</p>
<p>For most visual novels, the user interface tends to be an afterthought, and only rarely is it a point of contention in a review. <em>Analogue</em>, however, eschews the medium's tradition of a branching linear narrative and forges its own path in regards to navigation inside the story. In essence, every piece of text that you can find is one of the “files” of the ship's archive that you can view in any order, and you can also <a href="https://fietkau.blog/assets/analogue_3.jpg">talk to the A.I.</a> or <a href="https://fietkau.blog/assets/analogue_4.jpg">drop back to the command-line interface</a> at any point. This provides the player (a term that I use deliberately, because for Analogue, being a mere “reader” really isn't enough) with a high amount of agency that few visual novels choose to provide. It also creates a proportionally high number of opportunities to fail, for example if the player is not quick on their feet when it comes to using the computer terminal as the situation requires.</p>
<p>This sets up an interesting contrast with the main character's agency in the plot. After all, many years have passed since the events you read about and there is no way to influence the outcome or to save anyone. The only thing you can do is to find out the truth. There is a present-day plot involving the main character and the two artificial intelligences that still reside on the ship's computer, but the focus is on the mercilessly unchangeable past.</p>
<p>The people on the <em>Mugunghwa</em> lived in a surprisingly traditionalist society with strong codified gender goles and rampant classism. The members of the noble families all struggled for power, but no one seemed to heed the big picture or pay any mind to the ship's course. It was a troublesome situation in which a little girl from hundreds of years ago was awakened from cryostasis. Her family hoped that the <em>Pale Bride</em> might bring them salvation, but what could she do to find her way in a society that was so radically different from the one she knew? You notice early on that she seems to be somewhat of a focal point for the events on board following her reawakening, but how does she factor into the eventual genocide? What caused the ship's undoing? And why do the two A.I.s despise each other so much?</p>
<p><em>Analogue</em> is, at its core, a mystery story. While it is still a visual novel and you can gloss over most of it without really internalizing it and still get to the end, it is a more rewarding experience to actually untangle the relationships of the characters and understand how their motivations propel them to do what they do. There aren't really any mechanics in place to support this endeavour, other than the family trees that the A.I.s helpfully provide you with. I found that my enjoyment of the story increased significantly as soon as I started taking my own notes with pen and paper. I would encourage you to do the same, because otherwise it is very easy to lose your perspective as you wade through the countless documents, each colored by its author's perceptions.</p>
<p>Bit by bit you wrestle the truth from the ship's archives, and slowly you piece together the puzzle until you are able to see the full picture in all its horror. All aspects of it, from the <a href="https://fietkau.blog/assets/analogue_5.jpg">psychological</a> through the <a href="https://fietkau.blog/assets/analogue_6.jpg">sociological</a> to the <a href="https://fietkau.blog/assets/analogue_7.jpg">interpersonal</a> themes of the story, paint a drab picture of loneliness and despair. It poses the uncomfortable question of whether the ship's population as a whole might have been beyond salvation for who knows how long, doomed many years before the finale of the story; whether the event that put an end to all biological life on board was merely the logical conclusion, much like you would turn out the lights when you leave an empty room. It's hauntingly honest in its depiction of the darkest depths of the human soul, and after completing the story for the first time, it left me with a strong feeling of unease about what any one of us might be capable of, given the right circumstances.</p>
<p>It does also have its lighthearted moments, and even though visual novel connoisseurs will find many tropes and clichés conspicuously absent, <em>Analogue</em> coquets with the expectations carried over from its genre siblings in certain moments, such as when one of the A.I.s <a href="https://fietkau.blog/assets/analogue_8.jpg">invites you to dress her up in various outfits</a>. It's no stranger to fun and there is plenty of clever humor to be found in the data logs and the A.I. banter.</p>
<p>The overall execution in this VN is so congruent and polished that any perceived shortcomings almost have to be rooted in personal taste. Some people might not care for the minimalist presentation, others might have preferred a more linear way of storytelling, yet others may have their reasons for not wanting to read a story where gender inequality is a prominent theme. But judged on its own merits, I can find nothing but praise for <em>Analogue: A Hate Story</em> within me. It's unique and interesting, and if you think that a mystery visual novel with deeper than average gameplay mechanics might intrigue you, I can recommend it without reservation.</p>
Game Review: Oblivious Garden ~Carmina Buranahttps://fietkau.blog/2014/oblivious_garden2014-12-29T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>You are a proud and successful military general, you have won many wars and conquered many kingdoms. But during the deciding battle you make a grave mistake, and you lose everything. Shamed and shunned, you return home to your emperor. How can you ever redeem yourself? As it turns out, the emperor already has a new task in mind.</p>
<p><a href="https://store.steampowered.com/app/323490/Oblivious_Garden_Carmina_Burana/"><strong>Oblivious Garden ~Carmina Burana</strong></a> is a romance-themed visual novel set in a post-medieval fantasy world. You are a humiliated ex-general and your new job is to teach the art of fencing to the seven princesses of the kingdom.</p>
<!-- break -->
<p>The first thing you'll likely notice when you're looking at <em>Oblivious Garden</em> for the first time is the <a href="https://fietkau.blog/assets/oblivious_garden_1.jpg">unique</a> and <a href="https://fietkau.blog/assets/oblivious_garden_2.jpg">stylish</a> <a href="https://fietkau.blog/assets/oblivious_garden_3.jpg">artwork</a>. The character portraits and CGs are gorgeous without exception and the gothic/baroque-inspired character designs mesh surprisingly well with the pastel-focused watercolor art style. The VN has a refined visual identity that sticks out of the crowd and will secure it a second look from many prospective readers. The backgrounds are unfortunately of lower quality on average and range from <a href="https://fietkau.blog/assets/oblivious_garden_4.jpg">nicely painted landscapes</a> to <a href="https://fietkau.blog/assets/oblivious_garden_5.jpg">crude photo manipulations of rooms</a>. The soundtrack is fitting and atmospheric, but a little repetitive. This would have been counteracted by either a bigger selection of tracks or at least less obvious loops (they're not jarring but very apparent after the first few times). There's Chinese voice acting available that complements the character designs pretty well and provides fitting voices to go along with the faces. It has <a href="https://www.youtube.com/watch?v=fPbsMGVZQ3Y">a spiffy opening animation</a> and the technical aspects (controls, save system etc.) leave little to be desired.</p>
<p>The story is set in the titular “oblivious garden,” where the emperor has sealed away the seven princesses. The many parallels drawn to the royal courts in 17th century Europe extend not only to the opulent garden itself, but also to the complex social rules and codes governing the interactions between Irell Reis, the ex-military main character, and the princesses residing in the area. Don't expect much in the way of historical accuracy though, I got the impression that the social aspects were influenced at least as much by the developers' Chinese background as by their impression of past European nobility, which is not a problem at all considering it's a fantasy world. While this sort of setting has been attempted before in fiction, it deserves recognition for originality in the realm of visual novels, even though admittedly I am generous with my praise for any setting that is not a Japanese high school.</p>
<p>In another contrast to the visual novel archetype, the main character is a young adult with a sizable amount of life experience as a military general. Thematically, in accordance with that choice, <em>Oblivious Garden</em> does not shy away from the heavy-hitters: Recurring topics are the justifiability of war and violence, the vicious circle of revenge, the guilt of enabling and orchestrating mass slaughter versus “just following orders,” and of course the dichotomy between fate and free will. The VN uses these issues quite expertly in the interactions between the central characters.</p>
<p>Rounding out the package is a charming little mini game about <a href="https://fietkau.blog/assets/oblivious_garden_6.jpg">brewing different kinds of tea</a> that maybe could have been slightly more forthcoming with its solutions (or maybe I'm just bad at it), but offers a fun break from the plot and an entertaining experience nudging you to perhaps make a nice cup of tea for yourself as well.</p>
<p>I would have loved to love <em>Oblivious Garden</em>. I saw almost all the building blocks needed for a fantastic visual novel, I really liked the art and the concept, the setting seemed unique and interesting. Yet, I can't love it. I can merely bring myself to say that it is pretty good all things considered. That is because <em>Oblivious Garden</em> commits my one cardinal sin, the one thing that a visual novel can do that I really cannot forgive: The writing is bad. Or rather, it has its good and even great moments (lots of them in fact) but it just can't sustain a consistent level of quality throughout the whole story. And for a visual novel, that is a huge problem.</p>
<p>To be clear, I am not talking about the low-quality English script that is rife with grammatical errors and vocabulary mixups. I know this can be a dealbreaker for many of you, so it deserves pointing out, but personally I can usually gloss over shoddy translations easily if I set my mind to it. In any case, it is something that can be fixed by putting the script into the hands of a better qualified translator or at least a native English speaking editor, which I have reason to hope might still happen. There were only one or two spots that I straight up didn't understand for which I would blame the lackluster translation. My main gripes run much deeper.</p>
<p>But if the writing isn't good, then why do I still give <em>Oblivious Garden</em> an overall “thumbs up” rating? There are reasons for that, I like to think they are good ones, and I will tell you all about them, but first I'd like to elaborate on the specific ways in which I consider the writing lacking and the ways in which it actually succeeds, so you can draw your own conclusions about whether or not your opinion would differ from mine and whether the things that bothered me might be non-issues to you.</p>
<p>There are many different granularities to storytelling, from the finest details all the way to the broad, overarching themes, and in this case they have to be examined separately. <em>Oblivious Garden</em> actually does very well in regards to the moment-to-moment writing, subtle word choices, and believable character interactions (which I will examine in more depth later). Above that, from a scene-to-scene point of view, the construction starts to wobble a little: You can see a general progression in the way that the central characters treat each other and it is pretty believable for the most part; the pacing, the ebb and flow of the story, has slower introspective or meditative scenes contrasting with fast-paced or dramatic ones in a successful manner that is highly enjoyable to read; but I started to see small issues at this level, like problems relating two consecutive scenes to each other when the first one should definitely had more of an influence on the next than it actually did. At the top level, looking at the chapter-to-chapter progression, I find the biggest problems. Of the four available routes, the first one succeeds in creating a believable conflict and having the central characters grow close to one another, but near the end the plot pace goes from 0 to 100 in an instant, leaving me rubbing my neck due to whiplash and wondering what in the world just happened. The second one, the worst of the bunch in my opinion, also starts out well, builds some tension, raises some questions, and then hits a certain point where everything suddenly stops making any sense at all and the main plot thread gets lost in a pile of spaghetti until there's a ham-fisted ending that somehow made me happy for being allowed to stop reading in spite of the many open questions. This leaves the third route as the only one that I would consider well-constructed the whole way through, it is the highlight of the VN even though if I were to judge it by itself I'd have a hard time calling it anything above “good,” at least as seen from a high-level perspective. Lastly, there's the fourth route that comes across as more of a stocking-stuffer due to its length, a short bonus for the people wishing for more interactions with that particular girl, and as a result it can be completed considerably faster than the other three. (And yes, because I'm a big ol' meanie I'm not going to tell you which is which.)</p>
<p>All that being said, I am willing to make a positive recommendation for <em>Oblivious Garden</em> thanks to a significantly better-handled aspect of its writing: the character interactions.</p>
<p>Visual novels with a focus on interpersonal relationships, and romance in particular, tend to derive their stories from the pitfalls of human interaction. Now if every character had a strong emotional and social awareness and would just talk frankly about their feelings like an adult, things would get resolved quickly and there would not be much of a story to read. Looping back to the VN archetype, many authors solve this problem by making their main characters extremely socially awkward and drawing conflict from the ensuing misunderstandings and the divide between what the main character thinks and what he is courageous enough to say out loud. Irell Reis on the other hand has plenty of social awareness and makes diligent use of it, but is thrust into a situation where he is unable to talk frankly due to the complex and strict social codes governing all interactions between him, the princesses, and the maids. In an environment where he could feasibly be executed for telling the wrong person at the wrong time that they look great today, the aspect that makes the character interactions so interesting is the second-, third- and fourthguessing of the possible intentions behind any smile, any little remark, any glance over the shoulder. And this is where <em>Oblivious Garden</em> really, truly shines. It manages to create believable characters that interact under immense social pressure in a way that I have never seen done in a visual novel before, and in my eyes that counts for a lot. If compelling character interactions are something you value highly, this one might be a real treat for you.</p>
<p>As a short side note, when I initially looked at the screenshots on the store page, all the low-cut dresses and maid outfits had me fear that <em>Oblivious Garden</em> would go the full fanservice route, but thankfully that is not the case at all. There's no nudity, no obvious “cleavage cam,” and apart from one slightly suggestive CG that is well-justified by the plot, there is no sexual content whatsoever.</p>
<p>In summary, <em>Oblivious Garden ~Carmina Burana</em> is definitely not the best visual novel on Steam, the badly constructed plot is further marred by the low-quality English script, but the character interactions are well-crafted enough to wring a positive recommendation out of me, and it's all wrapped in a complete package that is certainly pretty to look at. My “thumbs up” comes with the biggest figurative asterisk I have ever had to add, but if you've read all this and still think it might be for you, it probably is.</p>
Game Review: Shan Guihttps://fietkau.blog/2014/shan_gui2014-12-22T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Distancing yourself from your parents is an unavoidable part of growing up. Eventually, most of us come back around from the rebellious phase and learn to listen to what parts of our tradition and culture may be worthwhile additions to our own identities. But what if we're already too late?</p>
<p><a href="https://store.steampowered.com/app/307050/Shan_Gui/"><strong>Shan Gui</strong></a> is a short, Chinese-developed visual novel about finding one's familial and spiritual roots in a society that increasingly shuns both.</p>
<!-- break -->
<p>During its one hour of playtime, the reader follows lost and disillusioned Han Hui on her way to revisit a vacation spot from her youth. She meets and befriends little He Jia, who guides her through the mountains and shows her around the various nature sites.</p>
<p>Let's get the formulaic part of this review out of the way first: It's a kinetic novel without any player choices or branching paths, the story is pretty unique in its thematic focus but extremely slow when it comes to pacing, the background and character art meets a high quality standard and retains a distinct visual style that I would not mind seeing more of, the soundtrack, relying heavily on solo piano pieces but branching out here and there, is nice (if ultimately forgettable), and the very authentic voice acting adds a lot of charm even though it suffers from the use of lackluster recording equipment.</p>
<p>Alright, now let's get to what makes <em>Shan Gui</em> actually <em>interesting</em>.</p>
<p>The textbook approach to structuring a story is to establish a setting and a premise, create some tension or conflict, then construct a dramatic arc that resolves the conflict and guides the reader to a satisfying conclusion. This curious little thing, however, does very little of the sort. Even though it uses the elements and mechanics of storytelling, its mood and deliverance probably have more in common with those of a poem or even a painting.</p>
<p>I can only imagine that the theme of modernization and technocratization of everyday life clashing with filial piety, tradition and spirituality might resonate with young Chinese people even more than it does with me, but at the very least it has the potential to speak to anyone (or at least anyone in a position to be able to play computer games), no matter their cultural roots.</p>
<p><em>Shan Gui</em> handles its themes with care. It doesn't hide behind opaque metaphors, nor does it beat you over the head with simplistic morals. It simply puts you in Han Hui's shoes on her way to learn more about her past. It's up to personal opinion whether her quest is a worthwhile one, and it's up to interpretation whether she succeeds, and if there ever was a concrete goal to begin with. I was easily able to empathize with her struggle to explore her identity and I am glad to have witnessed this very personal journey.</p>
<p>The one negative aspect that really stood out to me was the sexualization of the main characters in some of the artwork, which is not only unnecessary but also completely at odds with the story itself. Maybe the developers assumed (correctly?) that those screenshots would increase sales, which is a bit of a depressing reality. In any case, I had to roll my eyes and grit my teeth through it.</p>
<p>In addition to that, <em>Shan Gui</em> unfortunately also ticks some other boxes on the “Bad VN” checklist. Still though, while putting my opinion into words I find myself thinking “Sure, there are embarrassing typos in the script that really should not exist in the age of spell checkers, <em>but…</em>” and “Yeah, the sightseeing web links in the middle of the in-game dialogue are pretty immersion-ruining, <em>but…</em>” and I just have this positive gut feeling about it as a whole. It seems like whatever it tried to do, it succeeded with me.</p>
<p>Many Steam users have yet to make their first contact with a visual novel, and I have to say that I can not generally recommend <em>Shan Gui</em> as a starter VN, simply because, for all intents and purposes, nothing much happens. So unless you specifically enjoy slow and meditative mood pieces, there's a decent chance you'll just find it boring.</p>
<p>Generally though, with the above caveats in mind, I'm going to take a bit of a leap and recommend that if you think it could be for you, you should sit down (preferably with a cup of good tea) and give <em>Shan Gui</em> a chance. If you're lucky, maybe you'll even learn something about yourself in the process.</p>
Game Review: planetarian ~the reverie of a little planet~https://fietkau.blog/2014/planetarian2014-11-15T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Deep inside the old sarcophagus city, while searching for food, weapons, or resellable scraps, you make an unlikely discovery: What you'd assumed to be an abandoned military facility is actually a pre-war planetarium. And as it turns out, <a href="https://www.youtube.com/watch?v=Vdt8FLw1rg8">the custodian robot is still welcoming customers after all these years</a>.</p>
<p>Let's talk about <a href="https://store.steampowered.com/app/316720/planetarian_the_reverie_of_a_little_planet/"><strong>planetarian ~the reverie of a little planet~</strong></a>.</p>
<p>It's a <em>kinetic novel</em> (a visual novel without any choices or other interactive game elements), so the only thing that the player/reader controls is the pace of the story. Do what you will with that information.</p>
<p>Originally developed by <em>Key</em> in 2004 and recently published on Steam by <em>Sekai Project</em>, this is widely considered a classic in the VN community, and a very worthwhile addition to the still meager selection of good visual novels on Steam. It's a short story about a world full of desolation, hopelessness, cynicism and resignation, and about a little robot girl who's immune to all of it. It's also about going stargazing in a world without stars.</p>
<!-- break -->
<p>The backgrounds and character sprites in <em>planetarian</em> are somewhat sparse in direct comparison to some of the more visually bombastic VNs out there. It is however very evocative, and with that it falls in line with the writing. The whole novel follows a slow pace – never dragged out, but certainly deliberate. It leaves plenty of time for you and your own thoughts, and I urge you to take advantage of this invitation. I ended up with just over three hours of total playtime, which included some breathing room for the fantastic voice acting.</p>
<p>Any good visual novel swings in tune with its soundtrack, and <em>planetarian</em> is no exception. Opening with the music box lullaby “<a href="https://www.youtube.com/watch?v=lVUbJCDB3f8">The World of the Stars</a>” it immediately offers you a glimpse of its gentle mood. Tracks like “<a href="https://www.youtube.com/watch?v=Me-KOTmadAE">Song of Starflight</a>” accentuate the day-to-day interactions of the main characters with a lax and childish air, while the perhaps most iconic song of the roster, “<a href="https://www.youtube.com/watch?v=-_0V_VxFAus">Gentle Jena</a>,” cushions some of the more tender scenes in an aura of warmth and belonging (and I would encourage you to keep that last one playing in the background while you read the rest of this review).</p>
<p>Visual novels as a medium don't lend themselves especially well to twitchy action stories, and despite the occasional surprise in that regard, the bulk of <em>planetarian</em> is about its characters and their interactions. Of the two main characters, only one actually appears on screen, and it would be a fair assessment to say that the story is about her, in several ways.</p>
<p>Yumemi (translated as “Reverie” in some localizations) is not the kind of quasi-human A.I. that we're used to from the likes of Cortana or EDI. She is a robot programmed for a very straightforward purpose. She oscillates between toddler-like naiveté at best, and robotic-algorithmic behavior at worst. So why do you entertain her thoughts of repairing the old projector? Why do you, a looter perpetually on the verge of starvation, end up tacking another night onto your stay at the old planetarium?</p>
<p>This story isn't about what Yumemi <em>is</em>, but about what she <em>represents</em>.</p>
<p>Spending valuable time and energy on a planetarium of all things should feel frivolous, yes, downright sacrilegious. But there is something peculiar inside you, easy to explain away as idle curiosity about the starry night sky that you only know from old people's stories. Something you probably didn't think you still had. They say there was a time before the war, before the planet was shrouded by a thick layer of acid clouds, when people were able to look at the stars whenever they wanted. When there was still a notion of mankind eventually travelling to, and settling on, foreign worlds.</p>
<p>Back when people still had hope for the future.</p>
<p>Yumemi was left behind at the beginning of the war, and despite not having had any sort of human contact in years, she diligently awaits the day's customers. There's only one thing she wants out of this existence, one thing she wants to do more than anything else in the world: to show you the stars.</p>
<p>The little robot girl, once built for the simple goal of caring for the planetarium's customers, ends up fulfilling a much grander purpose. Tucked away in her own little corner of a gray world inhabited by people who have forgotten what it means to be human, Yumemi is a shining beacon, a time capsule, a reminder that there is a star-filled sky right behind the acid clouds. Yumemi is the child, the lamb. She embodies innocence, childlike wonder, relentless optimism. Looking into her eyes, you cannot help but feel deeply ashamed for what the world has become.</p>
<p>What was it, then, that made you stay at the planetarium? Was it really just idle curiosity? Or is there more to this little thought in the back of your head after all? Do you feel in your stomach what the place emanates? Does Yumemi give you the strength to dare to form the words, that maybe, just maybe… there is some hope left in this world? That there is such a thing as “the future?”</p>
<p>You should read <em>planetarian</em> if you have any interest in visual novels, if you haven't experienced a good story in a while, if you like looking up at the stars and wondering what the future holds, or if that little spark deep inside you that is almost drowned by cynicism needs a little bit of nourishment. Wholeheartedly recommended.</p>
Game Review: The Stanley Parablehttps://fietkau.blog/2013/stanley_parable2013-10-30T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Right now, there is nothing about <a href="https://store.steampowered.com/app/221910/The_Stanley_Parable/">The Stanley Parable</a> that I don't hate.</p>
<p>There are games built around a cohesive story with relatable characters, a satisfying dramatic arc and a worthwhile conclusion. This is not one of those games. The Stanley Parable is confusing and all-over-the-place, the main characters are inconsistent, sometimes depressingly shallow, other times infuriatingly opaque. The story spits on the ideals of internal logic.</p>
<p>If a video game makes you want to stop playing video games, what does that say about it?</p>
<p>The Stanley Parable dragged me into its tangled mass of content without much of a warning. During most of my time playing it, I had at best a vague idea of what was going on. And although it tried everything in its power to defeat me (at one point it was literally begging me to stop playing), I pressed on.</p>
<!-- break -->
<p>The game is ruthless in its mission of deconstructing the concepts of video game narration. It draws back the curtain and exposes the man who pulls the strings. Or pushes the buttons, as it were. Am I able to simply go back to normal games with normal stories, pretend I didn't gaze into the abyss? I can only hope.</p>
<p>I think I've come reasonably close to hearing everything that The Stanley Parable has to tell. Its attention to detail is impressive, the love and skill that went into it easily apparent. At times I felt like Sherlock Holmes, with my personal Moriarty always one tantalizing step ahead. Other times I felt a sense of true companionship when my friend and I forged ahead towards destiny. Yet other times I was confronted with a sadistic psychopath, a gentle father figure, or a petty, passive-agressive bystander.</p>
<p>The Stanley Parable raises more questions than it answers. Fortunately they are the right kind of questions, the ones that keep you questioning yourself and the world around you rather than frustrate and paralyze you. I'm still relishing the afterglow, so my opinion may still shift as I make more progress processing my experiences. But there is one thing I can say for sure:</p>
<p>Right now, there is nothing about <a href="https://store.steampowered.com/app/221910/The_Stanley_Parable/">The Stanley Parable</a> that I don't love.</p>
Game Review: Dear Estherhttps://fietkau.blog/2013/dear_esther2013-05-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p><a href="https://store.steampowered.com/app/203810/Dear_Esther/">Dear Esther</a>'s island is a mysterious place. Its beautifully crafted environments paired with the wonderfully eloquent and powerful narration create a sense of poetry that you can walk around in. It was unique and daring when it was first released, and it's arguably still not for everyone. It does, however, succeed in challenging the player via lyrical understanding rather than game mechanics. As a showcase for games as an expressive medium, Dear Esther has secured its place in the history books. As saturday morning entertainment, perhaps less so.</p>
Game Review: Bastionhttps://fietkau.blog/2013/bastion2013-05-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p><a href="https://store.steampowered.com/app/107100/Bastion/">Bastion</a> is a delight. It features innovative and atmospheric narration throughout a captivating story, beautiful painted graphics and a gorgeous soundtrack as well as fast-paced and polished gameplay. Notably it is a bit of a slow bloomer in several ways – if after the first hour you're not sure if it's worth your time, consider giving it another. The few minor weaknesses I found were easily offset by the fantastic overall quality and polish.</p>
Game Review: Anodynehttps://fietkau.blog/2013/anodyne2013-05-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Mechanically, <a href="https://store.steampowered.com/app/234900/Anodyne/">Anodyne</a> is heavily inspired by the older Zelda titles, though the atmosphere is very different and unique, possibly evoking Earthbound more than anything else. It feels like a dream that you want to get lost in, even though on some level you know there's something not quite right. The pixel graphics convey a lot of atmosphere, but more hidden mastery lies with the soundtrack: the eerieness of Anodyne's world echoes in your head like a random feverish thought that you just can't shake. If you grew up on the SNES/GB era Zelda titles, this is a must-play. If not, it's still really good.</p>
uxHH: Sebastian Deterding on Gamificationhttps://fietkau.blog/2012/uxhh_gamification2012-12-03T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Today the <a href="https://uxhh.de/">User Experience Roundtable Hamburg</a> (in cooperation with the <a href="https://www.uxhh.de/ixda/">local IxDA</a>) hosted a talk by <a href="https://codingconduct.cc/">Sebastian Deterding</a> titled “9.5 Theses on Gamification” (Sebastian has information on <a href="https://codingconduct.cc/9-5-Theses-on-Gamification">earlier iterations of the same talk</a> available online). For me it's been the first uxHH Roundtable for a good couple of months, but this topic with this speaker I couldn't pass up.</p>
<p>So I just got back from there and I'm pretty tired, but I have some unfinished thoughts rummaging around my head that I'd risk losing by going to sleep. They might not be excessively polished (or even necessarily cohesive), but I'm going to <a href="https://en.wikipedia.org/wiki/Red_pill_and_blue_pill">take the red pill</a> and embrace the now-famous <a href="https://www.amazon.com/dp/0876900155">Edmund Snow Carpenter</a> quote: <em>“[C]lear speaking is generally obsolete thinking. Clear statement is like an art object: it is the afterlife of the process which called it into being. The process itself is the significant step and, especially at the beginning, is often incomplete and uncertain.”</em> So please bear with me, this blog entry is not an attempt at a scientific paper.</p>
<!-- break -->
<p>First of all, I have to say Sebastian's overview of the history of gamification was <em>excellent</em>. In my presentations I've always been pretty vague and limited myself to providing a rough timescale. Sebastian apparently did some serious detective work and laid bare all the gory details. That part alone would've been worth the travel through the snow. Major props! It bears mentioning that, while important on a meta level (talking <em>about</em> gamification), that information is essentially trivia and, by itself, doesn't have that much intrinsic value (for <em>pursuing</em> gamification, whatever that may mean).</p>
<p>The implied question that comes with every gamification talk ever, is <em>how to actually do that thing</em>. I felt like Sebastian did a good job at steering people away from the checklist approach <a href="https://www.theatlantic.com/technology/archive/2011/08/gamification-is-bullshit/243338/">decried by Ian Bogost</a>. He outlined some fairly established properties of games and how/why people play, and why it is very difficult to bring those in line with whatever snake oil / gamification salespeople tell you about the bottom line. (Side note: Last week, in an interview about gamification, I've wondered aloud whether the word itself is even salvageable for the long term, or whether it will inevitably go down in history as a marketing fad.)</p>
<p>So what do we tell someone who wants to “get started,” after all the stuff about the value of the player experience has been established? The easy approach, the one I've used so far, is to more or less point people to game design resources. “You want to make good games,” I say, “so here's what experienced designers say about how to make good games.” This also has the neat side effect of alienating checklist aficionados who don't actually want to learn anything new. I'm not even disappointed in them, their failing projects will be disappointing enough. I could link you to that Gartner press release now, but I don't really want to outwardly promote their current position just because it happens to align with my own narrative.</p>
<p>Something else that has jumped out at me is how many talking points (not necessarily from Sebastian's talk, but in general from the discussion surrounding gamification) would be fairly obvious if people, you know, <em>actually played some games</em>. I've seen and heard people talk about gamification who seemed like they hadn't touched a game since Tetris. I mean, how believably can someone talk about <em>player engagement</em> and <em>emotional impact</em> if they've never even <a href="https://fietkau.blog/assets/videogames.jpg">saved a princess</a>? (By the way I'm not saying classic games couldn't be emotionally intensive – <a href="https://www.youtube.com/watch?v=JQJA5YjvHDU">fact is, they can be</a>.) Sebastian, in contrast to those unnamed people, seemed to be at the very least in touch with gaming culture: we chatted for a bit about <a href="https://desertbus.org/">Desert Bus for Hope</a> and I did recognize his Sword & Sworcery wallpaper. Small cues like these stabilize the assumption that he does indeed “know games” from more than a purely academic perspective.</p>
<p>I should probably wrap this up this right about here, so in summary I listened to a fantastic talk on gamification that ended up teaching me a good amount of new facts, evoked some new questions, challenged some beliefs and strengthened others. All in all, a valuable experience!</p>
<p><em>On a related note, I've been drafting a blog entry about an example for games achieving emotional impact through their mechanics, by toying with player expectations / mental models and seemingly “changing the rules.” It's currenty sitting at slightly under 2000 words and should be finished either this week or next.</em></p>
academiagamificationBachelor Thesis Log #01https://fietkau.blog/2012/bachelor_thesis_log_12012-11-12T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>As my studies continue towards their inevitable conclusion, I am once again faced with the situation of having to write a bachelor thesis some time soon-ish. I'm fortunate enough to have already written one of those, so it's not as much of a big unknown for me as it is for others (which doesn't mean that it's routine in any way either). I'm currently (and have been for a good couple of weeks, actually) in the process of brainstorming possible topics. By now I figure I'm not going to make any steps forward by twisting and turning stuff in my head over and over, so here I am late thursday night trying to put some of it into writing. I also thought I might as well involve y'all, since that seemed to work pretty well the first time around.</p>
<p>This time, though, I'll tentatively be writing in English, because in this line of academia you have to make the transition to English at some point, thus why wait?</p>
<!-- break -->
<p>For those of you not quite in the loop, here's the basic situation: I'm currently at the tail end of a dual curriculum involving the Bachelor of Science in Human-Computer-Interaction and the Master of Science in Computer Science (<span lang="de">“Informatik”</span>), so I actually have to write two final theses. They could be somehow connected or they might be completely distinct, that's up for me to decide. I'll be focusing on the bachelor thesis first and foremost.</p>
<p>At my department at the University of Hamburg, a bachelor thesis should be adequately completed in three months of full-time work (which might be changing to five months, or so I've heard). The clock typically does not start ticking until the topic of the thesis has been clarified, often in the form of a written exposé. The first challenge, thus, is to find a suitable topic.</p>
<h2>Personal Interest</h2>
<p>Obviously, my personal interests are the biggest and most important factor and dictate my specialization in the field. Viewed through the lense of project planning, this is a question of motivation first and foremost. A bachelor thesis is something that you have to persistently work on, literally for months, and from my experience it rarely leaves your mental focus. I know that if I had to write a bachelor thesis on a topic that isn't interesting to me, that I don't feel passionate about, it would just destroy me. That could just be me, I'm sure some people manage to do it. But I don't have that kind of stubborn persistence to give 110% for a single creative work over several months if I can not feel passionate about it. It's vitally important to me that I can write my bachelor thesis on a topic that I actually find interesting.</p>
<p>Flashback: My last thesis in 2010 was about “teachlets,” a method for facilitating software design education, to which I was exposed in a seminar and which left a lasting imprint. I was so fascinated by the concept that I asked its originator, Axel Schmolitzky, to supervise my bachelor thesis on that same topic. He was a bit apprehensive, because he didn't know whether the task we devised for me would lead to a well-rounded bachelor thesis, and he actually offered me a number of “easy ways out”: more precise and controlled lower-risk topics with a higher base chance of success. I chose to take the risk, and my final grades indeed ended up reflecting the truth that my findings did not lead to an outstanding bachelor thesis (it certainly wasn't bad, but also not as good as other things I've done). It did, however, make a lasting contribution to the teachlet community and Axel did not hesitate to attest its scientific value. I'm proud to say that I regret nothing.</p>
<p>Since some time in 2008 or 2009, I've had a heightened interest in Human-Computer-Interaction, usability and related areas. My first bachelor thesis had very little to do with those things, so I promised myself that the next one would definitely be grounded there. Since then, I have specialized my courses appropriately and I have been active in our HCI group, mostly as a student assistant helping with the teaching. I've had time to better familiarize myself with the field and I've begun to stake out areas that I find very interesting versus areas that tend to bore me.</p>
<p>The concepts of <strong>usability and user experience</strong> are, upon close inspection, still so new and ill-defined that they help very little in narrowing down the whole field of HCI. At their core, these words refer to a common-sense understanding that there have to be some reasons why certain systems are more efficient, easier and more pleasurable to use by a human than others. Research questions in this area range from the deepest depths of psychology (what kinds of tasks are our minds able to handle well, how does work satisfaction arise?) to mechanistic, data-driven evaluations that are not so very different from determining the computational complexity of any algorithm without human components. The fascination that arises from the interaction of these contrasting viewpoints is actually one of the influences that originally lured me in. I would love it if my upcoming bachelor thesis could make a contribution to existing knowledge on how to make computing more accessible and less intimidating for more people around the world.</p>
<p>In contrast, the topic of <strong>games and play</strong> is one that kind of snuck up on me. The UX community at large has had a bit of a focal shift in recent years, away from the traditional central question of “How can we make all this less of a hassle and annoyance?” to “How can we make this more of a pleasurable and rewarding experience?” Perspectives like Don Norman's <em>Emotional Design</em> caused a rising number of usability professionals to ponder concepts like <em>fun</em>. From that angle, games seemed like a logical thing to investigate, and before I really knew what was happening, I was reading books about game design. I maintain that I'm not interested in becoming a professional game designer or ludulogist, but I fancy myself moderately well-versed in the principles, particularly regarding engagement, motivation, and fun. I don't expect to design/develop a game, but if this knowledge happens to somehow fit into my bachelor thesis, all the better!</p>
<h2>Lasting Relevance</h2>
<p>Usually, a bachelor thesis does not contain groundbreaking research. There are exceptions of course. Even if it does not warrant publishing the results in a scientific journal, the thesis may still offer <em>some</em> scientific relevance, or it may not. If a bachelor thesis is written in close contact with a company, for example, it is often highly specialized work that is not interesting for anyone outside that company – although, again, there are exceptions to this.</p>
<p>In any case, I would like my bachelor thesis to have as much relevance to the scientific community as possible. I've never published a paper before, but I would very much like that to happen before the end of my studies. It's not a requirement (especially since these things can not be 100% predicted), but as far as I can influence it, I plan on doing so.</p>
<p>Aside from the scientific relevance, I would also love to create something that other people can build upon and make use of. Something useful, in short.</p>
<h2>What Now?</h2>
<p>In any case, the work has to fit within the allotted timeframe. Other than that, I need a supervisor, a role for which, given my preferred topics, only one person at the department really qualifies: the current <a href="https://www.inf.uni-hamburg.de/en/inst/ab/hci/people/mck.html">professor for HCI</a>. In fact, I'll be talking about my ideas with him tomorrow.</p>
<p>I anticipate that I'll return to a weekly schedule with these reports at some point, though possibly not right from the beginning. For now, I'll write one of these whenever there are enough news to warrant it. I hope that you'll be with me again and I'll see you around!</p>
academiaPlayful Designhttps://fietkau.blog/2012/playful_design2012-07-27T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Last week I was talking to the <a href="https://www.inf.uni-hamburg.de/en/inst/ab/hci/people/mck.html">current professor for HCI</a> at the University of Hamburg in his office, and among the current set of books that he was asked to assess for inclusion in <a href="https://www.inf.uni-hamburg.de/de/inst/bib">our department's library</a>, something caught my eye. I recognized the cover design of <a href="https://rosenfeldmedia.com/books/playful-design/">John Ferrara's <em>Playful Design</em></a>, published very recently by Rosenfeld Media. That was pretty exciting for me, since I had been looking forward to that book for a while, to the extent that I recommended it in <a href="https://fietkau.plus/old_presentations#gamification_2012">a recent talk about gamification</a>, just on the basis of the <a href="https://uxmag.com/articles/messification-why-games-should-be-designed-to-be-games-first">introductory article at UX Magazine</a>. This occassion presented me with a chance to actually read the whole thing, so here's what came of that.</p>
<!-- break -->
<h2>Topic and Relevance</h2>
<p>Here's the blurb from the publisher's website linked above:</p>
<blockquote>
<p>Game design is a sibling discipline to software and Web design, but they're
siblings that grew up in different houses. They have much more in common
than their perceived distinction typically suggests, and user experience
practitioners can realize enormous benefit by exploiting the solutions that
games have found to the real problems of design. This book will show you
how.</p>
</blockquote>
<p>Those few lines already managed to catch my attention, since they state something that I've been also thinking and talking about for a while. Usability engineering and interaction design have somewhat become my core interest concerning my studies of computer science, and I've dabbled in game design occassionally, passively (I enjoy some amounts of well-crafted gameplay in my free time) and actively (most visibly in a rather enjoyable real-time strategy game prototype that I developed with a few other students a couple of years ago, that I sadly have yet to document in a world-accessible way).</p>
<p>My recent drive to put games and playful experiences into the spotlight might be fueled partially by the tendency of our current faculty to dismiss games as mostly uninteresting and irrelevant to our work. (Since <a href="https://www.mpib-berlin.mpg.de/person/93220">Timo</a> left, games don't really have a “voice” at our CS department anymore.) I don't mean this as an insult, both <a href="https://www.inf.uni-hamburg.de/en/inst/ab/hci/people/mck.html">mck</a> and <a href="https://www.inf.uni-hamburg.de/en/inst/ab/hci/people/wyrwoll.html">Claudia</a> have highly interesting and relevant research topics for our little HCI group, it's just that games happen to not be among those.</p>
<p>Last semester I gave <a href="https://fietkau.plus/old_presentations#komplexitaet_und_benutzbarkeit_2012">a talk about the challenges of interface complexity</a> in our research colloquium, in which I showcased explorative learning in games by explaining <a href="https://web.archive.org/web/20170428191224/http://auntiepixelante.com/?p=465">the extraordinarily well-engineered level design of Super Mario Bros on the NES, stage 1-1</a>. This seems to have been a real eye-opener for some of the visitors as to how much thought can go into a good game – they had simply never looked at them so deeply.</p>
<p>So John Ferrara's book, to which excellent timing (in the sense that the UX community can profit immensely from it right now) has been attributed by Hamburg's own <a href="https://codingconduct.cc/">Sebastian Deterding</a>, is also excellently timed for me on a more individual level. It's a great opportunity to further the discussion about games in the HCI context at our department. More on that later.</p>
<h2>Mini Summary and Review</h2>
<p>The book contains <a href="https://rosenfeldmedia.com/books/playful-design/details/table-of-contents/">three main parts</a> subdivided into four to six chapters each, on 200-odd pages in total. You could say that the three parts roughly contain 1. clarification of what games are and how they're impacting UX practices, 2. how to create games that don't stink, and 3. how games can help us do other things than just relax after work.</p>
<p>It is rather clear about its audience: Playful Design is aimed at UX practitioners who recognize that games may hold something of value to them at least insofar as they're willing to read a book about it. It is not aimed at aspiring game designers without any UX background – although it would probably work, there are other, better-fitting books for them. The ideal reader is someone who has at least some HCI-related knowledge and wants to understand “what's the deal” with games. No experience playing video games is required, though it would probably be helpful for following along.</p>
<p>To give an example: There's a chapter about play-testing and how it relates to the quality of the finished game. The author draws parallels to classic usability testing and highlights the differences. If you know nothing at all about usability testing, parts of this chapter may be hard to follow. You don't need years of experience of course, just a cursory idea will do plenty to help you.</p>
<p>It succeeds in conveying central concepts and messages. I found the way that it delves into UX, psychology and game design very well-rounded. Please note that it is not a textbook on either of those subjects, but is concerned with their overlap and interaction. If you've studied one of these subjects in depth, you might find yourself thinking “well yes, this is nice, but there's so much more.” Indeed there is, but if you're looking for e.g. a fundamental introduction into human psychology, you should look elsewhere.</p>
<p><em>Playful Design</em> is more of an “applied science” type of book, designed to let you know how to tranform theoretical knowledge into practical results. It reminded my of <a href="https://www.sensible.com/dmmt.html">Steve Krug's famous <em>Don't Make Me Think</em></a> in its hands-on, “this is how you could do what you do better” kind of way, while also supplying adequate citations for its assertions. Language-wise, it is thankfully not comparable to typical computer science papers, but can be easily and fluently read even by non-native English speakers like me. I read it over the course of a weekend, during which I did plenty of other things as well.</p>
<h2>Is this Book for You?</h2>
<p>As mentioned above, if you already have some knowledge about interaction design and/or HCI (e.g. if you enrolled in our <em>Interaction Design</em> course last semester or some time beforehand, then you're more than covered) and want to know what all the fuss with gamification, serious games and all that is about, this book is for you. If you're a game design novice and want to know what you can do to better your craft, it almost certainly holds value to you, but I would probalby look elsewhere beforehand. If you're a project manager who has heard about gamification and wants to slap a point system and leaderboards on a tax management software to make it more successful, I will put you inside a Skinner box and repeatedly hit you over the head with this book until you show some improvement.</p>
<p>If you're a student of computer science at the University of Hamburg, I would expect <em>Playful Design</em> to be available at our department library soon-ish. If you're in the master's programme, consider enrolling in the <em>Interactive Systems</em> course next semester, provided you're interested in this topic and want to help further the discussion about games at our department. It looks like a detailed analysis of <em>Playful Design</em> could be a viable task for the seminar. (Of course a plethora of non-game-related topics will be discussed in the seminar as well, so if this book in particular doesn't faze you, don't be deterred.)</p>
<p>If you're a UX professional of any kind, I heartily recommend just buying the book. I will do so myself as soon as I can part with the cash. It's a fantastic addition to your physical bookshelf as well as your mental toolbox.</p>
academiagamificationInteraction Design Explanations Conserved for Posterityhttps://fietkau.blog/2011/interaction_design_explanations2011-12-28T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>In the summer semester of 2011, I was a student assistant for the <em>Interaction Design</em> course by Prof. Oberquelle. In this context I answered some questions which came up during the preparation for the exam in written form in the (closed) CommSy room of the course. It would be a pity if these words were simply lost, so I have slightly polished them up here and reproduced them coherently. Whether the contents will still be relevant in the next round of the course is, of course, not yet set in stone. Nevertheless, have fun with it!</p>
<!-- break -->
<h2>Tangible Media</h2>
<p>I have just looked through the MIA slides again and unfortunately actually found no definition there. There are examples on p. 17 and 18 of MIA11-4.pdf. The basic idea is probably already reasonably well clear from examples.</p>
<p>But what is meant by the term? With the dictionary meaning of “tangible” – tangible, touchable – you already get pretty close. A tangible user interface allows us to control the computer by manipulating physical objects with which we achieve a very high directness of interaction. Simply put, tangible media can be anything where physical objects are “connected” to digital representations, so that when we change the state of the physical objects, we change the state of the digital world. That's still relatively fuzzy, though, so I'll just tell you a bit more in detail…</p>
<p>To start with, tangible media is not a particularly technical term. After all, from a technical point of view, every input device is somehow physically manipulated and does something in the computer system through its sensor data. Conceptually, tangible media belongs more in the pigeonhole of usability research, experience design, etc., and touches on things like users' mental models in addition to technology.</p>
<p>Something like a mouse and keyboard are general purpose control devices that we can use to perform many different tasks. These devices are reduced to their basic functions (keyboard: single, discrete keystrokes, mouse: movement in the 2D plane) and all other properties are abstracted away. In turn, our highly complex desktop software systems are built on these basic functions. Because of this “gap” between physical objects and usage, I would not call mouse and keyboard tangible media. This impression is reinforced by the fact that computer users learn quite quickly to “forget” the mouse and keyboard and to think only in virtual concepts.</p>
<p>With tangible media, on the other hand, I have physical objects that are closely coupled with the digital representation, so that my interaction seems “direct” to me. By touching and moving something, for example, I change the digital world as if I had touched and/or moved it in the same place and in the same way. Second, these phyic objects, together with their digital representations (usually as a unit), are central in my mental model. They are not only tools but also materials.</p>
<p>An exciting question in this field would be to what extent touchscreens are “tangible.” The things are nice and direct and physical, but you don't usually change them and they don't have much to do with the material view. That might be an exciting question to discuss in an exam sometime. (Disclaimer: I have nothing to do with Prof. Oberquelle's exams and have neither insight into nor influence on the questions asked there).</p>
<p>I hope this helps. Wikipedia has a bit more on the topic: <a href="https://en.wikipedia.org/wiki/Tangible_user_interface">Wikipedia – Tangible user interface</a></p>
<h2>L-Shape</h2>
<p>For virtual reality systems, there are the so-called “Caves.” These are special rooms in which the walls, floor and possibly also the ceiling can be used as screens, so that a fairly high degree of immersion in a virtual world can be achieved for a person. (In most cases, stereoscopic 3D graphics are also possible.) One disadvantage of caves is that they are quite complex and expensive, because all the projectors have to be accommodated and work together somehow. Another disadvantage is that you can rotate around in the virtual world without any problems, but you can't walk around.</p>
<p>Roughly speaking, an L-Shape is a light version of a Cave. You leave out the ceiling and three of the four walls, so you only have to worry about one wall and the floor. (Think of it spatially, and you'll see the shape of the letter “L.”) That lowers the financial cost enormously, but of course it also reduces immersion. You have to weigh that up when planning such systems. In L-Shapes, unlike in Caves, you can no longer turn around without leaving the limits of the graphic representation. Otherwise, L-Shapes and Caves are functionally quite similar.</p>
<h2>General Info on Models</h2>
<p>I hear quiet murmurs from time to time about why, in the HCI field, we should actually bother with all these models that are all somehow similar and yet different, and yet do not fully represent reality. Why do we bother?</p>
<p>From a scientific theory perspective, they are a way to describe reality. A big part of even our work as scientists (you'll probably realize this by the time you're writing your bachelor's thesis) is not only to figure things out and explain them, but also to make things communicable that couldn't be talked about before. We observe complex relationships in the real world and want to talk about and deal with them in the scientific community. For that to happen, we first have to abstract and structure what we think we see. The PACT model is also an attempt to cast hitherto uncommunicated real-world interrelationships into a structure in which they can be understood by outsiders (i.e., including us, for the time being).</p>
<p>After having dealt with such models for a while, the question sometimes arises what one is supposed to have learned in the process. In fact, the PACT model is a good example of this as well: as moderately to well-qualified computer science students, it basically tells us nothing that we didn't already know in principle somehow. The merit of it all, though, is that we have a common basis for communication after we've been exposed to the model. We can use the same terms among ourselves, can be reasonably sure that we mean roughly the same thing, and – here's the kicker – can build on it. When studying for the ID exam, we may not yet realize how much we benefit from this, but if we can later reference the PACT model in a final paper instead of explaining the relationships over and over again from scratch, we will.</p>
<h2>Leavitt's Diamond and the PACT Model</h2>
<p>Now to Leavitt's Diamond and the PACT Model (cf. p. 7 of ID_11-1.pdf). What is this all about? The two models are so similar that I can probably say something about both at the same time.</p>
<p>A lot of things can go wrong when developing user-centric systems. As developers, we have to keep many things in mind at once. In the two models I mentioned, we have a series of terms (Leavitt's Diamond: human, task, organization, system; the PACT model adds technology) and double arrows connecting each (PACT: almost every) term to every other. What is this supposed to tell us? Perhaps we first consider the terms in isolation, one by one:</p>
<p><strong>People</strong> : Our systems are used by people. People have different abilities, physical and mental conditions, experiences, inclinations, and tastes. When developing usable systems, we should be clear about who our target audience is.</p>
<p><strong>Activity</strong>: As a rule, someone who uses software wants to achieve something through it. The times when computers have to be considered only in the context of workplace activities are over, but still they are not used without some goal (even if it is fun or coping with boredom). The design of a system depends in no small part on what tasks you want it to be able to perform.</p>
<p><strong>Context</strong>: In what organizational context will the system be used? Is it a company (a concrete one?), an association, a loose community? The system must be able to be integrated into existing rule systems and should support collaboration.</p>
<p><strong>System</strong>: The system itself, the component over which we have the most control.</p>
<p><strong>Technology</strong> (only in the PACT model): The technological framework, input and output hardware, resources.</p>
<p>These are all things we must have in mind if the development of usable systems is to succeed. Now the central message of Leavitt's Diamond and the PACT model is this: All of these things are very closely related. You can't change any of them, so to speak, without affecting the rest. If we change the user group (the people), then their tasks and goals change. If we change the organizational context, we encounter different technologies. I think the originators of the PACT model primarily want to call on us not to make short-sighted changes to the system or to other areas without thinking about the consequences on a large scale.</p>
<h2>Interaction Space, Visualization Space, Display Space</h2>
<p>The slides for this are MIA11-4.pdf, pages 3 to 19, so almost the complete file. At the beginning, the model is presented in general, then there are slides that make the individual parts more concrete.</p>
<p>The Spaces model is, oh wonder, a model. So everything I wrote above about models applies here as well. It represents an attempt to discretize and describe something flowing and continuous.</p>
<p>There are four Spaces in the model: Interaction Space, Display Space, Visualization Space and Internal Model.</p>
<p>Interaction Space refers to the space in which the user physically interacts with the system. It does not include the user's mental processes or the internal processes of the system. Interaction Space usually includes the user's body and all control and sensory hardware. Depending on how this is constructed, it is more or less easy to assign a dimensionality to the Interaction Space. If I only have a mouse, then it is two-dimensional; a VR glove would be three-dimensional.</p>
<p>The Display Space is the space where the output of the system takes place. It can be a two-dimensional monitor, but it can also be a three-dimensional cave, a three-dimensional directional sound system, or other adventurous things. It is important to note that Display Space does not include what is being displayed (that will come in a moment), only the hardware on which it is displayed.</p>
<p>The Visualization Space is the place that is graphically represented on/by our display(s). This can also typically be two-dimensional (desktop) or three-dimensional (3D game, VR environment), other dimensionalities are quite rare. What is striking here is that you can display a 3D visualization space on a 2D display space (with sacrifices in immersion), as well as a 2D visualization space on a 3D display space (though hardly anyone is likely to do this simply because of the cost).</p>
<p>Closely related to the Visualization Space is the Internal Model, which describes how the system internally describes and stores the Visualization Space. For example, apart from the spatial dimensions, the system could store other values as dimensionality (e.g. air pressure at each point), which are not visible in the visualization at first. The difference to the Visualization Space is that the Internal Model contains everything that takes place “under the hood” of the system in the calculated world.</p>
<h2>Articulatory and Semantic Distance</h2>
<p>These keywords are found in ID_11-2.pdf on page 9 (and, as it seems to me, only in this one place) in relation to the diagram on the same page.</p>
<p>One axis of the diagram is labeled “directness.” The semantic and articulatory distances are aspects that negatively affect directness. Let's grab a couple of examples from the diagram.</p>
<p>There assembly languages are classified under very low directness. (Note: The directness to the mental processes of the user is referenced here, not to the functioning of the machine). Assembly languages have a high articulatory distance, because they are relatively far away from the thinking and talking of humans. One's own thoughts have to be translated comparatively laboriously into the crude vocabulary of assembly language before they can have their effect. In contrast, a text in a technical language, which is classified in the diagram under very high directness, ideally has a one-to-one correspondence of the thoughts behind it and the words formulated. In between, there is little translation effort or “rethinking.”</p>
<p>The semantic distance, on the other hand, means a gap between the possibilities of acting. For example, a virtual 3D world with a high degree of immersion probably also has a low semantic distance, because there is a strong congruence between my goal “to move forward” and the action possible in the system “to move the camera or the avatar forward.” In a text adventure, on the other hand, I have to translate my “move forward” into a textual command, type this in, and process the feedback. The application context “navigation through a world” suffers from the semantic distance to the functionality “manipulation of text commands.” I hope no text adventure fans are getting on my case for this – I don't want to have said that it can't be fun.</p>
<p>To all this I would like to note that I have extrapolated this also only from the few keywords, which are written on the slide. I may well have made mistakes in the process. Please don't rely on me as an ultimate authority here – especially if your interpretation differs from mine I'm very interested in hearing about it.</p>
academiaHCIMy First Free Softwarehttps://fietkau.blog/2011/my_first_free_software2011-12-22T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>There is a first time for everything. I can still remember the first time I compiled program code. It was Turbo Pascal snippets back then and I worked out enough of them in self-study to be able to create my own little games under DOS.</p>
<p>Paradoxically, despite my studies in computer science, I program less today than I did back then. My website is basically my only tinkering project, where I let off steam when I need some rest from the university stuff. Developing undisturbed for myself has its charm, even more if the visitors of my website get great new features out of it.</p>
<p>Just a few hours ago there was another first for me: I just licensed and published some of my source code for the first time.</p>
<!-- break -->
<p>Keeping in mind my previous programming experience and my well-documented attitude towards free and open content, I guess you'd have to call me something of a late bloomer in this matter. In fact, it just never happened before. Aside from a few scripts for my own use, my only project is my website, as I mentioned before, and the code is unfortunately not in any shape overall that I would release it and stand by it.</p>
<p>However, the last few days I've been building a nice little thing based on jQuery that (after reading up a bit) also abstracted quite well as a jQuery plugin. It now bears the name <strong><a href="https://fietkau.software/readerbar">ReaderBar</a></strong>:</p>
<blockquote>
<p>ReaderBar is a jQuery plugin that aims to augment long HTML documents with a
few navigational tools. It includes a button to go to the start of the
document, arrows for jumping between headers/sections and bookmarking
functionality. Along the left side of the document, it shows a “places bar”
with quick access to headers and user bookmarks.</p>
</blockquote>
<p>You can see it in action in the HTML view of my articles, just click on one of the thumbnails (or one of the HTML links). As always, I would be very happy about feedback on the usability.</p>
<p>The whole thing is now available <s>on GitHub</s> <a href="https://fietkau.software/jquery-readerbar.git">on my website by now</a>. If you like, you can copy the code directly from there or just follow the development. The entire source code is licensed under the MIT license. JavaScript is of course an extremely versatile and dynamic language. I don't have much experience with the conventions in the jQuery community, so my next plan is to get feedback from there and make the code structurally sound so that other people in the field can read it reasonably.</p>
<p>In the medium term, of course, I don't want to stop at this one project. I'll have to think about how to link my content on GitHub to my website in a meaningful way. Maybe a new category titled “Software” is possible here. But what do you think it should look like?</p>
<p>Do you remember what your first free software was? Or did you rather work on existing projects? Who else can you find on GitHub? I'm <a href="https://github.com/jfietkau">jfietkau</a> there, maybe I'll see you around.</p>
programmingMy First Video Coursehttps://fietkau.blog/2011/my_first_video_course2011-10-24T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>As some of you may already know, I'm running a tutorial on <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a> for students in the Computer Science department this semester, half of which is a video tutorial on YouTube (or as downloaded video files).</p>
<p>The need for a LaTeX tutorial was probably identified by the student office and Jan von Soosten approached me to ask if I could take over. I had never before conducted a complete course independently and on my own responsibility, the freedom of design beckoning to me ultimately attracted me more than my semester workload could deter me.</p>
<!-- break -->
<h2>Concept and Inception</h2>
<p>For some time now I've wanted to do a video tutorial along the lines of <a href="https://www.khanacademy.org/">Khan Academy</a>, but I've always lacked the time and the occasion. This opportunity provided me with both.</p>
<p>The basic idea of Khan Academy is the following: The time available to teachers and learners together is finite and valuable. In the traditional model of university teaching, consisting of lectures and exercises, knowledge is imparted during the attendance time, and students do the practicing and applying of the knowledge alone at home or in small groups. Pedagogy has long preached that the application of knowledge is at least as important for the learning process as listening and absorbing. So why not try the experiment of letting learners do the knowledge transfer in the form of videos alone at home, and apply the knowledge and work on tasks together during the attendance time?</p>
<p>We live in a time when audio and video data can be made accessible worldwide without insurmountable technical difficulties. After overcoming a few technical hurdles, existing lectures can be easily bundled and audiovisually preserved. <a href="https://lecture2go.uni-hamburg.de/">This is already happening at the University of Hamburg and is very well received by students.</a> Asynchronous knowledge transfer can work well in this form and complement things like textbooks in a meaningful way. This encourages me to simply turn the old world around 180° and let my knowledge transfer take place in the form of videos. Does that necessarily work better than the tried and true model? I don't know, but it's definitely worth a try. As a side effect, a worldwide freely accessible video course for LaTeX beginners even outside our department will be released.</p>
<h2>Let's Learn!</h2>
<p>However, the concrete design of my videos is significantly different from typical Lecture2Go recordings. The thing that's visible almost all the time is my LaTeX editor and the PDF viewer that goes with it. I don't have a camera pointed at me, but I do speak into the microphone and comment as I work. There is an intro/outro and a catchy theme song thanks to <a href="https://creativecommons.org/">Creative Commons</a>: <a href="https://ainmono.bandcamp.com/track/cube-shaped">(A) in Mono – Cube-shaped</a>. These design patterns and elements come from the “Let's Play” metacommunity on YouTube. For those to whom this means nothing: you take a PC or console game, play and comment on it, and record the whole thing. This then results in lots of videos that are combined into series and seasons. Many Let's players go to incredible lengths to captivate and entertain their viewers.</p>
<p>It's probably something that can be very entertaining for some people, while some others will grab their heads and wonder how anyone can find it fun. Personally, I follow a handful of Let's Players on YouTube and have been able to pick up a few tricks there for creating my own videos. However, the similarities are not limited to the design tools, but also extend to the approach: My videos deliberately don't have the character of a movie or a meticulously planned tutorial, but I have at best a rough idea of what I want to do beforehand, then – like a Let's Player – I just get started and edit things later as needed, including my mistakes and problems and situations where I have no idea what's going wrong. This makes the whole thing look very authentic and also saves me additional work in post-production.</p>
<p>By the way, another source of inspiration are the software development lectures by Axel Schmolitzky. If you've ever attended them, you know how Axel uses live code demonstrations to show things off. There are strong parallels between these episodes and my videos.</p>
<h2>What Now?</h2>
<p>There was a considerable amount of feedback to my announcement email, a date was set and we will meet for the first time this week. By the way, that'll be on Friday from 12:15 to 13:45 in C-101, if someone wants to join spontaneously. If so please <a href="https://fietkau.media/videos">watch the first two lessons</a> beforehand and bring your own laptop or a similar device.</p>
<p>At the moment it is too early to evaluate the viability of the concept. Technically, I can already say that the bit of video editing on my Linux desktop works great after some familiarization, see my blog entry “<a href="https://fietkau.blog/2011/recordmydesktop_and_ogv">recordmydesktop and OGV</a>.” Is anyone interested in details on post-processing with <a href="https://en.wikipedia.org/wiki/Kino_%28software%29">Kino</a>?</p>
<p>YouTube also seems to work sufficiently well as a channel to reach virtually anyone interested. I have also looked into the “Community Video” section of <a href="https://archive.org/">archive.org</a> and will sooner or later also offer the videos there in various file formats, in order to include those people who do not warm to YouTube for technical, ethical or other reasons. I haven't asked the Lecture2Go team yet this time whether they might also want to host the videos. Let's see, maybe something will work out.</p>
academiarecordmydesktop and OGVhttps://fietkau.blog/2011/recordmydesktop_and_ogv2011-09-20T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Just a small heads up to anyone doing any kind of screencast or desktop recording on a typical desktop Linux:</p>
<p>Usually, people will recommend <a href="http://recordmydesktop.sourceforge.net/about.php">recordmydesktop</a>, which is a very cool program that's available e.g. in the Ubuntu repositories. It works really well and all, but I keep running into walls with the OGG/Theora videos that it produces.</p>
<p>I'm no expert on video encoding, but apparently recordmydesktop does some very fancy optimizations involving variable FPS and stuff like that, so the video files are quite small byte-wise. Unfortunately, this has caused problems for me down the line: I can play the files just fine in Totem (thus, gstreamer) or VLC. But as soon as I try to reencode them, all hell breaks loose.<!-- break --></p>
<p>I tried importing the files into <a href="https://en.wikipedia.org/wiki/Kino_%28software%29">Kino</a>, but they would cut off too early and the framerate would go bananas. I tried reencoding with ffmpeg, only to get playback speed issues. Mencoder didn't help either. Even VLC, which could play the files without problems, would not produce usable results, but would seemingly offset frame rates, so that when there was no movement on screen for any length of the video, in the resulting video it would pause a couple of frames earlier, which was very annoying.</p>
<p>Despite long searches, I wasn't able to find anyone else having the same problem online. So maybe I'm just incompetent and I'm making some obvious mistake. Still, I wasted hours today trying to figure this out, and I still failed.</p>
<p>So if by any chance you run into the same problem some time, just save yourself a lot of grief and use <a href="https://ubuntuforums.org/showthread.php?t=1062238">ffmpeg with x11grab</a> instead of recordmydesktop. It has the added advantage that you can directly encode to any format that ffmpeg can do (which is pretty much all of them).</p>
<p>(It almost pains me to admit this, but in the end I used ffmpeg/x11grab to capture my OGV playing in Totem and then re-muxed the audio because I didn't want to re-record it all. In the future I'll probably use x11grab directly.)</p>
linuxArticles Available in ePub Formathttps://fietkau.blog/2011/articles_as_epub2011-09-09T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>As of now, my <a href="https://fietkau.science/publications">articles</a> are publicly available in ePub format in addition to PDF format. I hope this will allow me to make them available to an even wider audience. If you use an e-reader (e.g. a Kindle), a tablet (e.g. an iPad or a Galaxy Tab) or a smartphone for reading, this format might lead to a more pleasant reading experience for you.</p>
<p>So why not take the opportunity to take a look at some “classics”? The following works are available for you in ePub format:</p>
<!-- break -->
<ul>
<li>Forms of interaction in the blogosphere</li>
<li>Approaches to unify complexity and usability in application software</li>
<li>The teachlet concept: possibilities and limits of a teaching form for software design discussions</li>
<li>Modeling stateful systems in Java</li>
</ul>
<p>Let me know if anything doesn't work for you or you notice any problems with the ePubs. I've never done this before and there may be errors that have crept in. Thanks to the people on the <a href="https://www.e-reader-forum.de/">e-reader forum</a> who <a href="https://www.e-reader-forum.de/t/bitte-um-feedback-zu-meinem-ersten-epub.108471/">eagerly tested on various devices and gave me feedback</a>.</p>
<h2>What Is an ePub, Anyway?</h2>
<p>The ePub format is a standard for electronic books. For e-readers and other readers with small displays, PDF files are of limited use because they have a fixed layout (often A4), so either the font is tiny or a line doesn't fit on the screen, so you're just scrolling back and forth. The ePub format, on the other hand, allows for flowing text that can adapt to the viewing situation. More info as always <a href="https://en.wikipedia.org/wiki/EPUB">on Wikipedia</a>.</p>
<p>Aside from flexibility, there's something else I like about the ePub format: it's much, much easier to edit the files than PDFs. (There's also DRM for ePub, but I'll leave that aside. Doesn't affect my files, after all.) This means that it is now much easier for you to actually exercise the rights granted to you by Creative Commons to adapt and process my texts.</p>
<p>Technically, ePub files are little more than <em>zip</em>ped (X)HTML with some sugar, so if existing ePub editors like <a href="https://sigil-ebook.com/">Sigil</a> aren't enough for you, just unzip the ePub file, fire up vim / emacs / a text editor of your choice and make something creative out of my texts (respecting the corresponding CC license, of course)!</p>
metaFarbrausch Stopping Byhttps://fietkau.blog/2011/farbrausch_stopping_by2011-05-06T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>There is once again a reason to look forward to the <a href="https://www2.informatik.uni-hamburg.de/fachschaft/wiki/index.php/Kunterbuntesseminar">KBS</a> – because next Tuesday, May 10, 2011 there will be two celebrity speakers. Two members of <a href="http://www.farb-rausch.de/">farbrausch</a> will talk about their work environment and their craft.</p>
<p>Who or what is farbrausch?</p>
<!-- break -->
<figure>
<img src="https://fietkau.blog/assets/farbrausch-debris.png" alt="Screenshot from fr-041: debris.">
<figcaption><a href="https://www.pouet.net/prod.php?which=30244">fr-041: debris.</a></figcaption>
</figure>
<p>This is farbrausch.</p>
<figure>
<img src="https://fietkau.blog/assets/farbrausch-popular.png" alt="Screenshot from fr-025: the.popular.demo">
<figcaption><a href="https://www.pouet.net/prod.php?which=9450">fr-025: the.popular.demo</a></figcaption>
</figure>
<p>This too.</p>
<figure>
<img src="https://fietkau.blog/assets/farbrausch-frozen.png" alt="Screenshot from fr-081: .frOzen.">
<figcaption><a href="http://www.pouet.net/prod.php?which=56878">fr-081: .frOzen</a></figcaption>
</figure>
<p>And this too.</p>
<p>Farbrausch is a demo group, one of the best known ones. That is, they are pretty much the world's foremost experts in efficient real-time 3D programming, often with procedurally generated assets. The demos can be downloaded and run on your own PC – from a binary of a few MB or even KB in size, a real visual firework is created on the screen, accompanied by atmospheric music.</p>
<p>I'm really looking forward to Tuesday and am very excited! If you are interested in computer graphics, media art or related fields, I hope to see you at the KBS on Tuesday!</p>
<ol>
<li>Watch <a href="https://www.youtube.com/watch?v=wqu_IpkOYBg"><em>debris</em></a>, <a href="https://www.youtube.com/watch?v=k_oTQd93eRI"><em>rove</em></a> or another good farbrausch demo!</li>
<li>Come to the KBS on Tuesday (5pm, C-221 at the Informatikum)!</li>
<li>Spread the word!</li>
</ol>
Software That I End Up Avoidinghttps://fietkau.blog/2011/software_i_end_up_avoiding2011-04-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Having recently acquired a <a href="https://www.gsmarena.com/samsung_galaxy_ace_s5830-3724.php">brand-new smartphone</a>, I'm still fiddling around with the system, installing apps and configuring things. So far I'm really happy with it, a definite step up from my previous cell phone (and that one wasn't even that old).</p>
<p>Imagine my surprise when I found out that the new one has an office app installed on it by the vendor. Inspired by <a href="https://www.osnews.com/story/24228/how-to-improve-portability-across-personal-computers/">a semi-recent article on OSNews</a>, I'd been wondering what a good mobile office UI might look like, so I was eager to have a look at this one that came free with my phone. It's called <a href="https://office.hancom.com/product/mobile/">ThinkFree Office</a> and supposedly it works really well. Unfortunately I never actually could look at it. How come? Because the EULA is <em>completely friggin' ridiculous</em>. And here's why.</p>
<!-- break -->
<h2>License Agreements</h2>
<p>On a newly configured Android phone, one of the first negative things I noticed was that it kind of spams you with license agreements. It seems like there's one for each Google service (like the App Market, Mail if you use it, Maps, or YouTube) and then more for a lot of other apps that use remote services. Generally these work such that you have to agree to them to use the software – if you don't, you don't get to use it.</p>
<p>In my humble opinion, the ones for the Google services are <em>okay</em>. Obviously I'd prefer it if they weren't necessary, but from what I recall they were worded comparatively clearly, not so bogged down with legalese, and fairly agreeable as far as the actual terms go. I try not to leave more data than necessary with Google, but their license agreements didn't give me that much of a bad feeling for using the Android Market, for example.</p>
<p>And then along comes ThinkFree Office.</p>
<h2>Some Choice Quotes</h2>
<p>To put my rant into the correct perspective, please keep in mind that <strong>I am not a lawyer and I have no formal education about EULAs, how they're written and why they're worded as they are</strong>. Also, <strong>the EULA presented to me is German and I'm translating it on the fly. I'll do my best, but I make mistakes. At any rate, the wording in this blog post is not the exact wording that I'm asked to agree to.</strong></p>
<p>That said, here are a few quotations illustrating why I think that the ThinkFree Office EULA is completely unacceptable:</p>
<blockquote>
<p>The software may be used for personal and internal commercial purposes, but not in the operation of a service bureau or to the advantage of another person or commercial entity,</p>
</blockquote>
<p>Okay, so let me get my head around this. The gist seems to be that I can use it to write personal stuff, like laundry lists and diary entries. I could probably use it to write this blog entry (theoretically), even if I was making any money off this website, since it's internal use and I'm not running a service bureau, as far as I know. (What exactly constitutes a “service bureau” anyway?)</p>
<p>But wait… if you're reading this blog entry, and you think it's interesting or funny, did I then write it to the advantage of another person? Or is that only financial advantage? I wonder what would happen if I (hypothetically speaking) used it to write a gift coupon for a book for my mother's birthday. Would that be me using it to her financial advantage? My guess is as good as yours.</p>
<p>Finishing the sentence quoted above, we get this gem:</p>
<blockquote>
<p>including but not limited to the development of other software.</p>
</blockquote>
<p>Sure, I guess that's… wait, <em>what</em>?</p>
<p>Yes, it is explicitly <strong>forbidden</strong> to use ThinkFree Office for programming.</p>
<p>I started this blog entry with good intentions, but we've already reached the limits of both my goodwill and my imagination. This doesn't even <em>try</em> to make sense. Who wrote that, and what were they <em>thinking</em>? That I might hack ThinkFree Office <em>from within itself</em>, steal it, and sell it as my own? I'm sort of grasping at straws here. Let's leave it at a big fat “<em><strong>WHAT.</strong></em>”</p>
<blockquote>
<p>You are not allowed to display, publish, modify, rent, lease, lend, sell or share the software or any part of it.</p>
</blockquote>
<p>Right, so if I hand someone my phone, I have to be <em>really careful</em> to not let them use your software, because the license grants it to me and to me <em>alone</em>. Right? Or is it coupled to the phone? It doesn't say so, so I'd have to assume it's not.</p>
<p>Is the license agreement considered to be part of the software, anyway? I'm guessing it is. Good thing I haven't agreed to it, so I can still quote it here.</p>
<blockquote>
<p>The software is intellectual property of Hancom Inc. and may not be shared with or displayed to any person besides you and other people who have agreed to this license and are registered with Hancom Inc.</p>
</blockquote>
<p>Ah, here we go. I guess that clears that up, at least. If anyone here ever borrows my phone, <strong>do not open ThinkFree Office</strong>. They don't want you to see it. At all.</p>
<blockquote>
<p>You have no rights of property concerning the software. You are merely granted a license to use the software under the conditions outlined in this document, and Hancom Inc. reserves all rights not explicitly granted to you.</p>
</blockquote>
<p>Even though this reads like satire, it is sadly commonplace these days. I'm not saying that I think it's a good thing to agree to, but compared to some of the other stuff in there, this is almost <em>sane</em>.</p>
<blockquote>
<p>This agreement terminates immediately and without notice, if you violate any of the conditions outlined herein.</p>
</blockquote>
<p>Translation: If you don't play by our rules, go to hell.</p>
<blockquote>
<p>You agree to destroy the software and all copies of it immediately after this agreement terminates.</p>
</blockquote>
<p>Translation: And don't even <em>think</em> about coming back.</p>
<blockquote>
<p>The software is provided “AS IS” and Hancom Inc. disclaims any liabilities, implicit or explicit, INCLUDING any silent guarantee concerning admissibility, fitness for any particular purpose, or compliance with the law.</p>
</blockquote>
<p>Right. I'm not supposed to assume that the software does its job well. Repeat after me: <em>If the software fails to do its job, I will not complain, because complaining is the way of the devil.</em></p>
<p>Also, if there's any code in there that (unbeknownst to me) does anything illegal, it's totally my fault, because I didn't check beforehand. Oh no wait, there's a whole paragraph further up that I didn't even bother to quote, that forbids me to even try to look at the code by any means (like decompiling or reverse engineering). So I'm not allowed to make sure that nothing can go wrong, but if something <em>does</em> go wrong it's my fault anyway. Gee, ThinkFree Office, I've only known you for a few minutes but it already feels like an abusive relationship.</p>
<blockquote>
<p>You acknowledge and agree that Hancom Inc. may change these conditions at any time. By continuing to use the website, content, service and/or your files after such a modification of the license agreement by Hancom Inc. you agree to be bound by the changed agreement.</p>
</blockquote>
<p>How do I know? You probably won't notify me, right? Let's say I check for license updates every time I use your software. What if you update them <em>while</em> I'm using it?</p>
<p>Oh well, I'm sure you'll only change the license agreement in minor ways, update the lawyer-speak or whatever. It's not like you'll say I have to pay you 10€ every time I launch your software…</p>
<blockquote>
<p>Hancom Inc. reserves the right to at any time start charging a fee for access or usage of the website, content, services and/or your files.</p>
</blockquote>
<p>… nevermind. ಠ_ಠ</p>
<blockquote>
<p>You agree to take full responsibility for all activities or actions made by a person using your password, regardless of whether they have been authorized by you or not.</p>
</blockquote>
<p>If someone bruteforces my password, or hacks your servers and steals it, it's my fault if they then do something bad with it. Riiiight.</p>
<p>Living in a big city, I've had my fair share of crazy people randomly walking up to me and blabbering about something or other. In situations like that, I try to smile politely and nod, while fervently searching for a way to get out of there. You know what? <em>That is exactly what I am doing right now.</em> Smile, and nod…</p>
<p>The agreement then goes on to list a whole bunch of things I'm not allowed to do while using the software. Among those things: saying stuff that's likely to be misunderstood, accessing “inofficial” parts of their website, doing penetration tests (as in network security), using automated tools or anything else that's not a normal web browser (tough luck, blind people!), sending spam mails, reading the headers of TCP/IP packets or e-mails (I swear I am not making this up), and porn.</p>
<p>And that's about it.</p>
<h2>Icing on the Cake</h2>
<p>Even after all of that, the best part is yet to come.</p>
<p>As I said earlier, ThinkFree Office came with my phone. It's part of the standard load of crapware you tend to get because the software vendors <em>pay the phone vendors</em> to install their stuff and make it non-removable. Yes, I checked, I can't uninstall ThinkFree Office without voiding my warranty.</p>
<p>Remember earlier, when the license agreement told me that I have to destroy the software if I ever break the license agreement? Think about that for a second. I'll be right here.</p>
<p>Waiting…</p>
<p>So did you figure it out? Yes, indeed, if I agree to be bound by those conditions and I ever break them (even accidentally or through no involvement of my own), I am <strong>contractually obligated to void my cell phone's warranty</strong>. If I were a conspiracy theorist I'd imagine some evil mastermind behind this scheme. “Isn't it <em>glorious</em>?”</p>
<p>I wonder if I could send my phone to the vendor and demand to have this application removed.</p>
<h2>The Verdict</h2>
<p>Dear Hancom Inc., or whoever is ultimately behind all of this: As I said, I would have loved to take a look at ThinkFree Office. I appreciate that you took the time to develop a cool mobile office application. I'm not someone who says that absolutely everything has to be free software (though I'd certainly prefer it if it was). But there is simply <em>no way</em> I'm ever agreeing to this. <em>No. Effing. Way.</em></p>
<p>Dear Samsung, loading your phones with artificially unremovable crapware does not get you any brownie points. It does the opposite. I don't know how much money those people pay you to put their software there, but I'm willing to bet it's low enough that I'd gladly pay it on top of the normal price to get a phone without crapware. This is one of the (few, in my opinion) things that Apple consistently gets right. For that matter, Google gets it right too, concerning the Android hardware they sell directly, or so I've heard. So why live in the nineties?</p>
Many New Featureshttps://fietkau.blog/2011/many_new_features2011-03-18T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Three days ago I promised new features. After a gradual and stealthy launch of the last few UI elements, everything is now ready to go, so I'd be happy if those of you who are interested would like to check it out. To that I should add that not all of the features listed below have only been around for the last few days, but they are all showcased here for the first time. Here are the new features in no particular order…</p>
<!-- break -->
<h2>Categories/Keywords</h2>
<p>It was planned for a long time, now it's implemented: I can now tag my blog entries and other content with keywords. For example, above this blog entry there is a slightly grayed out “website” (at least if you visit my website and don't read the RSS feed directly). Clicking on it will bring you to a list of all entries that are tagged with the keyword “website.”</p>
<p>Analogous to the blog entries, the keywords also refer to lectures and other content deposited on this website. On the orange entry pages, however, they are not placed above the entry, but between the description and the comment section.</p>
<p>A click on the headline in one of these keyword fields leads you to my “tag cloud,” which shows all assigned keywords at once, where the relative size results in a highly mathematical way from the number of existing entries for the keyword, offset by their respective age. The cloud is available on the start page in a minified version.</p>
<p>By the way, each keyword has its own RSS feed, which can be found on the keyword page under the last entry or where your browser shows you RSS feeds for the current page.</p>
<h2>Translations of Blog Posts</h2>
<p>This website was designed from the beginning to support multilingualism, at least German and English should be possible. My initial vision was that I would write every entry in both languages. For all non-blog entries I still do that, but for blog entries I only do the work if they seem very important or are very short.</p>
<p>For all other cases I now offer <em>automatic translations</em>. The idea behind this is that (although the translations are sometimes far from perfect) an English-speaking reader still has a better chance to understand it than if the text is only available in German. The translations can currently be admired on the English overview page of my blog, where they have their own link below the posts I have written only in German. Behind that you can find the translation along with a warning regarding the quality.</p>
<p>Normally I read them only once to make sure that there are no gross falsifications of meaning. But I do not make any guarantees.</p>
<h2>Language and License Info</h2>
<p>I can now add additional information to the links below the entries about lectures, articles or other media. As a visitor you will notice that there is now a small icon if a PDF file, a video etc. is available under a free license (and if so, under which one), and that another one is displayed if a file or video is in a different language than the one you are reading the website in. Since my stuff is pretty much all in German at the moment, the latter only affects English-speaking visitors so far.</p>
<h2>Print Stylesheet</h2>
<p>My CSS can now handle it much better if you want to print something from my website. There will be serif fonts, no background colors, no navigation stuff and other such customizations. Feel free to try it out if you like.</p>
<h2>Miscellaneous</h2>
<p>Otherwise, there have been the usual small improvements under the hood, which I've largely forgotten again already. Among other things, I made sure that everything here validates as XHTML 1.1. I hope I didn't miss anything.</p>
<p>As always: If you have any questions, wishes, or discovered bugs, feel free to contact me.</p>
Dealing With Complexity in UI Designhttps://fietkau.blog/2011/dealing_complexity_ui_design2011-03-11T00:00:00ZJulian Fietkauhttps://fietkau.blog<p><a href="https://www.osnews.com/">OSNews</a> has just published <a href="https://www.osnews.com/story/24512/dealing-with-complexity-in-ui-design/">an article I've written</a> on the subject of <em>interface complexity</em>:</p>
<blockquote>
<p>Over the past few decades, the software that enables us to be productive with our computers has become increasingly sophisticated and complex. Today's UI designers are faced with the challenge of devising graphical user interfaces that are easy to grasp and use, yet still provide access to a wide range of features. Here are some ideas about the nature of GUI complexity, followed by a couple of thoughts on simplicity that might just surprise you.</p>
</blockquote>
<!-- break -->
<p>It has already sparked an <a href="https://www.osnews.com/story/24512/dealing-with-complexity-in-ui-design/">interesting discussion</a> over there. If you're interested in these things and/or want to influence what my next article should be about, check out the comments on OSNews.</p>
<p>Christoffer/ephracis has already contributed <a href="https://web.archive.org/web/20160410162223/http://blog.stoffiplayer.com/2011/03/dealing-with-complexity-in-ui-design.html">a very insightful response</a> – recommended reading.</p>
Photo Shooting with Flohttps://fietkau.blog/2011/photo_shooting_with_flo2011-01-21T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Last week (after it took us quite a while to find a date) <a href="https://florianletsch.de/">Flo</a> (and spontaneously Rolf) and I put our heads together with the goal of taking some good photos for my website and other online activities.</p>
<p>I don't need to add much to Flo's report, he already explained the photographer's perspective there in detail and still understandably for me as a layman.</p>
<p>I think it's great of Flo that he accepted the idea so openly. I wouldn't have dared to hope that such a great shooting would come out of it when I approached him back then: “Hey, do you possibly have time and feel like taking some portrait photos of me, or can you recommend another photographer?” – Flo (together with Rolf) conjured great results out of the situation, for which I would like to thank him again!</p>
<!-- break -->
<p>For me, as someone who defines himself mainly in terms of intellectual achievements, it was a strange experience to have my own appearance put in the spotlight like that. I may not be as camera shy as some other people (who reflexively turn away at the sight of a lens), but spending several hours posing and smiling was ultimately quite exhausting. Fortunately, it was a lot of fun with Flo and Rolf throughout, even if I was really tired afterwards. I would definitely recommend Team Letsch & Boomgarden.</p>
<p>The results can now be found on my hard drive as well as on Flo's blog. I'll have to see what exactly I'll do with them. First of all there's a randomly chosen picture of me on the main page. Let's see what else I can think of…</p>
Making Changes to the Language Functionality of My Websitehttps://fietkau.blog/2010/changes_language_functionality2010-12-27T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Christmas is a time for many nice things: meeting old friends, being with family, eating well, sleeping in. For this time I like to take a break from most university duties and do some programming for my own personal purposes. I dedicated the past two or three days to my website and overhauled the technical basis for internationalization.</p>
<!-- break -->
<h2>Important Changes</h2>
<p>First, what changes for visitors to the site. The most noticeable change: there is no longer an “implicit language mode,” instead each visitor sees either the German or the English version of the page at all times. (This does not change the fact that content only available in German is also displayed in German on the English page). You will notice that you will be redirected to a subdomain, either de.julian-fietkau.de or en.julian-fietkau.de, depending on the language settings of your browser. As usual, you can switch via the flag in the footer.</p>
<p>The links look a little different. Instead of a language specification at the end of the link (old: “http://www.julian-fietkau.de/blog/en”), the language is now specified via the subdomain (new: “http://en.julian-fietkau.de/blog”). The same applies to direct links to files, as far as they are allowed at all. The preferred link for sharing is still the one with “www” without language, so that every visitor of the link gets the language they prefer. Each link is also available with “www” instead of “de” or “en” and then performs the appropriate redirection.</p>
<p>That is basically all. I'll write a little bit about why I did this and how it is implemented. Warning you beforehand: this is mainly my innter programmer speaking.</p>
<h2>Uniqueness of URLs</h2>
<p>Since the launch of this version of my site, I've been a bit dissatisfied with the fact that common search engines first indexed the English versions of my sub pages and then the German ones were only available by explicitly specifying the language. It seems like a bad idea to make multiple language versions of content available through <em>the same URL</em> by evaluating the language setting. It's nice if users can just copy the address from their browser and share it, but somehow this dynamic adjustment of the language of a URL is a bit too non-deterministic for a working web and goes against user expectations.</p>
<p>With the current solution, every URL that has content behind it has a unique and explicit language. All others are redirects that may take the user's language setting into account when selecting the redirect destination. By the way, the “xml:lang” attribute is now also set correctly.</p>
<h2>About HTTP Status Codes</h2>
<p>I was faced with the challenge of implementing the structure so that the new links all work and the old ones remain functional. You never know who has bookmarked something or where the URLs are located. So it was quite important to me that the old ones would continue to work. In this sense, every visitor of an old URL with explicit language information will be redirected to the new address via “301 Moved Permanently” without having to think about it.</p>
<p>The other big question was, what do I do for the visitors of a page without language specification now. I didn't want to simply give out random language content. So after I determine if they prefer “de” or “en,” they are now redirected to their language version via “303 See Other.” According to <a href="https://en.wikipedia.org/wiki/HTTP_303">Wikipedia</a>, this expresses the following in contrast to a 301: “The specified URI is not a substitute reference for the original resource.” Meaning: “Hey visitor! What you requested is best found here in person instead, but that doesn't necessarily apply equally to the rest of the world.”</p>
<h2>The Darned Details</h2>
<p>Without talking too much about boring internals, I can say that most of my time was taken up by small stuff again. I had to adjust the templates in many places and especially the OpenID login was completely broken for the last two days. Hopefully everything should work now. If you find any bugs or other problems, please let me know!</p>
<p><em>P.S. You can admire the christmas decorations for another hour, then it will disappear until next December.</em></p>
metaBachelor Thesis Log 23https://fietkau.blog/2010/bachelor_thesis_log_232010-12-06T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Welcome to the twenty-third and last (!) report on my bachelor thesis on <em>teachlets</em>. A period of my life is coming to an end… Today is the big day: the day of submission, the day of publication. With this in mind, I am delighted to present to you without further ado:</p>
<p><strong><a href="https://fietkau.science/das_teachlet_konzept">The Teachlet Concept: Possibilities and Limits of a Teaching Pattern for Software Design Discussions</a></strong> (<a href="https://edoc.sub.uni-hamburg.de/informatik/volltexte/2010/156/">INFDok</a>)</p>
<p>In the last few reports I've already talked quite a bit about the last steps before publishing, so today there will be info about the submission and publication itself, followed by a conclusion about these reports.</p>
<!-- break -->
<h2>How a Bachelor Thesis Finds Its Way to the Student Office</h2>
<p>In the end, the actual submission of the thesis was incredibly unspectacular. I left another event early today to be there at the opening time of the study office (1 pm), where I met Mrs. Wilsdorf, who took my three bound and signed copies plus CD-ROM. (Because it's St. Nicholas today, I stuck a little chocolate Santa Claus on each paper, she thought that was quite funny. Thanks to Janina for this amusing idea.) After about 15 seconds, that was it – no fanfare, no confetti… Well, now I've got that whole business behind me and I can just wait for my supervisors' reports. I hope that I can already get my bachelor's certificate at the graduation ceremony in January – as far as I know, there are two such ceremonies per year, so this one would be the exact opposite of the “big one” in summer.</p>
<h2>Publication of a Student Thesis</h2>
<p>The <em>pros</em> and <em>cons</em> of publishing a bachelor thesis have already been discussed here several times. Especially the publication of preliminary versions is somewhat contentious, but enough has already been written about this in connection with the topic of <em>feedback</em>. Today, I am concerned with the publication of the finished version, as has just happened in my case. Because in my eyes there is pretty much nothing speaking against it.</p>
<p>I can think of two cases where I could understand someone not wanting to publish their thesis. One is a thesis with an outside company that objects to publishing it beyond what is necessary for confidentiality reasons. (Whether you want to get involved as a student is another question, but if it comes to that, then of course you have to be consistent.) The other is a bare-effort thesis written merely to claim a passing grade and with which the writer never wants to be associated again. I know such situations, in which I give only the minimum effort for a study achievement, because I don't care for or about the learning goal, that can happen. But for a bachelor thesis it should be the absolute exception, right?</p>
<p>On the other hand, there are many reasons to do one's own scientific work in the open from the beginning, of which I would like to list just a few:</p>
<ul>
<li>People are interested in it. It's really true. I've been putting all my stuff on my website for a little over half a year now, and I keep getting feedback and inquiries about it – mostly from fellow students, sure, but also from people in other parts of Germany and other countries around the world (!). People come to my website via search engines because they are looking for something I once gave a lecture about and put the slides online here. That makes me a little bit proud. A few weeks ago I got an email from a recruiter who had seen “many interesting approaches” in my <a href="https://fietkau.plus/assets/modellierung_zustandsorientierter_systeme_in_java.pdf">seminar paper</a> and asked me if he could interest me in a job as a software developer in Hamburg. Many students believe that nobody is interested in what they do – as if only after graduation some switch is flipped and then you can do “real” science. This is not the case, people, your results are valuable!</li>
<li>In the age of the internet, the cost of publishing a text is very, very close to zero. If you don't have your own website, you can always rely on external support, e.g. on INFDok if you're in computer science in Hamburg (see below). In the past and until today, science has lost a lot of time and resources by discovering and researching things multiple times, because people were simply lazy about publishing. <em>Why?</em></li>
<li>Despite tuition fees, the lion's share of my studies is still paid for by the public sector, i.e. the taxpayer. This is done in the hope that I will later do something for Germany as a business location with my professional education, of course. But anyone who knows me knows that I don't like being in debt. That's why I think it makes sense to give what I'm achieving through my studies back to the public right now. My bachelor thesis is a tangible result of “scientific relevance” that anyone can use for further science based on it. That's how the whole process should work.</li>
</ul>
<p>Because I believe in a freely accessible word of science, I publish my bachelor thesis under <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>. I will dedicate a separate blog entry to the topic “What licenses are there and what should I use them for?” For now I'll note: this license allows every reader to redistribute the document and to create works based on it, as long as I am credited and the results are again available under such a free license (“copyleft”).</p>
<h2>INFDok</h2>
<p>The Computer Science Library operates a full-text server for scientific papers written at our department. Students can also publish their work there (but only if a professor or a research assistant confirms the scientific relevance of the work). This is quite unproblematic and I directly <a href="https://edoc.sub.uni-hamburg.de/informatik/volltexte/2010/156/">made use of it</a>. I quote the advantages of this service from the library website:</p>
<ul>
<li>Immediate worldwide availability of the publication without delay due to production, printing or distribution</li>
<li>Long-term archiving with a permanently stable and citable Internet address</li>
<li>Free publication option for the author</li>
<li>Full text search over the entire publication</li>
<li>Formal and content indexing via the Computer Science Library</li>
<li>Bibliographic reference in the library's online catalog and in national library directories</li>
<li>For authors, INFDok offers the chance to build up a central electronic full-text archive of their publications.</li>
<li>Alert service via RSS feed about the latest publications</li>
<li>Interfaces to Open Access search engines</li>
<li>Access statistics</li>
</ul>
<p>The whole thing is completely free and is maintained by the Computer Science Library, which is known for its accommodating service anyway. I personally think the idea of an Open Access catalog is great – and hey, I'm not alone, see the Open Access Award 2010. I can only strongly promote the project and encourage you to make your work available there. I'm sure the library staff will be happy to advise you on this! In this context, I would like to express my sincere thanks to Ms. Obernesser, who agreed to publish the paper today in sync with my own and was always helpful during the process.</p>
<h2>A Bit More Meta</h2>
<p>With today's submission and publication of the thesis, the weekly progress reports also come to an end. I must say that I had a lot of fun documenting the development! At the beginning there was some naysaying, whether it would be worth it and whether anyone would be interested in reading. I can only say that I would have been happy if someone else had already written down how bachelor theses can be done. The last fb18 thread on the topic showed again that there is a need.</p>
<p>In addition, the reports really helped me stay motivated again and again, especially during the difficult phases. Fortunately, I was able to avoid the unpleasant situation of being idle for a long time and then being pressed for time at the end. In addition, it helped me a lot to reflect on everything several times. I used the reports to think about things beforehand and to reflect on them afterwards and improve them even further. I am quite sure that this has had a positive effect on the overall quality of the thesis. Last but not least, I also got some feedback from you, my readers, which also helped me a lot. Overall, I have never found writing these reports to be a burden, as I have mostly written everything that has come to mind in the form of a simple <a href="https://en.wikipedia.org/wiki/Stream_of_consciousness">stream of consciousness</a>. I don't even type particularly fast, but I rarely put in more than half an hour to an hour a week.</p>
<p>It's always nice when a small amount of work yields a lot, so emulation is strongly encouraged. I'm curious to see how your final projects go. I don't want anyone to think that my way is the only right way. Who will follow my example?</p>
<h2>Into the Future</h2>
<p>The studies go on and the next thesis will come in time. Until then, my blog will be filled again at irregular intervals with content on topics that interest me. Keep an eye on <a href="https://fietkau.blog/">this URL</a> (<a href="https://web.archive.org/web/20131209195055/http://planet.mafiasi.de/">or this</a>) or subscribe to my <a href="https://fietkau.blog/feed.xml">feed</a> so you don't miss anything. If you're interested in its topic, feel free to read and redistribute my bachelor thesis. Thanks a lot for your loyalty! See you around!</p>
<p>– <em>Julian</em></p>
academiaBachelor Thesis Log 22https://fietkau.blog/2010/bachelor_thesis_log_222010-11-30T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Welcome to the penultimate bachelor thesis report. First of all I can announce: The thesis has been successfully finalized and printed and was handed over to my two supervisors today. Nevertheless, I will hand it in at the study office next Monday, as planned, because it is now post-dated to Dec 6th (the final spurt went a bit faster than planned).</p>
<!-- break -->
<h2>Printing and Binding</h2>
<p>Last Saturday I dabbled for the first time with text typesetting for double-sided printing. So far, the work has been optimized for screen reading and single-sided printing, which of course doesn't look so great in bound form. So I did some reading – again, a topic you could spend weeks on – and just set the “<code>twoside</code>” option for my document and experimented a bit with <code>pagestyle</code> and <code>cleardoublepage</code>. After a while I was satisfied. As a PDF it looks pretty poor when browsing page by page, but in the two-page view it's really impressive.</p>
<p>Unfortunately, I have criminally neglected the binding correction, so that after printing and binding there is unpleasantly little white space on the inside margins. Dear writers of final theses and other works: <strong>please remember a suitable binding correction when you set up for double-paged printing.</strong> In LaTeX, it could look like this, for example:</p>
<pre><code>\\documentclass[twoside,BCOR=15mm]{scrartcl}
</code></pre>
<p>Anyway, I'll be smarter for next time, but this time, unfortunately, the print copies are a bit unpleasant to read because of that. A great pity.</p>
<h2>Optimizing for Digital Publishing with LaTeX</h2>
<p>When I make the document available here as a PDF, I take the version for one-sided printing, since this is also best suited for self-printing – the pages are usually just loosely stapled together. I find this version more convenient on the screen as well.</p>
<p>But the PDF publication offers a few special features that might be interesting for you. At a time when publications are increasingly being made digitally, one should not shy away from exploiting the advantages of the medium.</p>
<p><strong>Hyperlinks with <code>hyperref</code>:</strong> The first package that should not be missing in any PDF publication created with LaTeX is <a href="https://ctan.org/pkg/hyperref"><code>hyperref</code></a>. It can work fully automatically, but it can also be customized very nicely. What does <code>hyperref</code> do? It provides the document with internal and external hyperlinks. For example, each chapter heading in the table of contents is clickable in the PDF viewer and leads directly to the corresponding chapter. Every literature abbreviation in the text leads to the corresponding entry in the bibliography, every other reference (e.g. to figures or tables) leads to its respective target and every web link can be opened in the browser with a click. The brightly colored frames that <code>hyperref</code> adds by default are not necessarily nice to look at – but they are not printed by default and can be adjusted or deactivated completely. Seriously, <code>hyperref</code> is very handy for people who read the document digitally, and makes me yearn for a “Back” button in my PDF viewer.</p>
<p><strong>Metadata with <code>hyperxmp</code>:</strong> XMP is a metadata format specified by Adobe which is intended to be used in all kinds of container formats, but is currently most relevant for PDF files as far as I know. The <a href="https://ctan.org/pkg/hyperxmp"><code>hyperxmp</code></a> package allows the willing pdfLaTeX user to add metadata in this format to the document. It integrates with <code>hyperref</code>, which must also be included. This package can be used to add copyright and license information in addition to title, author, keywords, etc. If you ever want to read the license information from the PDF files automatically, it is worth its weight in gold if it is stored in such a standardized format and not just mentioned somewhere in the document. For me it looks like this:</p>
<pre><code>\\hypersetup{
pdfcopyright={This work is licensed to the public under the
Creative Commons Attribution Share-Alike 3.0 License.},
pdflicenseurl={http://creativecommons.org/licenses/by-sa/3.0/}
}
</code></pre>
<p>An explicit mention of the license, which is readable in the document, is of course also added.</p>
<p><strong>File attachments with <code>embedfile</code>:</strong> Every now and then one would like to include arbitrary files with the document, be it source code, images, experiment data or whatever else one can think of. It is not very well-known that the PDF format supports file attachments and that the <a href="https://ctan.org/pkg/embedfile"><code>embedfile</code></a> package makes this feature available for pdfLaTeX. By specifying some metadata about the file (e.g. the MIME type), one can then attach arbitrary files to the PDF document. It is up to the PDF viewer to display these file attachments to the reader somehow. My PDF viewer, <a href="https://wiki.gnome.org/Apps/Evince">evince</a> (now also available for Windows), does this via the sidebar, below the “Attachments” header. For example, I attached some Java source code to my bachelor thesis, so the reader doesn't have to tediously select and copy it with the mouse to test it. A double click on the attached file directy opens a “Save” dialog, that's much nicer.</p>
<p><strong>File attachments with <code>attachfile2</code>:</strong> The <a href="https://www.ctan.org/pkg/attachfile2"><code>attachfile2</code></a> package also allows file attachments, but uses a different PDF feature for this, namely annotations. This means that files are not attached to the document in general, but are included at a specific point. This means that you can then have something like clickable icons in the PDF file (this time actually really as part of the document instead of as an attachment), behind which a file is then hidden. Using <code>attachfile2</code> is not quite as easy, but after some reading I got to a solution where my file annotations work and below my code listings a clickable Java icon is shown. This is also very nice.</p>
<p>In my thesis I combined this variant with <code>embedfile</code> and included my source code both as annotations and as attachments. Now the source code is duplicated (or even triplicated if you count the textual version) in the document, but I consider the few hundred bytes a small price to pay for the usability enhancement.</p>
<p>All of these features are helpful simplifications for people who consume the document digitally, without penalizing print readers. So I encourage anyone who wants to distribute their work digitally to look into the possibilities.</p>
<h2>Status of the Thesis Submission, Future</h2>
<p>Looping back: as already mentioned above, I have handed the thesis to my supervisors in printed form. The three copies for the student office are still at home with the burned CD and will be handed in next Monday. After that, the procedure is outside my control and I'll just be waiting for the final grade.</p>
<p>Next <strong>Monday</strong> (not Tuesday) the thesis will be available to be read and downloaded here. In addition, there will be a few general thoughts and a conclusion from me. And then, well, it'll be over. At least until the next thesis… but for now I'll see you on Monday!</p>
academiaBachelor Thesis Log 21https://fietkau.blog/2010/bachelor_thesis_log_212010-11-23T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Here is the third to last bachelor thesis report, about two weeks before the final submission of the thesis. Not much more will happen to the text. I'm still waiting for some feedback, but otherwise the rest is administrative: printing, binding, submitting, and so on. Today I'll briefly tell you what's in the last section I wrote, and then I'll get to the things that are relevant for the submission of the thesis.</p>
<!-- break -->
<h2>Beyond Teachlets</h2>
<p>This is the provisional title of the last section I wrote last week. It actually turned out to be another two pages in which I mentally remove the absolute core aspects of the teachlets from the concept and see what happens. Partly, this led to quite interesting methodological approaches, but partly the results were not too exciting (we take teachlets and remove the interactivity – oh look, we've invented the lecture…) up to obvious mental dead ends like educational methods without participants.</p>
<p>But I'm not bothered by the open ends, the section was already planned as a bonus and should only serve as a small outlook. And quite honestly: in the meantime, I'm also fed up with the thesis. It was a lot of fun, but I just don't feel like brooding over this text any longer, when it has already been feeling finished to me for two months. Well, now it's almost done officially too.</p>
<h2>Submission Modalities</h2>
<p>When I registered my thesis, I was given December 6 as the deadline – the day three months after the exam committee chair confirmed my registration. On this day at the latest, I have to hand in the printed thesis at the student office, paying attention to the opening hours. In my case, on a Monday, this is only possible in the morning.</p>
<p>The submission should be in triplicate, in written and bound form, as well as on CD. (The examination regulations speak of a “suitable electronic storage medium,” the information sheet of the student office says it should be a CD). Of course, this is stupid if you haven't burned CDs for years and have long since given away the dusty blanks. Capitalism to the rescue: at an electronics chain near me you can actually buy <em>one</em> blank CD (for 70 cents), which is what I did. Let's hope that nothing will go wrong during the burning process…</p>
<p>The declaration that I have not stolen any texts or concealed any sources is something I have also already written, of course including permission for the library to include the thesis in their collection. Since I won't be distributing any more pre-release versions, I've already cleaned up the document a bit: I've added the license reference and the corresponding metadata and removed the watermark. It all looks pretty clean and final already.</p>
<p>I will probably do the binding in the computer science library, since there is the possibility for students to do it for free. I have to hand in three copies, then I will probably make one for each of my supervisors and one for myself. Having amassed a total of 60 pages per copy, that's 360 printed pages, which is not negligible in terms of costs. Actually, I would also like to have them on bleached paper – I know, it's un-ecological, but more attractive. But my little inkjet printer won't be able to do it within a reasonable quality/cost margin. I'll have to find out what the university says about printing that much on the one A4 color printer they have. In terms of price, the method probably can't be beaten. If they give me the bird, I might have to look around for a good but cheap print shop to do it for me. Or do any of you know a better way?</p>
<h2>Future</h2>
<p>This time next week I will draw the cut-off line for the feedback. That means that Axel only has time to give me feedback until then. He has that on his mind though, I already got an email from him yesterday about it. I'll also get feedback from Jan, which I'm really looking forward to.</p>
<p>Next week I'll give you a short report on what feedback I got and what I already implemented or still need to implement. During the rest of the week, the printing and binding will take place. The last report I'll announce right now for one day earlier than usual: it makes sense to write the very last (promise!) report directly on Monday the 6th. I look forward to it. But first, until next week!</p>
academiaBachelor Thesis Log 20https://fietkau.blog/2010/bachelor_thesis_log_202010-11-16T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>And already another week has passed, here comes the last report from (at least according to my current plans) the last writing phase of my thesis. That doesn't mean that it's the last report altogether – there are still a few weeks left until I'm finally done with this undertaking. Unfortunately, not so much has happened in the last week, I haven't been able to find good inroads into the related methods yet. The goal now is to get this done by the weekend.</p>
<!-- break -->
<h2>The First Impression Counts…</h2>
<p>…and the first page of a bachelor thesis is typically a cover page. But what does such a thing actually have to look like? I read the relevant parts of the examination regulations again and found nothing at all – so there are no formal requirements. As I wrote last week, I also have a PDF file floating around that contains “Advice for student theses” from SWT (as of 2003…), but these are recommendations at best.</p>
<p>Most of these recommendations are kinda obvious to boot. That the title of the thesis should be on the cover page is a piece of wisdom I would probably have come up with without any help. The SWT recommendations and I only differ on two points:</p>
<ol>
<li>They recommend to place the matriculation number on the cover sheet. What deeper purpose does that have? In effect, the whole world would know my matriculation number, which is constantly used at our university as a pseudo-anonymous identity key, e.g. in grade lists? If I wasn't the only Julian Fietkau at this university, there would at least be an argument for it. But I am. Therefore: why should I put my matriculation number on my bachelor thesis? Seriously, if no one gives me a reason for that, then I won't do it.</li>
<li>Postal and email addresses. I find the idea of writing my private mailing address on my bachelor thesis a bit ridiculous for similar reasons. Maybe that's more for people who have something like an office at the university. The purpose of an email address, to be able to contact the author, is clearer. But even there my gut feeling goes more in the opposite direction, even if I can't say exactly why. Although I've only changed my main email address twice in my life, email addresses seem so fleeting and anonymous to me, not to mention the difficulties with plain text email address data on the web. How would you handle it? I'm leaning towards not including it. Fortunately, I'm not particularly hard to find on the web (anymore), so that should be the lesser problem.</li>
</ol>
<p>By the way, my cover sheet now contains the nice phrase “Bachelor thesis to obtain the academic degree Bachelor of Science. (B.Sc.).” That was in almost all templates I could find and somehow gives the undertaking a slightly more dignified touch. It also sums up the official purpose of the work. So I included it.</p>
<h2>Future</h2>
<p>Now I still have a few days to be active, probably up to and including the weekend. After that, the whole thing should finally be complete. Feedback from Axel will hopefully come in time, which may result in some minor changes, but more in the context of individual wordings, etc. instead of completely new sections – the end of the line is in sight. Maybe there will be some short term feedback from other people, to whom I will send this version of the work, a few expressions of interest have come. But I don't expect any miracles.</p>
<p>For the next report that means: next Tuesday I can tell whether I was able keep to my plan and manage everything or not. If yes, then I can write something about the content of this last remaining section. See you then!</p>
academiaBachelor Thesis Log 19https://fietkau.blog/2010/bachelor_thesis_log_192010-11-09T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Welcome back to the latest bachelor thesis report, a few hours early today for a change. This will probably be the fourth last one, since I have to hand in the thesis on December 6 at the latest. That actually calls for a new schedule. But before that, here's a general status update.</p>
<!-- break -->
<h2>Completed Bits</h2>
<p>In the last few days I have presented a detailed teachlet procedure on four to five pages (including some illustrations) as indicated two weeks ago. This should especially help teachlet newbies to get an idea of the concept when reading it for the first time. So that point of the list is now checked off.</p>
<p>I also took some time to explain the typical role of the class diagram in teachlets better, in the section about the average teachlet. That's where it makes the most sense in my eyes, since working out class diagrams on the whiteboard is not a teachlet requirement and has nothing to do with the definition, but is more of a tradition from the teachlet workshop.</p>
<p>I also came up with an example of a teachlet that does not require an initial system. I described what a teachlet for the observer pattern could look like, such that a system is developed from scratch in BlueJ. The example is about cameras that can automatically track a soccer ball – I found the idea quite amusing. To put the code into the appendix I was able to use my experience with listings and PDF file attachments in LaTeX again.</p>
<p>Concerning style and small corrections: Axel had noted a few wordings that I had not managed so well, I have now corrected them. In the glossary I had forgotten the “code inspection,” this term is now also explained. I also solved an old problem, which I think I mentioned here a long time ago: in my big diagram, the surfaces so far only differ by colors, which makes the whole thing completely incomprehensible in a black/white printout. That's why I introduced hatching in addition to the colors, which I hope will make it possible to distinguish the categories even in a grayscale world. People with color vision problems may also be appreciative. By the way, this was a lot (<em>a lot</em>) more work with Inkscape than I had expected. Are there any Inkscape hackers here who know a way to do this that doesn't take two hours?</p>
<p>The document has grown to a total of 56 pages at a hefty 820 KB.</p>
<h2>Four Weeks Remain, What's Next?</h2>
<p>I still need to find out whether my cover sheet contains all the important information and meets the formal requirements. I don't think there is a definitive template – the examination regulations state the info that must be on it, and there are guidelines for course papers from SWT that also say something about this. I'll have to consolidate that in the near future.</p>
<p>As far as possible content points are concerned, I now only have one on my list:</p>
<ul>
<li>Describe teachlet-related methods: at the end of the paper, some key points are evaluated as indispensable for teachlets. Perhaps ideas for teachlet-like approaches can be found from this, which I could then briefly illuminate. This should be possible, even if I won't write several pages about it – it's actually not part of my topic, strictly. But we'll see.</li>
</ul>
<p>That could lead to a few more pages of text. I hope I can write it in time and still get feedback on it.</p>
<h2>A New Schedule</h2>
<p>Fortunately, I don't have many special assignments in any courses right before the deadline. That should give me enough opportunity to keep some buffer time in the last days of the thesis. Unfortunately, I might have to manage without external proofreading, but according to Axel's statement, my text is largely issue-free in terms of language. Right, I pay more attention to small details when writing my thesis than I do for a blog post like this.</p>
<p>Let's try a schedule for the next month:</p>
<ul>
<li>From now until approx. November 20: remaining writing tasks</li>
<li>After that until November 30: feedback from Axel and possibly from other interested people</li>
<li>From December 1 to December 5: buffer time, printing and binding</li>
<li><strong>December 6: submission of the thesis</strong></li>
</ul>
<p>That sounds quite feasible to me. I have to pull myself together now, but the bachelor's degree is not supposed to be a cakewalk.</p>
<h2>Future</h2>
<p>I'll be back next week at this time with the status of the rest of the work I've managed to get done by then. I'm curious myself how well this will work out. If you want to have a final pre-release for feedback purposes at the end of the month, feel free to get in touch now. Otherwise see you next Tuesday!</p>
academiaBachelor Thesis Log 18https://fietkau.blog/2010/bachelor_thesis_log_182010-11-03T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>This report comes a little later than planned, because I was on the road for quite a long time last night. As already suspected last week, there is not very much to talk about. Due to other commitments, nothing has happened for my thesis since last Tuesday, so today there is only the report on the <a href="https://fietkau.plus/old_presentations#teachlet_konzept_oberseminar">repeat presentation yesterday</a>.</p>
<!-- break -->
<h2>Presentation in the Oberseminar</h2>
<p>The repeat of my colloquium talk went over well. With one or two new slides in my luggage, I was able to comfortably fill the 90 minutes with a 30-minute talk thanks to the SWT staff's eagerness to discuss. No new insights worth mentioning came out of it for me, but I had the impression that I was able to give some people a good understanding of teachlets – even if the presentation was certainly not perfect.</p>
<p>The place was relatively full, although I had advertised much less this time. You do notice that the date is more accessible when it is not in the lecture-free period. By the way: maybe there will be one or two sentences to read from the audience's perspective on Tien's blog in the next few days.</p>
<p>All in all, I found the presentation successful and, despite the fact that it was voluntary, I do not regret having taken some time for it.</p>
<h2>That's All Folks</h2>
<p>I'm quite certain next week there will be new results for the actual thesis again. Despite more upcoming lectures I should have a bit more time for it from now on than until yesterday. See you!</p>
academiaBachelor Thesis Log 17https://fietkau.blog/2010/bachelor_thesis_log_172010-10-26T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Hello and welcome to a new weekly report. Today I'll tell you about my conversation with Axel about the possibilities to improve the thesis even more. Contrary to my previous plans, a couple of points that are not quite easy have come up that will need a lot of attention. In addition, there will be a repeat of the announcement regarding the repetition of my presentation.</p>
<!-- break -->
<h2>New Goals</h2>
<p>On Friday I was able to sit down with Axel. He took some time to repeatedly assure me that he thinks the work is already very successful without any reservations. Nevertheless, there are still a few things that are not perfect:</p>
<ul>
<li>The introduction could be even simpler and more descriptive. I explain the idea quite abstractly and then start right into the clarification of definitions. This could be made even smoother by discussing a detailed example.</li>
<li>The constructive part of the paper (everything from the definition on) may still be a bit too lean. The evaluation of terms is a good thing, but could be further fleshed out along with the chapter on teachlet variations: constructs could still be described that are no longer teachlets after the term evaluation, but merely similar forms of teaching.</li>
<li>Overarching point: the overall length is somewhat dubious for a bachelor thesis. Axel confirms to me that the thesis is already a well-rounded piece of work and in itself would not need to be longer in terms of content. However, not everyone would potentially share this opinion. For the grading etc. it would be good if the thesis had a few more pages. Hopefully this can be achieved by the previous two points.</li>
</ul>
<p>The rest were a few minor points on individual wordings.</p>
<p>So now I still have something to do – to have only small corrections was probably too much to hope for. Of course I could hand in the work in its current form without it costing me my degree, but I don't like to do half-baked things. That's why I'll probably put some time into it and produce a few added pages of text. I still have a little more than a month.</p>
<p>But I'm not committing to a detailed time schedule now. I haven't really found my rhythm for the new semester yet and I can't say when there will be good time slots in my typical week. I don't have too much time left, so the urgency alone dictates that I will now take care of it in my available free time.</p>
<h2>Bachelor Thesis Presentation</h2>
<p>Next Tuesday in the SWT Oberseminar (November 2nd, 4 pm, D-220) I will present my work a second time. Anyone who missed the first presentation or who would like to see a slightly extended version is welcome to attend. The idea of a short demo teachlet was considered, but I decided against it due to lack of preparation time. Instead, I'll give the usual talk and go into a few individual aspects in more detail that were missed last time due to the 30 minute limit. After all, this lecture is voluntary and ungraded, and I have to set priorities somewhere.</p>
<p>So: I hope to see you next Tuesday in D-220!</p>
<h2>Future</h2>
<p>I can't say yet how much progress I'll make by Tuesday because of an upcoming weekend course. I don't expect much progress until then. It depends a bit on the course of tomorrow, how well I can manage my other tasks and if there is still some time left for the bachelor thesis. In any case, there will be an entry here next Tuesday. See you then!</p>
academiaBachelor Thesis Log 16https://fietkau.blog/2010/bachelor_thesis_log_162010-10-19T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Welcome back to the sixteenth report on my bachelor thesis. Today I will be comparatively brief again. I'll tell you something about the results of the feedback phase (or rather: the absence of results) and about the second time I gave my presentation.</p>
<!-- break -->
<h2>Getting Feedback</h2>
<p>It's always great to get constructive feedback on your own work. In the past, like many others, I was often rather unreceptive to criticism about my projects. That has changed recently, and I'm happy about every suggestion for improvement. At the same time, it's becoming noticeable that it's not that easy to get feedback. On the contrary, I constantly ask for feedback and only very rarely get usable information. Unfortunately, this is also the case with my bachelor thesis.</p>
<p>I wrote to a good number of people asking for feedback on a preliminary version of my thesis. One person responded in writing and two verbally. The result for me was the correction of a single grammar error as well as the acknowledgement of the fuzzy impression of a reader that the text was altogether too short (“for a bachelor thesis,” seemed to be the unspoken addition). There were no comments on the content.</p>
<p>So I got less out of it than I had hoped. At least it turned out to be the right decision not to wait with the feedback from Axel until now. By the way, it'll take until Friday before I get it – he's probably already read the thesis, but he can't schedule a meeting until Friday. It is the beginning of the lecture period, which is certainly no less stressful for a busy lecturer than for me – accordingly, I don't want to hold that against him at all. Nevertheless, it makes me doubt the vision of an iterative approach with short feedback cycles. At the moment, I have no idea what will come out of the meeting on Friday and whether I will have to write a lot in the next weeks. Honestly, I hope it will be limited, since I have a whole bunch of course presentations to prepare this semester (I'm counting five in total right now). We'll see.</p>
<h2>Result Report: Round 2</h2>
<p>I can't go to the SWT Oberseminar all the time this semester because of conflicting events, but nevertheless I will give my talk there again in a more detailed form on <strong>November 2nd</strong>. For those who missed the first one and would like to hear it: this will probably be the last chance.</p>
<p>The Oberseminar will take place on Tuesdays at 4 pm in D-220 at the Informatikum. I would be very happy about numerous visitors this time as well!</p>
<h2>Future</h2>
<p>Next Tuesday I will – <em>finally</em> – get to post the feedback result from Axel for you to read here. I know, I've been promising it for weeks. But I don't see how it could go wrong this time. Further planning will be based on the type and extent of the feedback. So see you then!</p>
academiaBachelor Thesis Log 15https://fietkau.blog/2010/bachelor_thesis_log_152010-10-13T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>This week I welcome you again with some self-inflicted delay, for which I apologize. Hopefully the previous blog post on a more relaxed topic was able bridge the gap. Today, first of all, there's info on the latest developments, which are not major. After that, I'll go into some tips that I find important and that might have helped me if someone had told me them half a year ago. Maybe there's something useful in there for you.</p>
<!-- break -->
<h2>Current Events</h2>
<p>The allocated time for open feedback ends the day after tomorrow. Unfortunately, there is no feedback so far, now I'm still waiting to see if someone will come forward shortly before the end. Axel has agreed to discuss the work with me again at the beginning of next week. I am curious whether there is still much to improve.</p>
<p>After that there will be an editorial phase. When the content work is done, I will take care of things like correcting typos, improving wording and proper typesetting. Especially with the latter, LaTeX already takes a lot of work off my hands, but in some places I will certainly still have to correct by hand.</p>
<h2>Leading a Bachelor Thesis to Success</h2>
<p>Probably the most interesting question for someone who is about to write a bachelor thesis is how to manage the work well and get everything done within the set time frame. After all, no one is born with this ability. Hopefully you have already been practicing this during your studies on a smaller scale. Nevertheless, I would like to drop a few hints on how I approached the work and what helped me stay on schedule.</p>
<p><strong>Have an up-to-date schedule at all times.</strong> I grabbed a calendar even before the topic was set and wrote down when I would have time for the bachelor thesis and when there would be other deadlines within the planned time frame. In addition, I considered early on when the “official” three months would best fit into my course and degree planning. Of course circumstances can change later and dates can shift, but that should not lead you to completely give up on planning from the start. To paraphrase Axel: <em>changing</em> a plan is the least of your problems once you <em>have</em> a plan.</p>
<p><strong>Be flexible</strong>, but <strong>set priorities</strong>. The crux of time management is that new tasks and deadlines are usually heaped on you all the time. “I'll have more time next week” is almost always a fallacy. A degree of uncertainty cannot be avoided in scheduling, especially when you have to coordinate with other people. Nevertheless, it must be clear at all times how important the progress of the bachelor thesis is to you compared to other things. Since it is a considerable amount of work, cuts will certainly have to be made somewhere. In my case, I had other activities during the summer, which meant that the start of my bachelor thesis was rather slow. The topic had been set for a long time, but I barely worked on it because I had more urgent things to do. After that, the work really started and I had to put other things on hold for the time being, which unfortunately had an effect on the OE week, for example. Especially in August and September, I saw the bachelor thesis as my most important task and dropped many other activities.</p>
<p><strong>Seek out and keep in contact with your supervisor.</strong> Their job is to give you all the help you need to write a good thesis. Also, let's not kid ourselves: your examiners will determine the grade that is most important for your bachelor's degree. Therefore, don't let yourself be fobbed off with half-baked information and future promises. You should maintain close contact with your first supervisor from the beginning and get regular feedback on your progress. Some people have a tendency to think that they can work quietly for weeks on something great and then show up as a superhero with the finished miracle work. Some supervisors encourage this notion by avoiding regular contact to save their own time. However, it is more likely that you will fall flat on your face if this is your first “real” academic work. Working on my thesis, I had the situation again and again that I didn't know whether I was doing something right or whether something would work the way I imagined it. This is exactly the kind of question your first supervisor is there for. Meet with them regularly, at least every two to three weeks, and keep in touch in between, e.g. via email. At each meeting with your supervisor, in addition to the content, the following questions should also be discussed:</p>
<ul>
<li>Is the progress since the last meeting satisfactory? Does the timing need to be adjusted?</li>
<li>Is there room for improvement in the candidate's way of working?</li>
<li>Does the collaboration continue to work? Are the candidate and supervisor both satisfied with each other or does anything need clarification?</li>
</ul>
<p>If anyone wants to delve deeper into the topic: Axel has published a paper on this that I highly recommend. It is meant to be talked through with your supervisor to see which of the patterns you both want to implement. You can download it from SWT: <a href="https://ceur-ws.org/Vol-610/paper16.pdf">Patterns for Supervising Thesis Projects</a> (PDF)</p>
<p><strong>Learn about the formal bureaucratic bits.</strong> Ask students from higher semesters how they wrote their bachelor thesis (ideally, find some who worked with the same supervisor as you). Read the examination regulations, which include deadlines and other formalities. Find out when you have to hand in which from and which signature. (Hint: registration of the thesis with signature of both supervisors at the beginning of the official duration, protocol of the colloquium presentation with your data pre-filled ready for the colloquium date, submission of the thesis when it is finished with the necessary written affirmations from you). Search for guidelines for articles and term papers for your supervisor's field of work.</p>
<p><strong>Get motivated by getting others involved.</strong> Think about who might be interested in your thesis and involve them. You have to write it on your own, but that doesn't mean that ideas and feedback from as many people as possible are forbidden – on the contrary, it is encouraged. Think about how you can turn your thesis process into something helpful for other people too. Maybe you'll write reports like I did here. Especially in the heavier phases, a good part of my motivation came from the fact that I'm writing my thesis not only for myself, but also for all the people in the world who are interested in teachlets, and for the dozens of people who read these reports because they are interested in the creation of my bachelor thesis. Find out about Open Access. False modesty is not a good reason to let your work rot on your hard drive. Free access to science improves the world, so make your science freely available.</p>
<h2>Future</h2>
<p>A few more days of waiting, then I'll get at least the feedback from Axel and maybe more. Next Tuesday I will sum up the feedback phase and tell you what I still want to work on in detail. Maybe there will be an updated schedule again. See you next Tuesday!</p>
academiaPlaying Around with Striped Imageshttps://fietkau.blog/2010/playing_around_striped_images2010-10-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Today I've got something completely different for you again. I want to show you an idea I experimented with some time ago, which has to do with the perception of partially hidden images. The idea comes from a video I saw a long time ago. There someone created this effect with black silhouettes. At this point I'll be brave and try it directly with a color image, albeit a simple one. Here is a spiral:</p>
<!-- break -->
<figure>
<img src="https://fietkau.blog/assets/spiral.png" alt="A red and white spiral">
</figure>
<p>For this experiment, we need an image that is easy to understand and not too detailed. This spiral is well suited for that. However, we also need some movement in the image, so we also make the spiral rotate around its origin:</p>
<figure>
<img src="https://fietkau.blog/assets/spiral.gif" alt="The same spiral as above, now rotating around its center point">
</figure>
<p>This animation consists of eight individual images, which will be relevant later.</p>
<p>Now, over millions of years of evolution, the human brain has developed the ability to recognize even partially hidden shapes and objects. Exactly how this works has not been conclusively clarified. The reason for this is so that the brain will not require the complete input of the eyes for recognition processes that are important for survival to function, for example, in the dark with only partially available image information. The effect can also be brought out purposefully to evoke a shape that does not really exist at all, as with the famous <a href="https://scienceblogs.com/mixingmemory/2007/05/20/cool-visual-illusions-kanizsas">triangle illusion</a>. Even if we obscure 7/8 of the (unmoving) spiral, we still believe to see a spiral.</p>
<figure>
<img src="https://fietkau.blog/assets/spiral_masked.png" alt="The same spiral as above, unmoving and now covered by wide black vertical bars">
</figure>
<p>Our brain still “sees” the subject and connects the seemingly hidden edges. This works even though the information content of the image (i.e. the number of pixels contributing to the image) has been reduced by 87.5%!</p>
<p>Of course, this doesn't work with every subject – on the contrary, for most of all possible images it works too poorly to be presentable. The “compression” comes from the fact that the viewer has to fill the gaps in the image with information they already know. (Everyone knows what a spiral looks like, and does so subconsciously.) The principle fails for unfamiliar images or those with lots of small details.</p>
<p>However, here's what we can do with our spiral: we can place the mask on a blank white image and project some stripes of our spiral image only through the thin gaps of the mask. Then we can move the mask one gap width to the left or right, so that the stripes we just placed are just covered. Then we can project another image through the gaps in the mask onto the (now white again) stripes. In this example, we limit ourselves to inserting the matching stripes of the next frame of the animation there. We can continue this principle and insert six more frames until we reach the original image again (shifted by one “bar” of the mask).</p>
<p>When we are done, the image under the mask looks pretty much like this:</p>
<figure>
<img src="https://fietkau.blog/assets/spiral_processed.png" alt="Composite image that consists of vertical stripes of the spiral at different rotations">
</figure>
<p>And now for the highlight: if we move the mask slowly to the left or right, it looks as if the spiral is rotating, although there is only a single rigid image under the mask.</p>
<figure>
<img src="https://fietkau.blog/assets/spiral_processed.gif" alt="The same image as above, only now there are black bars slowly moving across it horizontally. Visually, this creates an impression of a rotating spiral.">
</figure>
<p>There are no tricks or fakery here – the only thing that moves in the animation above is the mask. The underlying image, which is composed of the individual frames of the spiral animation, is completely rigid.</p>
<p>If you still don't believe me based on the prefabricated animation, feel free to play around with it yourself. The following is a bit of HTML/CSS code that puts the mask over the composite image so that it can be moved by scrollbar.</p>
<figure class="spiral1">
<div class="spiral2">
Oops, apparently your browser or feed reader can't display this. If you want to see the result, please <a href="https://fietkau.blog/2010/playing_around_striped_images">visit this blog post on my website</a> with a modern, CSS-enabled browser.
</div>
</figure>
<p>What can you do with this idea? I haven't had a breakthrough idea for possible uses yet. However, it works fine in printed form on paper, unlike GIF animations. Maybe there will be such motifs as postcards someday… As I said, it's a nice little gimmick, I think.</p>
Bachelor Thesis Log 14https://fietkau.blog/2010/bachelor_thesis_log_142010-10-05T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>A new Tuesday, a new weekly report. Welcome back! Today it's primarily about my colloquium talk yesterday, but there's also a short general update.</p>
<!-- break -->
<h2>Triple Colloquium</h2>
<p>Yesterday, October 4 at 5:30 PM, I gave my colloquium lecture in D-220. The date came up because besides me two bachelor students wanted to finish their presentations (or were required due to deadlines), who were also supervised by Axel Schmolitzky and Horst Oberquelle. I found these two talks on agile methods vs. software quality and consuming/producing in BlueJ quite interesting and worthwhile – actually a pity that in the end not so many visitors were present. Anyway, I was the last one presenting that afternoon. Each of us was supposed to present for about 30 minutes and answer questions and engage in discussion for 15 minutes, which I think we all did quite well.</p>
<p><a href="https://fietkau.plus/old_presentations#teachlet_konzept">My presentation</a> went well. I've gotten pretty good at estimating how much content I can manage in a certain time frame. I had made a few time markings on my printed set of slides, but in the heat of the moment I completely ignored them. I was told afterwards that I had talked for a bit longer than half an hour, probably around 35 minutes. I can live with that and can confirm nobody fell asleep.</p>
<p>So now I am waiting for the grade of the presentation. Axel has already let me know that my presentation was probably quite satisfactory from the examiner's point of view. Presumably he and Horst Oberquelle will fill out the protocol sheet some time these days and hand it in, so that the partial grade will eventually appear in our universally appreciated campus management system.</p>
<p>By the way, those who missed the lecture will get a second chance. I will probably give it one more time on a slightly larger scale in one of the first weeks of lectures in the SWT Oberseminar (on Tuesdays at 4 PM). As soon as there is a date, I will of course announce it here.</p>
<h2>Purpose of a Definition</h2>
<p>During the talk, a question from the audience drew my attention to an interesting discrepancy that I would like to share with you: During the brainstorming, <strong>choreography</strong> was declared important but not indispensable. Yet it shows up in my updated definition and is mentioned there as part of the documentation of a teachlet. What explains this contradiction? At first glance, it seems that either the categorization of the term or the definition must be flawed. However, there is a reasonable and, I hope, understandable explanation for this.</p>
<p>The categorization of the term results from an exclusively pragmatic, reductionist and result-oriented view of the importance of the aspects. In this sense, we have evaluated the choreography as not indispensable, since it is perfectly possible to perform a teachlet without having planned a precise choreography. It is certainly not recommended and it brings some difficulties, for example, the total duration will be impossible to estimate and in the worst case it will far exceed the targeted time slot. But: it is possible. You can leave out the planned-out choreography and you still have a teachlet. That is one perspective.</p>
<p>Although the definition is assembled from the central terms, it has a deeper purpose: the definition is what should illuminate the concept to a teachlet newcomer. It is meant to give someone who knows nothing about the subject a purposeful, comprehensive, and at the same time concise impression of what a teachlet is. In this sense, it has a normative function. First and foremost, it should clearly show what a teachlet should look like – and only secondarily what it can get away with in order to be called a teachlet. That is the other perspective.</p>
<figure>
<img src="https://fietkau.blog/assets/schwarzwaelder.jpg" alt="Black Forest Cake">
</figure>
<p>Let's imagine a <a href="https://en.wikipedia.org/wiki/Black_Forest_gateau">Black Forest Cake</a>. Delicious! In addition to layers, cream, cherries and chocolate dough, a cake like this, at least in my eyes, must also have chocolate shavings on top, which are so much fun to bite into. What do I do if I want to make a Black Forest cake and don't have chocolate shavings? The supermarkets are closed and there's no way to organize any more? Sure, I'll just make my cake without chocolate shavings for once. Maybe I'll use the cheap chocolate sprinkles instead. No one will seriously argue that what I'm making isn't a Black Forest cake – the delicious dough, the cream, the cherries… obviously it's a Black Forest cake. Maybe not the tastiest of them all, but still. But if someone asks me how to make Black Forest cake? Then chocolate shavings are of course one of the most important ingredients! They are so much a part of the typical look, feel, and taste of Schwarzwälder Kirschtorte that they absolutely have to be a central ingredient in the recipe. (Experimenting with chocolate sprinkles is not recommended.)</p>
<p>Hopefully this has made it clear how I justify this difference between the term categorization and the wording of the definition. Thanks to Lorna for this wonderful question!</p>
<h2>Feedback Status</h2>
<p>At the end of last week I sent out my feedback request mail. The time schedule has changed a bit because I realized while writing that one week is actually not that much time for it. So I gave the people two weeks (until October 15th).</p>
<p>Unfortunately this means that I can't wait with Axel's feedback until afterwards, because he will start teaching again with the beginning of the lecture period on October 18 and he won't want to make any commitments for advisory tasks in the first weeks of the semester, which I can understand very well. So Axel will give his feedback now after all based on the first iteration of the thesis. Since I don't know if anyone else will even get back to me (so far there is no feedback), this is probably not a problem. Due to the uncertain waiting time for me, this won't change anything else about the planned finishing date in the area of the first half of November (hopefully).</p>
<h2>Future</h2>
<p>Thus, at the moment I have nothing concrete to do for my bachelor thesis. So it may be that not much happens until next week – but there will be a weekly report for sure anyway, if needed I'll chat a little about looking back at the process of creating this thing. See you then!</p>
academiaBachelor Thesis Log 13https://fietkau.blog/2010/bachelor_thesis_log_132010-09-28T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Welcome to the last weekly report on iteration 1 of my bachelor thesis. Not to beat around the bush: since yesterday evening I consider it <strong>finished</strong> for the first time! That means: all chapters are written, there are no more gaps in the manuscript. On the other hand, that doesn't mean there's nothing left to improve.</p>
<p>At the moment, I feel relieved that the work is now at this level, which gives me some relaxation. I am even a few days ahead of my schedule, which actually foresees the completion of the work only for the day after tomorrow.</p>
<!-- break -->
<p>At the moment, I'm most worried about the proverbial operational blindness. I've read the text of my bachelor thesis so many times in the last weeks and months that I <em>can't</em> read it anymore – I keep skipping whole paragraphs because I still know them by heart. This makes it very difficult for me to look at it critically. I would actually like to, because I wrote the chapters in a completely different order than they are in the paper now. This is of course a breeding ground for sequence errors and implicit forward references. Unfortunately, I have to wait at least a few more days (if not weeks) until I can read the text “properly” again.</p>
<h2>What Happens Next?</h2>
<p>A look at the schedule in the last report reveals that the next items are the feedback week from October 1 to 8 and the colloquium talk on October 4. I will prepare for the talk from now on, so to speak, and draft some slides. It will take place next Monday. So if you want to be there, now is your last chance to let me know.</p>
<p>The feedback week starts next Friday. On that day I will send out the then current version of the thesis (I might still correct some small things until then) to quite a few people. I've decided to send an email to everyone who has expressed some kind of interest and let them decide if they want to have a look at it and give me some feedback. Maybe I'll get some feedback, maybe not. If I get any, I'll work it in starting October 8. After that I'll continue with feedback from Axel, for the rest see the planning in the last report.</p>
<p>Of course you can still express interest in the work and be provided with a preview if you like. Just contact me for that.</p>
<h2>Continuing These Reports</h2>
<p>The completion of the core work phase does not end the time of these weekly reports. My goal is to continue them until the final submission of the work. In the future reports, apart from the current status of the feedback cycles, I will mainly provide further reflections on the process. Maybe some tips and hints for future thesis writers will fall out in the process, we'll see. I don't really know yet myself.</p>
<p>We'll do nothing that involves thinking for today (sorry, I need a little break), so here's a bit of useless knowledge:</p>
<p>My thesis is currently 47 A4 pages long in total, including cover page, table of contents and appendix. The PDF file is exactly 666886 bytes in size. (Should that give me pause for thought?) Of the 47 pages, 18 fall to my core text. Another 24 comprise the interview transcripts. One page is taken up by an email report in the appendix, and another by the single, solitary figure in the paper. Apart from that, there are only the cover page, table of contents, and bibliography.</p>
<p>After converting to plain text and automatic counting, the paper currently consists of 17730 words including the appendix and 6126 without it. Not as much as I thought actually. The main LaTeX document has 1178 lines, but this does not include the interviews. Of these 1178 lines, 36 are comments. Of the comments, 7 (i.e. less than 20%) are “real” comments, the rest are commented out lines of code. Good thing my LaTeX doesn't usually have any code complexity worth mentioning.</p>
<p>Here's a list of the most frequently used words and their number in my core text, minus articles, prepositions, particles, and other boring stuff: teachlets (84), participants (60), teachlet (49), moderator (39), software (31), participants (29), definition (26)</p>
<h2>Future</h2>
<p>Next Tuesday I will tell you about the colloquium lecture and about the feedback week by that point. I'm curious to see how both of these things work out. See you then!</p>
<p><strong>Addendum:</strong> I just sent the mail for the feedback. While writing it, I noticed that one week is actually quite short. So I spontaneously extended the feedback week to two weeks. Let's see if I get any answers.</p>
academiaBachelor Thesis Log 12https://fietkau.blog/2010/bachelor_thesis_log_122010-09-21T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>It's Tuesday and there's a whole bunch of news related to my planning for the next weeks. In terms of new content, there is not so much to read this week. Short status update: chapter 5 is almost completely finished, chapters 3 and 6 (both not very difficult) and references to similar methods are still missing. So as not to bore you with unnecessary details, here comes the roadmap for the home stretch.</p>
<!-- break -->
<h2>Timeline for the Upcoming Weeks</h2>
<p>Today is September 21.</p>
<ul>
<li><strong>October 1:</strong> The thesis should be fully written by then, i.e. I want to have all chapters in a basically presentable form. Iteration 1.</li>
<li><strong>October 1 to 8:</strong> Open feedback week, in which I want to distribute the current state to as many people as possible, in order to get some feedback if necessary. <strong>Important info on this below!</strong> <em>(For me, hopefully this plan will enable a few days of vacation.)</em></li>
<li><strong>October 4:</strong> My colloquium talk. <strong>Important info on this below.</strong></li>
<li><strong>October 8 to 11:</strong> In this timeframe I would like to implement the feedback I'll have hopefully received by then into the text.</li>
<li><strong>October 12:</strong> The finished and reflected work (iteration 2) will go to Axel, my first supervisor, for detailed feedback.</li>
<li><strong>Once Axel provides me with his feedback:</strong> It will also be incorporated.</li>
<li><strong>After that:</strong> Proofreading (and asking others to proofread) the entire text, print and bind.</li>
<li><strong>Probably end of October:</strong> Official submission of the final finished paper (iteration 3) to the examination office. Publication here under CC-BY-SA.</li>
</ul>
<h2>Feedback Week</h2>
<p>During the first week of October, I would like it if iteration 1 of my thesis could get into the hands of people already. My very selfish motivation for this is that I hope to get some feedback. However, that doesn't mean that I'll only release the text to people who promise to give me feedback. Would you like to have a look at my bachelor thesis before I hand it in? It's not binding and I won't be breathing down your neck with feedback requests, I promise. We just agree that you let me know if you notice anything that I can improve. Deal? If so, get back to me.</p>
<p>Why do I do the feedback round with Axel only at the very end and in isolation? Well, because Axel wanted it that way. He thinks it's the usual way for supervisor feedback, and I don't feel strongly either way.</p>
<h2>Colloquium Lecture on Oct 4 at 5:30 PM</h2>
<p>On October 4 (which is a Monday, the second to last one before lectures start and thus the last one before the OE week) at 5:30 PM my colloquium lecture will take place, which accounts for 10% of my bachelor thesis grade. I will try to present the content of my thesis within 30 minutes. This will be followed by a Q&A period, where I want to face the questions of the academic establishment and prove that my topic is not nonsense. I would like to cordially invite you to this! This is the opportunity to finally ask me all those questions about teachlets that have been piling up for you. Of course, I'm also happy to reflect with you on the process of writing or the method of these blog posts. But you can also just come along, listen, and eat cookies.</p>
<p><strong>If you want to come to my colloquium talk, let me know as soon as possible! (!!!)</strong> This is really important because I'm only expecting an audience size of 4 people so far. So let me know if you're coming so I can make sure the room has enough seats! Also, I do need to know approximately how many cookies to bring. So don't be shy. Best write me a comment right here on this post. I'm up for a bit of a crowd.</p>
<p>By the way, there are two colloquium talks by fellow students right before. I don't know if they want to have more people there, so I don't want to advertise directly.</p>
<h2>Conclusion</h2>
<p>I think the message for this week is clear, right? Come to my presentation and bring your friends. Next Tuesday, I'll have a report from the last big writing marathon. See you then!</p>
academiaMusic to Look Forward tohttps://fietkau.blog/2010/music_to_look_forward_to2010-09-18T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>You could almost think that my blog exists only for my bachelor thesis. Of course, this should not be the case, so today I'll open a completely different, non-computer-science topic, namely music. I don't know if you're interested, but if not, I guess I'll find out… and you can decide to skip this entry. But the fact that a new album of my favorite band is coming up is a good occasion for a bit of advertising, isn't it?</p>
<!-- break -->
<p>On October 1st, in two weeks, it is time: The new album “Heilig” by the band <strong><a href="https://www.letzte-instanz.de/">Letzte Instanz</a></strong> will be released and I'm looking forward to it as if it was Christmas. If you know me personally, you might have noticed that I sometimes – quite rarely – wear band shirts. And if it's not the one with the <a href="https://www.amazon.de/dp/B000A7X87A">“Nord Nord Ost” cover motif</a> by Subway to Sally (which is way too large for me now anyway), it's most certainly one of my many Letzte Instanz shirts. I have a fairly broad taste in music, or so I tell myself. But this band has been consistently at the top of my personal list since 2006.</p>
<figure>
<img src="https://fietkau.blog/assets/letzte_instanz.jpg" alt="Letzte Instanz press photo">
</figure>
<p>Letzte Instanz has been around for quite a long time, but they have also had many line-up changes and thus ensuing changes in style. If you like the albums from after 2006, you don't necessarily like the ones from before 2004 and vice versa. I also like the old stuff and I own a couple of discs from that time, but musically I think they are less mature. What kind of music does Letzte Instanz make today? I would describe it as gothic-influenced alternative rock. Due to the usual rock line-up with a singer, guitars, bass and drums, the whole thing has a lot of boom, and with the additional strings (violin and cello) it gets a slightly symphonic, orchestral touch. The lyrics are mostly in German and since the change of the main vocalist they have evolved away from social criticism and towards philosophy and poetry, a change which I realize not everyone may love.</p>
<p>So now there's a new album coming soon. Here's a list of the samples currently available:</p>
<ul>
<li>At <a href="https://www.jpc.de/jpcng/poprock/detail/-/art/Letzte-Instanz-Heilig-Jewelcase/hnum/1529343">jpc</a> (or Sony Music, they have the same snippets) you can listen to short samples of the whole album. At the moment I'm most looking forward to <em>Unsterblich</em> and <em>Eismeer</em>, but it fluctuates.</li>
<li>On <a href="https://www.letzte-instanz.de/">the band's website</a>, you can find the video for the single release <em>Schau in mein Gesicht</em>.</li>
<li>Amazon has the track <a href="https://www.amazon.de/dp/B0042K88EE"><em>Dein Gott</em></a> available for free download as an MP3.</li>
</ul>
<p>By the way, I'm not a big fan of the cover motif, which is why I'm not showing it here. Ingo Römling can draw very well, but I find the motif a bit too trite and too clichéd. At least it's a little better than <a href="https://www.amazon.de/dp/B001P0AYXM">the previous one</a>.</p>
<p>On November 2nd the band will be here in Hamburg, at Grünspan. I'll definitely be there. Anyone else interested?</p>
<p>Do you know any other bands that play this kind of music? I know a handful of rock bands that also work with string instruments, but none that bring it together this well. Are there any other bands (aside from <a href="http://www.chamber-online.de/">Chamber</a> and <a href="https://www.apocalyptica.com/">Apocalyptica</a>) that showcase the strings well? I would be very happy to hear any other tips.</p>
Bachelor Thesis Log 11https://fietkau.blog/2010/bachelor_thesis_log_112010-09-14T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>The regular Tuesday report is rather short today. I just put the last one online last Friday. Since then not much has happened for the following reason: due to exhaustion I took the weekend off, visited my family and rested a bit. Yesterday morning, the outstanding interviews with Carola Lilienthal and Christian Späh were completed. I'm two thirds done with transcribing the interviews, more about that below.</p>
<!-- break -->
<h2>Procedure and Results of the Interviews</h2>
<p>Carola and Christian are (in contrast to Axel) external people who are hardly or not at all involved in my thesis. This makes them thematically less biased. This is even more true for Carola than for Christian, since he was at least present at the brainstorming meeting in the summer and has a rough idea of what I am working on.</p>
<p>Both interviews took place in the offices of the respective interviewee. The one with Carola lasted just under 20 minutes, the one with Christian just under 30 minutes. I recorded both with my laptop, which worked sufficiently well. After the interview with Axel, I made some minor adjustments to the guidelines:</p>
<ol>
<li>What experiences have you already had with the teachlet concept?</li>
<li>How did you experience teachlets compared to other forms of teaching you know?</li>
<li>What advantages do you see in them? What contexts are well-suited for them?</li>
<li>Where do you see limitations of the concept? Where would you definitely not use teachlets?</li>
<li>Do you have any hints for future teachlet moderators? What is not yet established knowledge, but should be considered in any case?</li>
</ol>
<p>Overall, both were able to respond to the questions very well and in detail, and some valuable ideas came together. Some answers were fundamentally different, others unexpectedly consistent. The interview with Axel was already typed up, the one with Carola is now as well. I haven't finished the one with Christian yet, but that should be done tomorrow. After that I will send the transcripts to all three so they can give their OK for publication. Are you interested in seeing them in advance? I could upload them when the time comes. Otherwise they will be published together with the rest of the thesis next month.</p>
<p>By the way: the transcript of the interview with Axel has about 4300 words, the one with Carola about 2700.</p>
<h2>Future</h2>
<p>That's it again for this report. I don't want to make a hard commitment for when the next one will come, but by then there will be news about the chapters again, I promise. See you then!</p>
academiaBachelor Thesis Log 10https://fietkau.blog/2010/bachelor_thesis_log_102010-09-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Today there is a report in between, because it is worthwhile again. There is the glossary that I wrote for the paper – where people who have no idea about teachlets can finally have their say again. There are also news from the study office about the master admission.</p>
<!-- break -->
<h2>Glossary</h2>
<p>The following list of terms comes one-to-one from the current draft of my bachelor thesis. I'm putting it here in its entirety because it's not too long and because I hope you can point out problems to me. Are the terms explained well enough? Where are there still ambiguities? Are there any other terms that may have appeared here on the blog at some point that you would like an explanation of?</p>
<ul>
<li><strong>Initial system</strong>: Software that is executable, but deficient in a very specific way. Usually this is specifically designed for a <em>teachlet</em>, so that through successful practical application of the <em>learning objective</em> of the teachlet (e.g., a particular object-oriented design pattern), the said deficit of the software can be remedied by the <em>participants</em> in the course of the <em>teachlet unit</em>.</li>
<li><strong>Author</strong>: A <em>teachlet</em> includes one or more authors who first conceived and documented the teachlet. Typically, the author is also the <em>moderator</em> in the initial performance of a teachlet. However, a moderator may also perform teachlets by other authors.</li>
<li><strong>Choreography</strong>: A timed schedule for performances of a particular <em>teachlet</em> that specifies the flow and time limits for individual sections.</li>
<li><strong>Result system</strong>: The software as developed in a <em>teachlet unit</em> by the <em>participants</em> from the <em>initial system</em>. The result system is associated with the teachlet unit and is created anew each time the <em>teachlet</em> is performed. Unlike the <em>result system</em>, the result system is not complete and error-free in every case.</li>
<li><strong>Learning objective</strong>: Each <em>teachlet</em> has a learning objective. Often this is an object-oriented design pattern, but also e.g. programming language concepts and implementations of algorithms are possible. Within a <em>teachlet</em> unit, the <em>participants</em> should both experience the learning objective theoretically and practically apply it to the <em>result system</em>.</li>
<li><strong>Moderator</strong>: A <em>teachlet unit</em> is led by one or more moderators. They must be very familiar with the <em>teachlet</em> and its <em>learning objective</em> in order to successfully guide the <em>participants</em> through the <em>choreography</em> within the time frame, without taking away more freedom than necessary.</li>
<li><strong>Teachlet</strong>: 1. A teaching concept designed for interactivity, defined in more detail in the previous section and in chapter 4. 2. a largely static collection of all documents and software that make it possible to deliver a <em>teachlet unit</em> on a given topic, designed by the <em>author</em> or authors of that teachlet. It is recommended [Sch05] to assign a version number for each teachlet, by which it can be identified how often and how strongly this teachlet was already revised.</li>
<li><strong>Teachlet unit</strong>: A specific performance of a <em>teachlet</em> in a particular teaching unit. Alternatively: <em>teachlet performance</em>*.</li>
<li><strong>Teachlet workshop</strong>: A teachlet workshop is “a seminar-style semester event in which <em>participants</em> develop new <em>teachlets</em>. To do this, each participant must address at least one <em>learning objective</em> and design a teachlet for that learning objective. The new teachlets are tried out on the workshop participants themselves and then analyzed and evaluated by the participants.” [Sch05] Thus, in teachlet workshops, the focus is on feedback on the newly created teachlets. For this purpose, <em>trackers</em> are usually used there as well.</li>
<li><strong>Participants</strong>: A <em>teachlet unit</em> includes at least one, typically several, participants. The participants sit in the plenum and shape the framework set by the <em>moderator</em> through contributions and discussions. Usually, both active and passive participants can be observed in a teachlet unit. Active participants express their opinion more strongly and defend their position, while passive participants largely listen.</li>
<li><strong>Tracker</strong>: A role that is especially important in the <em>teachlet workshop</em>. The tracker comes from among the <em>participants</em> and has the task of creating a time log of the <em>teachlet</em>, which the <em>facilitator</em> can use afterwards to check the practicality of the <em>choreography</em>. For this purpose, the tracker records at what time the different phases of the teachlet start and end.</li>
<li><strong>Target system</strong>: A version of the software under consideration in which the <em>teaching goal</em> has been correctly implemented. The target system is usually created by the <em>author</em> of the teachlet and is used as a stopgap in case the <em>participants</em> do not succeed in implementing it within the time.</li>
</ul>
<h2>Admission to the Computer Science Master's Programme</h2>
<p>All those who are affected have presumably already read the email: we are lucky this year after all and theoretically have time until April 1 to deliver everything. Not that I want to make excessive use of it… but at least that means that October 4 is unproblematic as a date for the presentation on the thesis and that I don't have to rush quite as much as I feared. So: Keep Oct 4 free if you want to listen to the presentation.</p>
<p>By the way: yesterday I received the copy of the registration of the thesis with the signature of the chairman of the examination board. Officially, I have time until December 6. But don't worry, I'll be done by early/mid October at the latest.</p>
<h2>Chapter Status</h2>
<p>Actually, I was planning to spare you with a new outline, since only a few new subchapters have been added. But then I thought it might be exciting to get an overview of written and pending chapters. So here comes another current outline, in which <strong>the chapters still to be written</strong> are shown in bold.</p>
<ol>
<li>Introduction
<ul>
<li>Goals of this thesis</li>
</ul>
</li>
<li>The teachlet concept
<ul>
<li>Definitions</li>
<li><strong>Delimitation from similar methods</strong></li>
</ul>
</li>
<li><strong>Prior teachlet practice</strong>
<ul>
<li><strong>Reports from moderators</strong></li>
</ul>
</li>
<li>Definition
<ul>
<li>The original definition and its limitations</li>
<li>Updated definition</li>
</ul>
</li>
<li>Limits and possibilities
<ul>
<li>The average teachlet</li>
<li><strong>Exclusion criteria and limits</strong> <em>(in progress)</em></li>
<li><strong>Cariants and possibilities</strong></li>
</ul>
</li>
<li><strong>Conclusion</strong>
<ul>
<li><strong>Future</strong></li>
</ul>
</li>
</ol>
<p>As you can see, it's going quite well. Look forward to the interview reports on Tuesday!</p>
academiaBachelor Thesis Log 9https://fietkau.blog/2010/bachelor_thesis_log_92010-09-07T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Most of the decisions I have made so far in the planning and execution of my bachelor's thesis have not come easily to me. I am someone who has certain difficulties deciding between several viable alternatives. Sometimes I tend to stand like the donkey between the two haystacks, because all available options somehow have advantages and disadvantages and I can't bring myself to choose just one of them. It's always a pleasant and enjoyable change of pace when I think: this choice is really clearly and indisputably better than that one; when a decision is really easy.</p>
<p>Yesterday that happened to me again.</p>
<!-- break -->
<h2>Outline (The Third)</h2>
<p>Until yesterday, I had only ever worked on the outline with the idea of what it should look like overall and how something like that is usually laid out. I have oriented myself to existing works and tips from various websites. This was overall not very satisfying and seemed (paraphrasing my supervisor) a bit fuzzy and jumbled.</p>
<p>While writing the planned chapters and with feedback on my outline in mind, I had a spontaneous idea. What if I completely broke away from conventions and overall ideas and built an outline solely on the basis of which chapters I wanted to build back relationships between. Most obvious example: to criticize and argue against the teachlet definition, I want to refer to teachlet practice and presenter reports. Therefore, it is probably useful to classify them before the definition.</p>
<p>With this approach, my chapters then fit together very quickly like a puzzle. Here is the current state of the outline:</p>
<ol>
<li>Introduction
<ul>
<li>Goals of this thesis</li>
</ul>
</li>
<li>The teachlet concept
<ul>
<li>Definitions</li>
<li>Delimitation from similar methods</li>
</ul>
</li>
<li>Prior teachlet practice
<ul>
<li>Reports from moderators</li>
</ul>
</li>
<li>Definition
<ul>
<li>The original definition and its limitations</li>
<li>Updated definition</li>
</ul>
</li>
<li>Limits and possibilities</li>
<li>Conclusion</li>
</ol>
<p>As you can see, I have also renamed a few chapters. What was called “Planning Game” yesterday is now called <em>Limits and Possibilities</em> after consultation with Axel. This expresses the subject of the chapter quite well. Probably the chapter will be further subdivided when the time comes.</p>
<p>Overall, I feel very comfortable with this structure. It feels coherent and even conforms to the “first analytical, then constructive” template, which in my case cuts the fourth chapter in half. This is still analytical at the beginning, but then leads into the constructive part.</p>
<p>Axel confirms my euphoria and describes this structure as much more successful than the previous one, which of course encourages me further. From this point on, I actually expect only minor changes.</p>
<p>What do we learn from this? Don't blindly do what others do – do what makes sense for you.</p>
<h2>Reporting from the Interview Afternoon</h2>
<p>Today I had the interview appointments with Axel and Carola.</p>
<p>The interview with Axel went very well. We did it in his office and I recorded it with my laptop. I have an OGG/Vorbis file here that contains about 35 minutes of interview and which now wants to be transcribed. As it happens, I actually know a bit about transcribing thanks to my linguistics elective. However, I will probably not create a <a href="https://exmaralda.org/de/hiat/">HIAT</a> transcription like in my linguistics course, but “only” an approximate transcription without “um”s and other filler words as well as with a pinch of artistic license in punctuation. I'll give it a try and see how well it works. Does anyone know of any usable speech-to-text software?</p>
<p>As for content, Axel mentioned many good and helpful aspects. Much of it I already knew, of course, but it's certainly not to be underestimated to now have it in a form where I can refer to it and quote from it. This will hopefully allow me to write the paper less subjectively and not have to refer so much to my own unsubstantiated memories and experiences.</p>
<p>I'll send the transcript of the interview back to Axel after it's done, so he can look over it again to see if anything needs to be shortened before publication. After that I'll put it online here. I have to ask him as well whether I can put it under a <a href="https://www.creativecommons.org/">CC</a> license.</p>
<p>Unfortunately, the interview with Carola was cancelled. On her way to the Informatikum she was stuck in a traffic jam for quite a long time, so there wasn't enough time until her next appointment. We made a new appointment next Monday at 9 AM, almost right before the interview with Christian. This shortens my remaining time for the evaluation by almost a week, but I'll probably have enough to do until then.</p>
<h2>Future</h2>
<p>Apart from transcribing the interview with Axel, my next construction sites are chapters 1.1, 2.1, 2.2 and 5. The first two of these should not take very long, it's just a bit of writing.</p>
<p>The delimitation of similar methods requires above all still literature research, in order to find these similar methods first, whereby I had unfortunately so far little success. The books on didactics of computer science and especially software engineering that I have come across so far either deal with being a computer science teacher and planning a month-long curriculum or with concepts of university teaching that have nothing to do with teachlets. At the moment I'm browsing and hoping for a lucky strike, but I'm not sure if I'm looking in the right places. I'll have to see if anything else turns up or who I can ask for help.</p>
<p>The <em>Limits and possibilities</em> chapter is the big one on future visions and thought experiments. So far, I only have a rough idea of examining the definition piece by piece for its flexibility, i.e. to what extent one can perhaps still “play” with the elementary components and what novel teachlets could look like. This is a chapter that has nothing really standing in its way now, but I must say that I am a bit anxious about it. Nonetheless, I'll have to get to it sooner rather than later. I'll give it a try after the easy parts and see what works by next week.</p>
<p>So next Tuesday at the latest there will be the report of the two remaining interviews. In the meantime, I'll keep you updated on what I'm writing, how far I've come and if there are any new developments. See you next Tuesday at the latest!</p>
academiaBachelor Thesis Log 8https://fietkau.blog/2010/bachelor_thesis_log_82010-09-04T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Things are happening quickly now, stuff is now going at a crazy pace. It has to, if I want to get everything done by the end of the month… but after the last talks with Axel I'm cautiously optimistic. With a bit of discipline and luck, I'll get there.</p>
<p>I've been thinking about increasing the pace/frequency of these reports as well. This week lends itself to that because of all the new information. I'll keep it like this: every Tuesday evening there will be a report <em>in any case</em>. In between, there may be others, if the flow of news justifies it. We'll see how things develop over the next four weeks.</p>
<!-- break -->
<h2>Revised Outline</h2>
<p>Based on your comments and Axel's feedback, I've made another major revision to the outline. Here is the current version:</p>
<ol>
<li>Introduction</li>
<li>The teachlet concept
<ul>
<li>Differentiation from similar methods</li>
</ul>
</li>
<li>Definition
<ul>
<li>The original definition and its limitations</li>
<li>Updated definition</li>
</ul>
</li>
<li>Prior teachlet practice
<ul>
<li>Reports from presenters</li>
</ul>
</li>
<li><em>(Planning Game)</em></li>
<li>Summary</li>
</ol>
<p>The teachlet concept is now a separate chapter and no longer below the introduction. The delimitation has been added. The definition chapter remains the same, followed by the chapter on the implementation of teachlets so far and the reports from the interviews. I have not yet come up with a good title for chapter 5. The chapter is supposed to be about what happens if you completely leave out individual “essential” parts of the new definition (e.g., the design discussion or the executable software) and whether the unit can then still be called a “teachlet.” One such contentious example would be the iPhone teachlet from <a href="https://fietkau.blog/2010/bachelor_thesis_log_6">report 6</a>, in which there was no design discussion in the sense that is usually common and required in a teachlet. Nevertheless, all involved agree that the event adhered to the, for lack of a better term, <em>teachlet spirit</em> and should be counted as a teachlet. From this point of view, the chapter resembles a thought experiment that should further help to narrow down the teachlet concept and make it imaginable.</p>
<p>In addition, I have tried to address the following criticisms in this second outline:</p>
<ul>
<li>The lack of differentiation from similar methods has been explicitly addressed.</li>
<li>The current status and practice are dealt with before the future visions and not the other way around. The chapter on definition is an exception to this, as it seems sensible to me to directly follow the new definition with the old one and not to intersperse the rest of the main body of the work.</li>
<li>The chapter headings are no longer formulated as questions. Hopefully, this is more in line with common conventions.</li>
</ul>
<p>Of course, the outline is still not set in stone. Probably a lot will happen to it until the end of the work.</p>
<h2>Interviews</h2>
<p>Three interview appointments have been fixed:</p>
<ul>
<li>Tue, Sep 07, 2 PM, Axel Schmolitzky</li>
<li>Tue, Sep 07, 4 PM, Carola Lilienthal</li>
<li>Mon, Sep 13, 11 AM, Christian Späh</li>
</ul>
<p>Apart from that, I have a short written feedback on the topic from Kai Meyer. I am curious to see how the interviews go and what will emerge from them. By the way, I decided against further empirical means (questionnaires etc.), because I hope to be able to clarify everything important through the interview part and in my opinion the effort is not worth it for me.</p>
<p>For the recording I will then directly use my laptop (thanks for the offer anyway, vollkorn!).</p>
<h2>Future</h2>
<p>If I'm quick, you might be able to read some results from the interviews on Tuesday evening. At the very least, there will be a short report from me on how they went. Furthermore, my goal is to write at least chapter 3 over the weekend and Monday, since the introduction and the chapter on the teachlet concept (still without delimitation) already exist and are waiting for feedback from Axel.</p>
<p>By the way, the date for the colloquium lecture will probably be Oct 4, but no guarantees yet. If you want to hear about the results, you might want to keep the afternoon of October 4 free. There will be a real invitation as soon as the date is fixed and I have the confirmation that it does not violate any Master's enrollment deadlines or something…</p>
academiaBachelor Thesis Log 7https://fietkau.blog/2010/bachelor_thesis_log_72010-08-31T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>It's Tuesday evening again and I'm reporting back with the current status. For those who may have missed it: last Saturday there was a <a href="https://fietkau.blog/2010/bachelor_thesis_log_6_1_2">special out of rhythm organizational report</a>. Unfortunately there is nothing new about the interviews yet, instead I would like to present you my draft of an outline today.</p>
<!-- break -->
<h2>Outline</h2>
<p>As is well known, there are some conventions for the structure of a scientific paper. For example, usually (after an introduction) a theory is established, then experiments are described and evaluated, and finally the theory is refuted or substantiated. In more conceptual work – like mine – there tends to be a definition at the beginning, which is then explored in detail and, if possible, put to some kind of test.</p>
<p>With this in mind, here is a suggested outline for my work. The titles and wordings are not final and will only partially correspond to the chapter headings, but I hope you can see what should appear in which order:</p>
<ul>
<li>Introduction
<ul>
<li>The teachlet concept</li>
</ul>
</li>
<li>Definition
<ul>
<li>Definition according to [Schmolitzky2005] and its limitations</li>
<li>Updated definition</li>
</ul>
</li>
<li>What forms can teachlets take?
<ul>
<li>Examples for unusual teachlets</li>
</ul>
</li>
<li>How have teachlets been run so far?
<ul>
<li>Reports from teachlet moderators</li>
</ul>
</li>
<li>What are promising new ideas?</li>
<li>What makes a good teachlet?</li>
<li>Summary</li>
</ul>
<p>In light of current developments (but also otherwise), I should start putting continuous text to paper, i.e. to keyboard. They say you write the introduction first, then you write the rest of the paper, and then you rewrite the introduction again. With that in mind, I think I'll start with the introduction and the chapter on the definition (which as you know has already been revised).</p>
<p>As always, I would love to hear <strong>feedback</strong> on the outline. If you see weak points or if you think something would be better if solved differently, please let me know.</p>
<h2>Participation</h2>
<p>I would also be interested in hearing from you: to what extent would you like to follow these text segments in their development? I imagine the formulation of such an introduction to be rather boring to watch. Is there any interest in reading preliminary versions of the chapters here? If so, who among you would give me feedback on them? Or is this rather something I should skip? I am interested in your opinion.</p>
<p>By the way, I don't log IPs and don't have visitor statistics. However, I've been approached by so many of you in the meantime (“Hey, you're the guy with the blog and the bachelor thesis!”) that I know you're there. Axel, my supervisor, is observing my experiment with involving public with a pinch of healthy skepticism. So if you want to motivate me to keep on trying with these reports, feel free to write a short comment. Not every one of them has to bring me further in terms of content, I would also be happy about a “Hey, I read along every week and think it's totally cool.” So whoever has not yet left one: the comment field doesn't bite, it all works without accounts or registering or email addresses or other crap like that. Recently there is even a little formatting guide under the comment field, but that's just as an aside. So: please keep the comments coming!</p>
<h2>Future</h2>
<p>By next Tuesday, I'll have something sorted out about the interviews. Either there will be a few appointments, or the thing falls flat. But since I just preemptively canceled everything else for the next month, I'm actually in good spirits. I just need to reach out to people.</p>
<p>My plan doesn't include any data collection other than the interviews. That means the rest is creative writing. So until next week, I'll be throwing myself into LaTeX and typing my fingers to the bone. See you then!</p>
academiaBachelor Thesis Log 6 ½https://fietkau.blog/2010/bachelor_thesis_log_6_1_22010-08-28T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Welcome back to my bachelor thesis report, on an irregular day due to recent organizational developments. Fasten your seatbelts, it's going to be turbulent.</p>
<!-- break -->
<h2>Registration and Deadlines</h2>
<p>The good news first: For the registration of my bachelor thesis there is a form (PDF), which the first and second supervisor have to sign. With the submission of this form, the official processing period of three months begins. Since yesterday I have this form completely filled out and signed here, so that I can hand it in right away on Monday to officially register my thesis. Accordingly, everything I have done so far will be defined retroactively as preparation and familiarization with the topic. Excellent.</p>
<p>For the upcoming winter semester, I also already have my admission for the master's program in computer science. This means that besides the regular deadline of three months, there are potentially further deadlines for me if I want to take up this position. Actually, you are supposed to present a completed bachelor's degree at the time of application, but hardly anyone does that. Instead, it's also possible to plan ahead and say that you'll probably make it in time. That's how it was for me, too. My last study achievement is the bachelor thesis, which I want to finish this fall. At the time, I looked up what there was to know about it.</p>
<p>I have a document called “Application for the Master's programme in computer science” on my hard drive, but I don't remember where I got it. Anyway, I used it as an application guide in July. It says:</p>
<blockquote>
<p>Applications without a certificate of the first university degree are possible, provided that this certificate is submitted by the end of December (for applications to the winter semester) or by the end of June (for applications to the summer semester).</p>
</blockquote>
<p>End of December, okay. Sounds reasonably comfortable. Of course, a bachelor's thesis is not the same as a bachelor's certificate, but I wanted to be finished by December anyway – before the start of lectures, if possible. So there would still be plenty of time to wait for the grading. That's where I stand so far.</p>
<p>Now I hear from a fellow student that a certificate of the first supervisor has to be available already by Sep 30, certifying that a passing grade is certain. This means that my work would need to be finished by then, at least to an extent so that it can be called a minimal bachelor thesis. After that, I could still do the finishing touches. Okay, sounds strange, but wouldn't bother me.</p>
<p>So I asked the student office. They're telling me that the bachelor thesis has to be <a href="https://en.uncyclopedia.co/wiki/AAAAAAAAA%21">finished by Sep 30 and has to be submitted to the examination office</a>. I beg your pardon? A look at the website doesn't look any better:</p>
<blockquote>
<p>However, for final admission to the Master's program, your Bachelor's certificate must then be submitted at the latest 2 weeks before the start of the courses.</p>
</blockquote>
<p>The course start date this year would be October 18, so the deadline is October 4, which makes no appreciable difference. (Okay, maybe just for printing.) But again, this refers to the certificate, not just the thesis.</p>
<h2>So What Now?</h2>
<p>Can I manage to cobble something together by the end of September that Axel would be willing to give me a passing grade for? Probably. Will important aspects fall by the wayside and the work remain unfinished? Probably. Will I be annoyed afterwards if I submit a bachelor thesis that is far below my capabilities? <em>Very</em> likely!</p>
<p>My preferred path for now is to really put my back into it and see what I can do somehow. If that's not enough, I have the choice of turning in a subpar thesis and jeopardizing my grade, or losing my spot on the Master's programme and starting a semester later.</p>
<p>What do you think? Does anyone know more about the deadlines, is there still something to negotiate? What would you do?</p>
academiaBachelor Thesis Log 6https://fietkau.blog/2010/bachelor_thesis_log_62010-08-24T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Today's post is about the promised surprise topic: In the context of the iPhone Power Day that took place today, Kai Meyer (an employee of C1 WPS) held a teachlet on the topic “MapKit integration on the iPhone” in the ESA B lecture hall in front of about 100 people. We had contacted each other beforehand due to a tip from Axel and I talked to him about what a teachlet presenter has to consider, what I think about holding a teachlet with such a large number of participants and how such a teachlet should be designed.</p>
<!-- break -->
<p>Today, I sat down in the lecture hall and took over the role of the tracker – meaning I took detailed notes about the progress of the teachlet. In the teachlet workshop, this log will be used by the teachlet developers to revise the choreography and adapt it to reality. In this context, I was particularly interested in how fluidly a lecture hall teachlet could function.</p>
<p>The goal was 60 minutes, but it only took 45. Here is the sequence:</p>
<pre><code>Kai Meyer, Aug 24 2010, ESA B – iPhone Power Day
05:02pm Greetings
05:04pm Explaining the teachlet concept
05:05pm Describing the initial system
05:07pm Task
05:08pm What is MKMapView
05:09pm Class diagram target system
05:11pm Looking at initial system
05:12pm Beginning implementation
:13pm Adding a button to the interface
:15pm Defining an action
:16pm Linking action and button
:18pm Implementing a dummy method
:19pm Debugging
:21pm Adding MapView
:23pm Showing user location
:24pm Creating new UIViewController
:25pm Linking controller and map
:27pm Activating controller
:28pm Test drive
:31pm Changing MapType and title
05:32pm Task has been fulfilled
05:33pm Showing prepared target system
05:34pm Showing coordinate passing
05:35pm Showing automatic zoom
05:37pm Summary
05:39pm Questions
05:45pm End
</code></pre>
<p>Compared to the classic teachlet, this one had a few special features that made it particularly exciting for me. First of all, it rarely happens that a teachlet is held in front of such a large group of participants. This means that it is not possible to have a design discussion like in a seminar-like teachlet unit because, first, there are too many people present for everyone to have their say and, secondly, the acoustics make a discussion between a smaller number of participants impossible. In this case, the moderator had a microphone to be intelligible to the very back of the room. The participants (I keep catching myself wanting to write “audience”) were only able to vocally contribute short interjections.</p>
<p>What worked unexpectedly well in my eyes was to let the participants decide the sequence of implementation. The facilitator asked the participants completely openly what should be done, and then was able to implement each shout-out directly. The participant leadership in implementation, typical of teachlets, could be implemented without much difficulty here as well. A possible limitation, however, is that the target group was not advanced iPhone programmers and the participants probably did not know any other solution than the one targeted.</p>
<p>In context and for the objective, I think the unit clearly succeeded. The question that has the greater relevance for me, however, is whether it is really a teachlet in the sense of the revised definition.</p>
<h2>Teachlet Definition 2.0.1</h2>
<p>Here is the definition from two weeks ago, into which I have also incorporated the corrections from your comments (and more minor changes by me):</p>
<blockquote>
<p><em>A teachlet is a highly interactive teaching unit in which an executable piece of software is modified in such a way that it fulfills a clearly defined task. This is chosen in such a way that a clearly defined learning objective can be achieved through the change. A moderator motivates the initial system as well as the change to be made in a shared view with the participants (e.g. on a projector) and is then guided by the participants to carry out the necessary changes to the software. For the solution of the task, there exists a solution space with several possible architectural variants, in order to make a draft discussion possible. The moderator has the task of directing the discussion, of recording intermediate results and of bringing about agreement on an objective for the implementation. After the joint implementation phase, the software ideally fulfills the previously set task. A teachlet also includes documentation that is relevant for the preparation, such as a detailed choreography and an implemented target system.</em></p>
</blockquote>
<h2>Did We Experience a Teachlet Today?</h2>
<p>Kai Meyer's event was <strong>highly interactive</strong> and it involved <strong>modifying</strong> (programming) software by the participants. A <strong>clearly defined task</strong> was given (add a MapView to existing software), which led to a <strong>clearly defined learning goal</strong> (learn about the simplicity of the MapKit API). Work was done on the <strong>projector</strong> and <strong>participants guided the change steps</strong> (by shouting). For the <strong>solution space</strong>, it's a bit of a sticky point… essentially, there was one solution in the air because the participants didn't have enough experience to come up with another. In principle though, other solutions would have been possible, and there's only a “shall” in the definition, not a “must” – so I don't feel bad about letting it pass. The moderator fulfilled his <strong>tasks</strong> well, the objective was <strong>achieved</strong> (the map worked). To what extent detailed documentation exists for the teachlet, I don't know.</p>
<p>Conclusion: It is quite clear that the concept implemented today is still a teachlet, which was only unusual in some respects. As I said, it still worked quite well.</p>
<h2>Future</h2>
<p>For next week I hope to have some news regarding the interviews and maybe about organizational aspects. Tomorrow I'll talk to Axel again about the progress so far and the next steps. By Tuesday at the latest, you'll find out here how things are going.</p>
academiaBachelor Thesis Log 5https://fietkau.blog/2010/bachelor_thesis_log_52010-08-17T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>This week I'm taking a little thematic leap from the teachlet definition back to my empiricism. A few weeks ago I already mentioned once that I would like to conduct interviews to collect more “fodder” for my work. Today I want to explain to you how I came to that conclusion, what methodology I want to use and what I want to achieve with it.</p>
<!-- break -->
<h2>Kinds of Interviews</h2>
<p>Social science knows a considerable variety of forms and standards for interviews. For my approach, the different types of <a href="https://en.wikipedia.org/wiki/Semi-structured_interview">semi-structured interviews</a> (as opposed to <a href="https://en.wikipedia.org/wiki/Structured_interview">standardized interviews</a>) are particularly interesting, since they are more openly structured in comparison and allow and even encourage the interviewee to talk freely during the interview, so that unpredicted topics can organically come up in conversation.</p>
<p>Very simplified (methodology purists please cover your ears for a moment), one could say: in semi-structured interviews, not all questions need to be on paper in advance. In addition, the guide interviewer tends to hope not for the shortest and most precise answers possible, but for the longest and most detailed answers possible. No two guided interviews are identical.</p>
<h2>Problem-centered Interviews</h2>
<p>Semi-structured interviews are then further subdivided. After getting a rough overview, I intend to follow the approach of the <a href="https://de.wikipedia.org/wiki/Problemzentriertes_Interview">problem-centered interview</a> (quoting German Wikipedia):</p>
<blockquote>
<p>The <strong>problem-centered interview</strong> is a survey method of qualitative social research, with which data from interviewees are collected (and evaluated). The focus is on the experiences, perceptions and reflections of the respondents on a very specific problem (topic).</p>
</blockquote>
<p>The method then makes further demands on the systematics (e.g. a supplementary short questionnaire). To decide whether the additional structures are worthwhile for me, I will probably have to read up a bit first. However, it is certain that the above-mentioned context of use fits very well for me.</p>
<h2>Interview Guide</h2>
<p>The central document of a semi-structured interview is the <strong>interview guide</strong>. This is something like an agenda for the interview. It contains all the topics (often including pre-formulated questions) that the interviewer wants to discuss, in what is expected to be a sensible order. Its purpose is to keep track of the interview and ensure that no topic is forgotten during the interview.</p>
<p>I will probably have to develop a separate guide for each interview, or at least make adjustments, since experiences with teachlets vary with different presenters. Nevertheless, a basic framework must exist beforehand. Therefore, here are (more or less shooting from the hip) a few questions I would like to ask.</p>
<ol>
<li>What experiences have you already had with the teachlet concept?</li>
<li>How did you experience teachlets in comparison to other forms of teaching that you know?</li>
<li>Where do you see limitations of the concept? Where would you definitely not use teachlets?</li>
<li>Do you have any advice for future teachlet moderators? What is not yet established knowledge, but should definitely be considered?</li>
</ol>
<p>What other question(s) might be important to ask? As a reminder, the interview guide is not meant to have every single question pre-formulated, but rather a kind of checklist to ensure that none of the questions included are forgotten during the interview.</p>
<h2>Interview Candidates</h2>
<p>In addition to Axel Schmolitzky and Christian Späh, who have already been mentioned here several times, there are a number of people who have already presented teachlets and whom I would consider to have important insights to contribute to my work. Out of consideration for the personal rights of these persons I do not keep this list publicly for the time being. However, as soon as appointments have been made, I will of course disclose everything important here. To what extent minutes and/or recordings of the interviews can be published, I will then discuss with the interviewed persons individually. Maybe some will not want it at all, then it should not fail because of that. But I actually assume that some of them will be found here afterwards.</p>
<p>Is there anyone who has important things to say about teachlets and wants to be heard? Please get back to me.</p>
<p>Is anyone interested in the concept of semi-structured interviews and might just want to experience one? That should work too. Let me know.</p>
<h2>Technology</h2>
<p>One often forgotten but important detail is the question of recording technology. You need a device that can record spoken language in a (hopefully) quiet room with satisfactory quality. Unfortunately, my cell phone can't do it (I've tried). But in a pinch, the microphone in my laptop is sensitive enough for it.</p>
<h2>Future</h2>
<p>Next Tuesday (perhaps with a day's delay) there will probably be a <strong>surprise topic</strong>, because I forgot to ask the person responsible, to what extent I may talk about it in advance… So I'll just build up a little suspense. Until next Tuesday!</p>
academiaBachelor Thesis Log 4https://fietkau.blog/2010/bachelor_thesis_log_42010-08-10T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>This week I'd like to make the first attempt at an updated teachlet definition. The end result of today's entry is intended to be the first attempt at an updated definition, which also means that I'm asking for <strong>your</strong> feedback (at least if you have teachlet experience or feel otherwise inclined).</p>
<p>But first, let's review the “historical” definition:</p>
<!-- break -->
<blockquote>
<p>A teachlet is an interactive teaching unit in which an executable piece of software is to be extended by a clearly defined functionality in order to illustrate a design pattern or a programming language concept. A presenter uses a computer and a projector to motivate the initial system and the extension to be made, and then has the participants guide him or her in making the necessary changes to the source code.</p>
</blockquote>
<p>From last week's results, we have the list of key aspects for teachlets (static) and teachlet units (dynamic).</p>
<p><strong>Teachlet</strong></p>
<ul>
<li>Task</li>
<li>Learning objective</li>
<li>Solution space</li>
<li>Initial system</li>
<li>Implementation</li>
<li>Architecture</li>
<li>Target system</li>
<li>Documentation</li>
</ul>
<p><strong>Teachlet Unit</strong></p>
<ul>
<li>Computer</li>
<li>Standard procedure</li>
<li>Shared view (e.g. projector)</li>
<li>Moderator</li>
<li>Participants (active, ≥ 1)</li>
<li>Record intermediate results</li>
<li>Design discussion</li>
<li>Interaction</li>
</ul>
<p>I'll just start by trying to update the previous definition sentence by sentence, keeping the terms in mind. On to the first sentence:</p>
<blockquote>
<p>A teachlet is an interactive teaching unit in which an executable piece of software is to be extended by a clearly defined functionality in order to illustrate a design pattern or a programming language concept.</p>
</blockquote>
<p>What is wrong with this sentence?</p>
<p>First of all, I would like to emphasize the interactivity more, since teachlets are indisputably highly interactive and that is one of the defining elements. If it just says “interactive,” that gives a lot of room for interpretation (some people might describe lectures as interactive if questions can be asked).</p>
<p>The term runnable software makes sense in this form.</p>
<p>Instead of extending functionality, I would like to see more flexibility for the task. While extending functionality is the normal case, it should not be mandated (a major refactoring, for example, would also be conceivable).</p>
<p>The phrase “a design pattern or programming language concept” is also quite restrictive and should be generalized with respect to other possible learning objectives (specific algorithms, refactorings, or the like).</p>
<p>My attempt at a new first sentence, which I split in two halves for stylistic reasons:</p>
<blockquote>
<p><em>A teachlet is a highly interactive teaching unit in which an executable piece of software is modified to perform a specific task. This is chosen in such a way that a very specific learning goal can be achieved through it.</em></p>
</blockquote>
<p>Moving on to the second sentence:</p>
<blockquote>
<p>A presenter uses a computer and a projector to motivate the initial system and the extension to be made, and then has the participants guide him or her in making the necessary changes to the source code.</p>
</blockquote>
<p>It is good that the moderator and the participants are mentioned here. Something that's less good is the restriction to computers and projectors, which (according to the consensus of the teachlet group) should be better generalized to a “shared view.” For example, teachlets where participants and presenter are not in the same physical space (e.g., teleconferencing, teachlets via the internet) would also be conceivable.</p>
<p>Mentioning the initial system is also useful. Instead of an extension, we should rather speak of a change in the above sense.</p>
<p>Finally it is to be discussed, to what extent teachlets should be restricted to the change of source code, since there are also e.g. visual programming and surely still other paradigms of the software development, in which the term of the source code is omitted in favor of other implementation mechanisms.</p>
<p>Let's see what we can make of it:</p>
<blockquote>
<p><em>A moderator motivates the initial system as well as the change to be made in a view shared with the participants (for example on a projector) and then has the participants guide him or her to make the necessary changes to the software.</em></p>
</blockquote>
<p>Time to take inventory. The following terms from the lists above have not yet been accommodated: <em>solution space</em>, <em>implementation</em>, <em>architecture</em>, <em>target system</em>, <em>documentation</em>; <em>computer</em>, <em>standard procedure</em>, <em>record intermediate results</em>, <em>design discussion</em>.</p>
<p>Two of them I would like to exclude with the following justification: <em>computer</em> because the existence of a computer is implied by the change of executable software, and <em>standard procedure</em> because this is what is to be represented by the definition as a whole.</p>
<p>To bring in a few of the remaining aspects, I'll try to formulate a few new sentences now:</p>
<blockquote>
<p><em>For the solution of the task, a solution space with several possible variants with regard to the architecture should exist in order to enable a design discussion. The moderator has the task of guiding the discussion and recording intermediate results. After the joint implementation phase, the result is the modified software.</em></p>
</blockquote>
<p>Then something is probably still needed for the contextual stuff:</p>
<blockquote>
<p><em>The teachlet also includes documentation that is relevant for preparation, such as a detailed choreography or a finished target system.</em></p>
</blockquote>
<p>I could not resist including the choreography if we already want to have the target system in it. Nevertheless, I still doubt whether this sentence should be included in the standard definition.</p>
<p><strong>So here is draft 1 of the updated teachlet definition:</strong></p>
<blockquote>
<p><em>A teachlet is a highly interactive teaching unit in which an executable piece of software is modified to perform a specific task. This is chosen in such a way that a very specific learning goal can be achieved through it. A moderator motivates the initial system as well as the change to be made in a view shared with the participants (for example on a projector) and then has the participants guide him or her to make the necessary changes to the software. For the solution of the task, a solution space with several possible variants with regard to the architecture should exist in order to enable a design discussion. The moderator has the task of guiding the discussion and recording intermediate results. After the joint implementation phase, the result is the modified software. The teachlet also includes documentation that is relevant for preparation, such as a detailed choreography or a finished target system.</em></p>
</blockquote>
<p>Phew, this turned out a bit longer than the old definition, but it also covers a lot more. I hope that the flow is more clearly highlighted.</p>
<p>I'll reiterate my <strong>request for feedback</strong> on this draft. Ideally, this definition should last at least as long as the previous one, so I'd like to identify potential problems now.</p>
<p>If some feedback comes in time, I'll incorporate it into the draft by next week. Otherwise, I'll give some thought to the <strong>semi-structured interviews</strong> then. See you!</p>
academiaBachelor Thesis Log 3https://fietkau.blog/2010/bachelor_thesis_log_32010-08-04T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Last Thursday I spent the morning at the Informatikum tinkering with the basic framework for an updated teachlet definition with a small group of interested people. Axel, Christian, a fellow student named Daniel who was unknown to me until then, and myself were present.</p>
<p>We set ourselves the task to identify central aspects and parts of teachlets based on our experiences with teachlets in the last years, so that an updated definition can emerge from it. Basically, the definition from Axel's paper of a few years ago is still largely comprehensive and more contemporary than I had suspected before our meeting; but in some respects it anticipates aspects that are not so universal.</p>
<!-- break -->
<p>We began by brainstorming important terms and supplementing them with keywords I had compiled from Axel's paper. We then tried to bring order into the resulting set of terms.</p>
<figure>
<img src="https://fietkau.blog/assets/teachlets_1.jpg" alt="Static aspects of teachlets">
</figure>
<p>First, the difference between aspects that are relevant for the teachlet in its static form and those that are determinant for the respective teachlet execution became obvious. Of course, almost all static aspects of a teachlet affect the teachlet units in the execution, but this is not completely true for all of them.</p>
<figure>
<img src="https://fietkau.blog/assets/teachlets_2.jpg" alt="Dynamic aspects of teachlet units">
</figure>
<p>The semantics of the colors and markings are as follows: Blue terms I had prepared beforehand, red terms had been identified in the brainstorming as further important components. Partial explanations are written in black on the cards. The terms with red dots on the card are exactly those that are essential, indispensable components of the teachlet or teachlet unit (depending on which side they are on). A red dot on a card on the static side also means that this aspect is as important in the teachlet unit as in the static teachlet, while a red circle means that the aspect is essential only on the static side. (This system was not planned but grew organically during the meeting, which makes it immune from any criticism).</p>
<figure>
<img src="https://fietkau.blog/assets/teachlets_3.jpg" alt="Axel Schmolitzky, Christian Späh">
</figure>
<p>My next task is now to work out a textual definition from the terms that is fit for the future. Although I have a lot of other things on my mind at the moment, my goal is to present the first draft here next week. And hopefully without delay too…</p>
academiaBachelor Thesis Log 2https://fietkau.blog/2010/bachelor_thesis_log_22010-07-27T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Today's post is about <strong>empiricism and data collection</strong>. I would like to show you which considerations I have made regarding my data sources so far and what kind of data I would like to collect.</p>
<!-- break -->
<h2>Bachelor Theses and Data Collection</h2>
<p>A bachelor thesis in computer science typically deals with a problem that can be theoretically analyzed or even implemented. Somewhat rarer are topics that actually require field research, which can be done through surveys or similar methods. My topic belongs to the latter.</p>
<h2>Data Sources</h2>
<p>For my research question(s) on the versatility of teachlets, there is only a small set of data sources that may be able to help me.</p>
<ul>
<li>First, there is the <strong>teachlet archive</strong>, which preserves a large number of existing teachlets from past teachlet workshops. Each ideally contains the complete teachlet choreography, all slides, systems, and materials, and with any luck, experience from previous runs. For the question of what constitutes teachlets at their core, it is certainly useful to work with the definition not only from the side of theory, but also to examine existing teachlets for commonalities and general structures.</li>
<li>Further, I have hopes of <strong>interviewing some experienced teachlet presenters</strong>. In the environment of our university, there are perhaps half a dozen people who have used teachlets repeatedly and reflectively. I would like to get hold of these people and <a href="https://en.wikipedia.org/wiki/Semi-structured_interview">interview them</a> on the topic, in the hope that actionable insights can be gleaned from the interviews.</li>
<li>Lastly, there is <strong>first-hand observation</strong>. There is a teachlet that is to be carried out here at the university at the end of August with over 100 people, and I will be observing it – “track” it, as the teachlet connoisseur would say; this refers to the minute-by-minute logging of which section took how long, especially in order to be able to compare the actual course of events with the plan after the fact. It is particularly interesting to see how the teachlet concept works with such a large number of participants.</li>
</ul>
<h2>Obstacles</h2>
<p>Data collection is already limited by the fact that a teachlet cannot simply be carried out “on a trial basis” because a certain number of participants is required. This is the point at which the trial implementation of a teachlet following an OOPM lecture failed last semester – no one wanted to stay longer for it, which is of course understandable. So I have to be very careful to use all available sources, because it's a very limited number.</p>
<p>Another “problem” is that the data I collect is largely qualitative rather than quantitative. There won't be too much to compare and put into pretty diagrams, but there will be all the more different statements and evaluations from which a coherent overall picture has to be extracted. This will be a tough job, especially for a quantitative scientist like me.</p>
<h2>Organizational Aspects</h2>
<p>Since last week I have a second supervisor. Prof. Oberquelle has agreed to do the job. Now that this position is filled, nothing stands in the way of officially registering the thesis. I will discuss this with Axel.</p>
<h2>Conclusion</h2>
<p>Hopefully my presentation of the data collection concepts is reasonably understandable. What do you guys think of it? Is it written in a readable way, or should I go into more detail about typical teachlet terms when I use them?</p>
<p>Next week I will report about the <strong>brainstorming meeting</strong> with Axel and Christian, where hopefully some basic knowledge about the definition of teachlets can already be gained. The meeting will take place on Thursday, next Tuesday around this time you can see the results here.</p>
academiaBachelor Thesis Log 1https://fietkau.blog/2010/bachelor_thesis_log_12010-07-20T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>The overwhelming consensus seems to be that the genesis of my bachelor thesis interests at least a few people. So here is the first report of hopefully many, in which I will first explain the topic and quote a bit from my draft synopsis.</p>
<!-- break -->
<h2>What are Teachlets?</h2>
<p>Teachlets are a teaching concept developed at the Department of Computer Science at the University of Hamburg for contents of practical computer science, which exists in the area of tension between theoretical lecture and practical programming exercise and thereby tries to aggregate the advantages of both approaches. In a teachlet, there are lecture-like sections, but also open design discussions in the plenum, which, guided by the presenter, are converted into code live on the presentation computer.</p>
<p>Due to the special methodology of teachlets, the participants of a teachlet are encouraged to immediately reflect on and apply what is presented more than in a traditional lecture.</p>
<h2>Prior Research</h2>
<p>There are essentially two papers on the topic that discuss teachlets abstractly, both by the inventor of the concept and supervisor of my bachelor thesis, Axel Schmolitzky.</p>
<ul>
<li>Schmolitzky, A., A Laboratory for Teaching Object-Oriented Language and Design Concepts with Teachlets. In <em>Proc. OOPSLA ’05 (Companion: Educators’ Symposium)</em>, (San Diego, CA, 2005), ACM Press.</li>
<li>Schmolitzky, A., Patterns for Teaching Software in Classroom. Paper presented at
the 12th European Conference on Pattern Languages of Programs (EuroPLoP 2007),
Irsee, Germany.</li>
</ul>
<p>As you can see, the field has hardly been covered so far.</p>
<h2>My Goals</h2>
<p>In my paper I would like to define and delimit the teachlet concept more systematically than was done in Axel's original paper. Here is the definition of the term given there:</p>
<blockquote>
<p>A teachlet is an interactive teaching unit in which an executable piece of software is to be extended by a clearly defined functionality in order to illustrate a design pattern or a programming language concept. A presenter uses a computer and a projector to motivate the initial system and the extension to be made, and then has the participants guide him or her in making the necessary changes to the source code.</p>
</blockquote>
<p>This definition gives a good idea of how a teachlet can work. At the same time, however, it contains an undisclosed number of limitations and assumptions that may not be universally applicable to practical use, and leaves other structural issues unresolved.</p>
<p>As a first step, I would like to develop a new definition that takes into account the experiences from the teachlet workshops of the last years as well as from external facilitators in order to catch up with theory to practice.</p>
<p>Furthermore, I want to explore in which contexts teachlets can work and what needs to be considered in each case. This will involve questions such as: can a teachlet be used in a lecture with 100 participants instead of a seminar with 20 participants? What changes to the teachlet and the choreography are necessary for this?</p>
<h2>Didactics, Pedagogy and I</h2>
<p>The obvious question: To what extent is the topic suitable for a bachelor thesis in computer science? To the naysayers claiming that the topic would be better suited for students of educational science or teacher aspirants, I reply as follows:</p>
<ul>
<li>It is true that I lack the background to evaluate teachlets with respect to their didactic qualities. However, that is not my goal at all. My work will be highly <strong>descriptive</strong> and largely free of evaluations, especially related to didactics.</li>
<li>Teachlets are a teaching concept that is deeply rooted in structures of computer science and assumes, for example, live programming. A transfer to completely different topics would probably be conceivable, but will not happen in my work.</li>
</ul>
<h2>Conclusion</h2>
<p>That was a first glimpse into the topic and objective. Check back next week when it will be all about <strong>empiricism and data collection</strong>. Questions and comments on this week's and next week's topics are highly encouraged as they motivate me to follow through with this coverage. ;)</p>
academiaBachelor Thesis Log 0?https://fietkau.blog/2010/bachelor_thesis_log_02010-07-13T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>As some of you know, I've been in the unofficial preparation period for my bachelor thesis for some time now. The topic is fixed: “The Teachlet Concept: Limits and Possibilities of a Teaching Pattern for Software Design Discussions,” supervised by Axel Schmolitzky. Exactly my desired topic, even if it does not necessarily belong to the core area of computer science.</p>
<p>Soon I would like to register the thesis officially and start working on the content. With the background of what <a href="https://blogs.gnome.org/muelli/">Muelli</a> is doing on his blog at the moment, I had the idea that maybe apart from my supervisor more people might be interested in following the development of a bachelor thesis from the first draft to the final result.</p>
<!-- break -->
<p>In order to be able to estimate whether this is of interest to anyone at all (and if so, how many), I ask all interested parties to leave me a short comment here if you would like to read something like this, e.g. in the form of weekly updates.</p>
<p><strong>Are you interested?</strong> (If not, I'll spare myself the work.) Feel free to leave wishes and feedback on the idea in the comments.</p>
academiaMultilingualism and Lecture2Gohttps://fietkau.blog/2010/multilingualism_and_lecture2go2010-06-29T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>For several semesters now, the University of Hamburg has been offering a service called <a href="https://lecture2go.uni-hamburg.de/">Lecture2Go</a>. The people responsible there have equipment and know-how for the successful recording of lectures and other talks. There you can find for example the lectures of the module Software Development 2.</p>
<p>About a semester ago, I noticed that a fellow student had organized such a Lecture2Go recording set for a lecture in the KunterBuntesSeminar. I immediately found that exciting, because I like the idea of making knowledge accessible to as many interested people as possible. Recordings like the ones done with Lecture2Go allow you to break the boundaries of being there in person and experience a lecture at a later time and/or in a different place in the world.</p>
<p>For my lecture last Tuesday on the topic of “<a href="https://fietkau.plus/old_presentations#mehrsprachigkeit_uhh">Multilingualism in Teaching at the University of Hamburg</a>” I took it upon myself to do so: I organized and carried out everything necessary to record it and make it available to the world on Lecture2Go. Maybe you are interested in how I went about it.</p>
<!-- break -->
<h2>Organizational Things in the Lecture</h2>
<p>First of all, the organizer has to agree, in this case it was not me, but Dr. Bernd Meyer from the linguistics department. But in the end he didn't have to sign anything, only I as the presenter had to do that.</p>
<p>Furthermore, the audience should be informed about Lecture2Go and the recording in advance. Since the audience is not normally filmed, there is no need for consent. However, it should be politely pointed out that conversations and noises in the room may be heard softly in the recording.</p>
<h2>Interaction with the Lecture2Go Team</h2>
<p>The Lecture2Go project is part of the RRZ's Media Competence Center. It is there, in Schlüterstraße, that you will find the people behind the project. They are three very dedicated young employees who enjoy their project and are usually very accommodating.</p>
<p>You can borrow the recording hardware there. You also sign that you grant them the right to publish the recording on the web (non-exclusively). The only obligation is to make sure that the presentation (especially the slides) does not violate the rights of third parties, e.g. that you have not stolen any pictures. But you make sure of that anyway, so it doesn't take any added effort.</p>
<h2>Recording</h2>
<p>Technically, this works with a video camera including a tripod, a wireless microphone, a VGA splitter that can provide the video signal of the presentation computer for recording, and an Apple MacBook to which all this is connected. The software for recording and post-processing is already quite idiot-proof, but is still being refined. For computer science students it should be no problem. Nevertheless, you should let them show it to you beforehand, the MCC people can do that or you know someone (e.g. me) who has done it before.</p>
<p>For my presentation André kindly agreed to operate the camera, since he already knows the procedure from Software Development 1. Thanks André!</p>
<h2>Publication</h2>
<p>After you have the finished video encoded in a handful of formats, you can put it on the Lecture2Go website. Unfortunately, this step is currently the most time-consuming, at least initially. Accounts have to be created by the Lecture2Go team and courses have to be assigned manually. Videos can be uploaded and descriptions edited by the users themselves. Hopefully this process can be streamlined if the system is to be scaled up further.</p>
<h2>Conclusion</h2>
<p>When I asked if this experiment (recording a student's seminar lecture) made sense from their point of view and could be recommended, the Lecture2Go team's answer was an enthusiastic “Of course!” I also had fun with it and will definitely come back to it for future lectures.</p>
<p><a href="https://lecture2go.uni-hamburg.de/veranstaltungen/-/v/11058">My first Lecture2Go recording</a></p>
<p><strong>P.S.</strong> As Murphy would have it, Lecture2Go is apparently down as I write these lines. Let's hope that everything will work again as soon as possible.</p>
academiaopen educational resourcesPiethttps://fietkau.blog/2010/piet2010-03-30T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>If you have previously read about esoteric programming languages, you may already be familiar with <a href="https://www.dangermouse.net/esoteric/piet.html">Piet</a>. In case you haven't: Piet is a programming language in which program flow is specified in a graphical format.</p>
<p>In a nutshell: The focus moves between continuous blobs of pixels of the same color, the “cursor” starts off pointed to the right but may be rotated, colors correspond to opcodes (arithmetic, stack manipulation, I/O) while the number of pixels in one continuous area denotes that same integer.</p>
<!-- break -->
<p>Now, “writing” Piet is not exceptionally difficult, but it's a fun little mind-bender. There are <a href="https://www.bertnase.de/npiet/">interpreters</a> and even <a href="https://www.toothycat.net/wiki/wiki.pl?MoonShadow/Piet">assemblers</a> available, so you can actually <em>run</em> your artwork.</p>
<p>I couldn't resist. Here's <a href="https://fietkau.blog/assets/piet.png">my first Piet program</a>:</p>
<figure>
<a href="https://fietkau.blog/assets/piet.png"><img src="https://fietkau.blog/assets/piet.png" class="large pixelated" alt="My first Piet program"></a>
</figure>
<p>To spare you the hassle of actually running it: It simply prints my first name and then halts.</p>
programmingA Quine Program with a Twisthttps://fietkau.blog/2010/quine_with_a_twist2010-03-26T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>From <a href="http://en.wikipedia.org/wiki/Quine_(computing)">Wikipedia</a>:</p>
<blockquote>
<p>In computing, a quine is a computer program which produces a copy of its own source code as its only output.</p>
</blockquote>
<p>Quines like that are known to exist in every Turing-complete language. Examples can be found in the Wikipedia article linked above and elsewhere on the net.</p>
<p>Then there are the programmers who are not satisfied with just regular exceptionality.</p>
<!-- break -->
<p>About six months ago, <a href="http://d.hatena.ne.jp/ku-ma-me/">ku-ma-me</a>, a japanese blogger, published <a href="http://d.hatena.ne.jp/ku-ma-me/20090916/p1">this Ruby code</a>:</p>
<pre><code># ruby
l=92.chr;eval s="s=s.dump[r=1..-2].gsub(/("+l*4+"){4,}(?!\\")/){|t|'\\"+l*%d+\\"'%(t
.size/2)};5.times{s=s.dump[r]};puts\\"# python\\\\nprint(\\\\\\"# perl\\\\\\\\nprint(\\\\\\\\\\\\
\\"# lua"+l*4+"nprint("+l*7+"\\"(* ocaml *)"+l*8+"nprint_endline"+l*15+"\\"-- haskel
l"+l*16+"nimport Data.List;import Data.Bits;import Data.Char;main=putStrLn("+l*31
+"\\"/* C */"+l*32+"n#include<stdio.h>"+l*32+"nint main(void){char*s[501]={"+l*31+
"\\"++intercalate"+l*31+"\\","+l*31+"\\"(c(tail(init(show("+l*31+"\\"/* Java */"+l*32
+"npublic class QuineRelay{public static void main(String[]a){String[]s={"+l*31+"
\\"++intercalate"+l*31+"\\","+l*31+"\\"(c("+l*31+"\\"brainfuck"+l*64+"n++++++++[>++++
<-]+++++++++>>++++++++++"+l*31+"\\"++(concat(snd(mapAccumL h 2("+l*31+"\\"110"+l*31
+"\\"++g(length s)++"+l*31+"\\"22111211100111112021111102011112120012"+l*31+"\\"++co
ncatMap("+l*32+"c->let d=ord c in if d<11then"+l*31+"\\"21002"+l*31+"\\"else"+l*31+
"\\"111"+l*31+"\\"++g d++"+l*31+"\\"22102"+l*31+"\\")s++"+l*31+"\\"2100211101012021122
2211211101000120211021120221102111000110120211202"+l*31+"\\"))))))++"+l*31+"\\","+l
*63+"\\""+l*64+"n"+l*63+"\\"};int i=0;for(;i<94;i++)System.out.print(s[i]);}}"+l*31
+"\\")))))++"+l*31+"\\",0};int i=0;for(;s[i];i++)printf("+l*63+"\\"%s"+l*63+"\\",s[i]
);puts("+l*63+"\\""+l*63+"\\");return 0;}"+l*31+"\\");c s=map("+l*32+"s->"+l*31+"\\""
+l*63+"\\""+l*31+"\\"++s++"+l*31+"\\""+l*63+"\\""+l*31+"\\")(unfoldr t s);t[]=Nothing;
t s=Just(splitAt(if length s>w&&s!!w=='"+l*31+"\\"'then 501else w)s);w=500;f 0=Not
hing;f x=Just((if x`mod`2>0then '0'else '1'),x`div`2);g x= reverse (unfoldr f x);
h p c=let d=ord c-48in(d,replicate(abs(p-d))(if d<p then '<'else '>')++"+l*31+"\\"
."+l*31+"\\");s="+l*31+"\\"# ruby"+l*32+"n"+l*31+"\\"++"+l*31+"\\"l=92.chr;eval s=\\"+
(z=l*31)+\\"\\\\\\"\\"+s+z+\\"\\\\\\""+l*31+"\\"++"+l*31+"\\""+l*32+"n"+l*31+"\\""+l*15+"\\""+
l*7+"\\")"+l*4+"n\\\\\\\\\\\\\\")\\\\\\")\\"########### (c) Yusuke Endoh, 2009 ###########\\n"
</code></pre>
<p>(Apparently it has to be saved without line breaks.)</p>
<p>So what will happen if you run that code? The shell output very much speaks for itself:</p>
<pre><code>$ ruby QuineRelay.rb > QuineRelay.py
$ python QuineRelay.py > QuineRelay.pl
$ perl QuineRelay.pl > QuineRelay.lua
$ lua QuineRelay.lua > QuineRelay.ml
$ ocaml QuineRelay.ml > QuineRelay.hs
$ runghc QuineRelay.hs > QuineRelay.c
$ gcc -Wall -o QuineRelay QuineRelay.c && ./QuineRelay > QuineRelay.java
$ javac QuineRelay.java && java QuineRelay > QuineRelay.bf
$ beef QuineRelay.bf > QuineRelay.ws
$ wspace QuineRelay.ws > QuineRelay.unl
$ unlambda QuineRelay.unl > QuineRelay2.rb
$ diff QuineRelay.rb QuineRelay2.rb
$
</code></pre>
<p>The <a href="http://d.hatena.ne.jp/ku-ma-me/20090916/p1">original article</a> clarifies the employed versions of the involved compilers and interpreters.</p>
<p>According to the author of this piece of code, creating it was “easier than it looks,” he says he finished it in under three hours. The result is truly fascinating regardless.</p>
programmingInaugurationhttps://fietkau.blog/2010/inauguration2010-03-22T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>So this will be the first entry in my new blog. After more than two years, I have a functioning website again, this time even with really nice content. The visit should be worthwhile.</p>
<p>Are there any traditions for the first blog entry? Like when you christen a ship, for example? At the moment I don't feel very festive. I don't really need to introduce myself, that's what the big “About me” button is for. So then maybe I'll let you know some meta info, even at the risk of being not so exciting for non-programmers:</p>
<!-- break -->
<ul>
<li>This page is written in XHTML, JavaScript, PHP and MySQL.</li>
<li>The libraries used are Smarty and jQuery. I'm using them both for the first time and am very satisfied.</li>
<li>Apart from that there are several smaller plugins: Markdown, PHP OpenID and probably a few more that I can't think of right now.</li>
<li>The software is otherwise complete homegrown. My motivation for this is to escape the update mill. Before this I had a Drupal site, but the constant version updates got on my nerves – and you have to keep updating because there are always security holes. I hope that this software is small enough that it doesn't offer a significant attack surface.</li>
</ul>
<p>By the way, this website is bilingual. If you have an English browser, you will see it in English. Only all the downloads are in German, but that's only because I have little motivation to translate a dozen PDF files. The technology would be there. Small easter egg: You can also force the language by appending “/de” or “/en” to the URL. By the way, there are only these two languages.</p>
<p>If I haven't missed anything, this website should work in all combinations of CSS/JavaScript turned on/off. Of course it will look different, but everything important should be there. If you have CSS on, you get a pretty layout, and if you have JavaScript on, you get a little more eye candy and some extra content like an email button.</p>
<p>Good luck with this new website then!</p>
metaMy Custom-built and Modded PChttps://fietkau.blog/2007/my_custom_built_modded_pc2007-04-25T00:00:00ZJulian Fietkauhttps://fietkau.blog<p>Far away from computer shopping catalogues and case modding forums, some visitors may be surprised to find an article here dedicated to my PC – ostensibly a commodity device. Other visitors (who know me well) may not be surprised at all. So what's all this?</p>
<p>To begin with, a PC is a tool with which you can do tasks. Of course, you can examine any tool and wonder how it works. In the case of the PC, this reveals a sophisticated interplay of individual components that interact with each other in a rather precisely defined way. You can change things everywhere, rebuild things, swap parts. The inside of a PC has an aesthetic all of its own, which is probably most readily recognized and enjoyed by those who have developed a routine in taking PCs apart and putting them back together again. At some point, someone dared to ask why it was necessary to put a fig leaf (in the form of a beige metal case) on this structure. This question forms the cornerstone of case modding: the computer is perceived as an end in itself and advances to become an object of craft and perhaps even art.</p>
<!-- break -->
<p>As someone who uses his PC a lot, I couldn't resist taking my creative energy out on it as well. The result can be found here.</p>
<h2>Hardware</h2>
<p>I'll let the (almost) complete list speak for itself:</p>
<ul>
<li>Mainboard: ASUS A8N-E</li>
<li>CPU: AMD Athlon 64 3200+ (Venice)</li>
<li>RAM: MDT 2048MB DDRRAM PC400 TwinPack 2x1GB</li>
<li>Graphics: EVGA e-GeForce 7600GS PCI-E 256MB Passive</li>
<li>Network: Realtek RTL8139C(L) 10/100Mbit/s Fast Ethernet PCI</li>
<li>Hard drives: Samsung SpinPoint P120, SP2504C, 250GB; Maxtor DiamondMax 6Y160P0, 160GB</li>
<li>CD/DVD: NEC ND-3550A</li>
<li>Monitor: BenQ FP71V+ 17" 4ms TFT</li>
<li>Keyboard: Logitech Deluxe 250</li>
<li>Mouse pad: Revoltec Lightpad Precision (Green Edition)</li>
<li>Printer/scanner: Canon PIXMA MP500</li>
<li>Speaker: Creative Inspire 280</li>
</ul>
<h2>The Case</h2>
<p>My case is a <em>Raidmax Cobra</em> in the color combination black-yellow. I fell in love with the look of the case at first sight – this and no other had to be it.</p>
<figure>
<picture>
<source srcset="/assets/raidmax_cobra_1.webp, /assets/raidmax_cobra_1-2x.webp 2x" type="image/webp">
<source srcset="/assets/raidmax_cobra_1.png, /assets/raidmax_cobra_1-2x.png 2x" type="image/png">
<img src="https://fietkau.blog/assets/raidmax_cobra_1.png" alt="The Raidmax Cobra case">
</picture>
</figure>
<p>The case is pleasant to handle. Due to the fact that it is
stainless steel, it is quite heavy, but the height of only 42cm
makes it easy to transport (if you compare it to the big towers which are currently in fashion…). The
front connector (USB and sound) placement is
a bit unfortunate at the lower base, the flap can hardly be opened properly.
Furthermore, the Cobra unfortunately only offers space for
80mm fans – which is bad for the noise volume.</p>
<p>I ultimately made the following changes to the case:</p>
<ul>
<li>I disassembled the front to replace the LEDs (the “eyes” are simple plexiglas bodies) with ultra-bright green ones and also painted the yellow area green.</li>
<li>I also replaced the plexiglass pane of the window with one without a fan hole – side fan holes are counterproductive for airflow anyway. My airflow is ATX compliant from the bottom front to the top back and gets past all the major components that need cooling. Aside from that, a fan on the side would have significantly increased the noise level and blocked the view of the inside of the case.</li>
<li>The yellow perforated grill was replaced with proper dust filters.</li>
<li>In addition to these dust filters, I covered the lower part of the front (the one with the vents) with black fabric because I'm a lazy person. So the dust collects right outside and I don't have to open the case to clean it. :) Besides, the look suits me quite well, too. With this, I have a two-stage dust filtration system and hope that the air inside the case stays relatively dust-free. Consequently, I sealed the air holes in the left side of the housing from the inside with tape.</li>
</ul>
<p>There are a total of three fans working in the case: The one of the
power supply (temperature-controlled) and two 80mm fans of the type
Papst 8412/N2GLE regulated to 5.2V. More about this in the following section.</p>
<h2>Cooling and Noise</h2>
<p>My cooling concept (thanks for help and case studies to the community of <em>silenthardware.de</em>) is based on a passive cooling approach inside the case to reduce air turbulence and noise level and to enable efficient heat dissipation through sensibly used case fans.</p>
<p>I cool the CPU with a <em>Scythe Ninja</em>, which in passive mode (without a fan) is of course completely silent. I replaced the small 40mm vortex fan on the chipset with a <em>Thermalright HR-05</em>. On the nForce4 chip, it gets darned warm in continuous operation (I wouldn't want to touch it for more than a second), but it seems to do its job well. The graphics card is already passively cooled, so it didn't need any further attention.</p>
<p>The Seasonic power supply with the built-in 120mm fan and two decoupled Papst 8412/N2GLE fans in the rear provide ventilation. These initially ran at full speed for testing. When it became apparent that all temperatures were in the dark green range, I regulated them down to 5.2V with a homemade fan controller (the super simple <a href="https://www.modding-faq.de/index.php?artid=502">LM317 fan control</a> from <a href="https://www.modding-faq.de/">modding-faq.de</a>). This crooked value came about because I did not have a precise scale with the control at first. So I set the fans to a value somewhere just above the starting voltage and then measured the voltage afterwards.</p>
<p>The fan in the PSU produces a virtually inaudible noise and thus passed my quality test. The two Papst-brand fans unfortunately produce a clear motor clacking even at low operating speeds. When the case is closed, it is only only noticeable within a distance of 30cm, but maybe I'll exchange them for quieter fans, we'll see.</p>
<p>All three fans blow the air out the back of the case. Because I didn't want to install superfluous fans in the front, I sealed all case openings (especially the ones on the sides, see the previous section), so that air is only drawn in through the vents at the bottom front. This creates the desired airflow.</p>
<p>If you're a hardcore gamer used to PCs at vacuum cleaner volume, you might hardly believe that this concept works. But it does: Even under full load, the graphics card only gets above 40°C at most, the CPU stays pleasantly cool, and the motherboard's temperature sensors only show temperatures in the 30s. Maybe a few degrees more in summer, we'll see.</p>
<h2>Front Panel and Diorama</h2>
<p>In an unused 5¼ inch slot, I placed my own front panel. This contains a USB socket, four rocker switches for the LED lighting (1. front, 2. inside green, 3. inside orange, 4. off switch for the status LEDs), a lock for my self-designed data safe, and four status LEDs for power, hard drive activity, network activity, and the data safe (open or closed).</p>
<p>For the data safe, I cut open a USB cable and soldered the data lines to subminiature relays, which are switched by a key switch in the front. A USB stick is connected to the modified USB cable inside the case. This actually works reliably and gives a wonderful, unhackable (because of the physical disconnection) storage for important data. I carry the key for it on my keychain as normal. I couldn't find any evidence that anyone had implemented anything quite like this before me.</p>
<p>All circuits and boards as well as the USB stick fit inside a cannibalized CD drive, to which the custom front panel is glued. The light modules are connected to the drive via a hollow connector (chosen instead of a pin header because of reverse polarity protection), likewise a hollow connector socket is soldered to the network card. The lighting (especially the function of the first three rocker switches) is thus modular.</p>
<p>In the rear area (by the PCI cards) I built an atmospheric, suspenseful nature scene to match the case. A piece of astroturf serves as a base on which two animal figures, a cobra and its prey, are placed. Around it, some moss and several stones are placed as a landscape.</p>
<p>The separate lighting (one spotlight each on cobra and prey) in contrasting color (orange) from the rest (green) creates distance between the two worlds, and I even made sure that the two colors intrude into each other's area as little as possible. On the other hand, the PCI cards and chipset cooler are present, creating a fluid aesthetic between nature and technology. A hybrid world? Or just a theatrical backdrop after all? The interpretation is up to the observer.</p>
<p>The hunter-prey tension is clearly visible in the build, as the cobra and the rabbit look each other in the eye. All of this fits with the case itself, which already displays an aggressive aura with its cobra symbolism.</p>
<div class="gallery"><a href="https://fietkau.blog/assets/my_custom_built_modded_pc_1.jpg"><picture><source srcset="/assets/my_custom_built_modded_pc_1-250.webp, /assets/my_custom_built_modded_pc_1-500.webp 2x" type="image/webp"><source srcset="/assets/my_custom_built_modded_pc_1-250.jpg, /assets/my_custom_built_modded_pc_1-500.jpg 2x" type="image/jpg"><img src="https://fietkau.blog/assets/my_custom_built_modded_pc_1-250.jpg" alt="3/4 profile view of the PC in daylight, with the interior visible through the glass side panel"></picture></a><a href="https://fietkau.blog/assets/my_custom_built_modded_pc_2.jpg"><picture><source srcset="/assets/my_custom_built_modded_pc_2-250.webp, /assets/my_custom_built_modded_pc_2-500.webp 2x" type="image/webp"><source srcset="/assets/my_custom_built_modded_pc_2-250.jpg, /assets/my_custom_built_modded_pc_2-500.jpg 2x" type="image/jpg"><img src="https://fietkau.blog/assets/my_custom_built_modded_pc_2-250.jpg" alt="Back view of the PC with all individual components painted green or black"></picture></a><a href="https://fietkau.blog/assets/my_custom_built_modded_pc_3.jpg"><picture><source srcset="/assets/my_custom_built_modded_pc_3-250.webp, /assets/my_custom_built_modded_pc_3-500.webp 2x" type="image/webp"><source srcset="/assets/my_custom_built_modded_pc_3-250.jpg, /assets/my_custom_built_modded_pc_3-500.jpg 2x" type="image/jpg"><img src="https://fietkau.blog/assets/my_custom_built_modded_pc_3-250.jpg" alt="Inside view of the diorama inside the PC, small sculptures of a cobra and a rabbit are set on a piece of astroturf facing each other"></picture></a><a href="https://fietkau.blog/assets/my_custom_built_modded_pc_4.jpg"><picture><source srcset="/assets/my_custom_built_modded_pc_4-250.webp, /assets/my_custom_built_modded_pc_4-500.webp 2x" type="image/webp"><source srcset="/assets/my_custom_built_modded_pc_4-250.jpg, /assets/my_custom_built_modded_pc_4-500.jpg 2x" type="image/jpg"><img src="https://fietkau.blog/assets/my_custom_built_modded_pc_4-250.jpg" alt="Inside view of the diorama inside the PC, small sculptures of a cobra and a rabbit are set on a piece of astroturf facing each other, both are lit from the top in amber while everything else is dark"></picture></a><a href="https://fietkau.blog/assets/my_custom_built_modded_pc_5.jpg"><picture><source srcset="/assets/my_custom_built_modded_pc_5-250.webp, /assets/my_custom_built_modded_pc_5-500.webp 2x" type="image/webp"><source srcset="/assets/my_custom_built_modded_pc_5-250.jpg, /assets/my_custom_built_modded_pc_5-500.jpg 2x" type="image/jpg"><img src="https://fietkau.blog/assets/my_custom_built_modded_pc_5-250.jpg" alt="View of the custom front panel with a USB slot on the left, then four switches, the safe lock and the four status LEDs in different colors"></picture></a><a href="https://fietkau.blog/assets/my_custom_built_modded_pc_6.jpg"><picture><source srcset="/assets/my_custom_built_modded_pc_6-250.webp, /assets/my_custom_built_modded_pc_6-500.webp 2x" type="image/webp"><source srcset="/assets/my_custom_built_modded_pc_6-250.jpg, /assets/my_custom_built_modded_pc_6-500.jpg 2x" type="image/jpg"><img src="https://fietkau.blog/assets/my_custom_built_modded_pc_6-250.jpg" alt="3/4 portrait view of the full PC with all lighting elements turned on: bright green frontal lighting, green internal lighting for the hardware components ans amber internal lighting for the diorama"></picture></a></div>
<h2>German Case Modding Championship 2007</h2>
<p>With the finished PC I headed to Dortmund for the weekend of April 21 and 22 as a participant in the German Case Modding Championship 2007. I was able to meet a lot of interesting and competent people, exchange experiences, and altogether have a lot of fun together. Unsurprisingly for me it was not enough for a place on the podium, but it was still a wonderful experience.</p>
<figure class="scaled">
<picture>
<source srcset="/assets/dcmm_2007.webp" type="image/webp">
<source srcset="/assets/dcmm_2007.jpg" type="image/jpeg">
<img src="https://fietkau.blog/assets/dcmm_2007.jpg" alt="German Case Modding Championship 2007">
</picture>
</figure>