rixx.de (Posts about hack)

∞ Tannenbaum!

rixx — Tue, 10 Dec 2019 01:16:14 GMT

On the first Sunday of Advent, my siblings (13 & 15) and I got busy building Christmas trees – but not out of wood! We made generative art. You can see the result at 🎄.rixx.de (fallback for the less unicode-savvy: ootannenbaum.rixx.de), where you can generate your own random Christmas trees.

That's already pretty cool, in my admittedly biased opinion. What's even cooler though is how we got there: While I did all the typing, everything else was a collaboration. All the research, ideas, testing, calculations that went into this, roughly four hours of joint generative Christmas. What we did can work for others, too, so this is a writeup of what we did, how this works, and how to tackle generative processes like these. It's much easier than it may look if you haven't done something like this before!

Resources

First of all: You can look up all the details of how the Christmas tree is made. This file contains all the code, and it's heavily commentated (close to be its own blog post). The comments walk through the code and explain in plain English what's going on. If you leave out the ".en" in the URL, you'll find the same in German (which is the version we actually wrote).

If you haven't done anything remotely similar before, there is a great introduction in German by the equally great bleeptrack. This is a similar talk in English. You'll find more links and resources at the end of this page.

Prior knowledge

What level of prior knowledge do you need to build something like this? Don't worry, it's not all that much! A bit of perseverance or knowledge of a bit of any programming language or somebody who can program and is willing to help you should show you through. If you don't know anybody who can help you, look for local hackerspaces, programming courses, or ask around online when you hit stumbling blocks. Given concrete questions, there should be people around who can help.

For reference: my brother is 15, has learned some Java (and a tiny bit of HTML) at school, and had no problems following our progress. My sister is 13, and has no programming experience at all. She still understood what we did as well, especially the design and work on the parameters to get to a balanced result.

Process

When starting out with a generator like this, it's best to start simple: Think of the basic form hidden in what you're trying to do, and try to get it to show up in the live editor at sketch.paperjs.org. For example: to draw a rectangle, you can copy the code below and click the “run” button at the top:

var rectangle = new Path.Rectangle(new Point(100, 100), new Size(200, 300));
rectangle.fillColor = "red";
rectangle.strokeColor = "black";
rectangle.strokeWidth = 5;
rectangle.rotate(45)

As somebody who speaks English, you have an advantage, because this is pretty self-explanatory for you. It draws a rectangle at the coordinate (100, 100). Note that (0, 0) is the top left corner. The first number is the x value, which changes how far something is moved to the right, and the second number is the y value, which moves elements further down.

The rectangle takes up 200x300 pixels, and filled with red colour with a 5 pixel black border. Finally, we rotate it by 45°. Now try to play around with it a bit! You can read up on all the other possibilities in the documentation. Don't worry if it's hard to read at first, that's completely normal when approaching technical documentation. It's best to get started by reading the documentation for some part that you know already, to figure out the structure and language. For example, search for “rotate” to see the description of the rotation of an object.

For our Christmas tree, we started out by drawing triangles on top of each other. So we had to figure out the triangle coordinates, so that the point on top was centered between the other two. We started out on paper to make sure we understood the coordinate system, and then transfered our result to the paper.js editor. Then we played around with the numbers until we could draw first one, then several triangles.

Advice

The most important piece of advice is: proceed in very small steps. After each change, take a look at the results and if they match your expectations. The nice thing about a graphical project like this is that you can see if your code works as expected, and if it doesn't, the results are often very funny. More than once we generated trees that were unreasonably tiny, or huge, entirely transparent, or upside down!

Small steps could be: Draw one element. Draw another element. Add colour. Add a third element in a different colour. Change the width of the element. Make the width random. Make the amount of elements random. And so on.

The second most important piece of advice is: learn from others. The vaaaaaaaast majority of problems in this area have been encountered and presumably solved by others. It's good to try on your own at first – that way you learn more about the problem and its complexities. But if you can't find a solution soon, instead of growing frustrated: Search (e.g. on GitHub) for people with similar code and hopefully solutions. We did this a couple of times – for instance, the code to export the generated trees to PNG and SVG images is taken directly from a similar generator by bleeptrack. And now you can look up similar things in turn in our extensively commented code.

Randomness

After some time and experimenting, you'll end up with a drawing. Now you can add in the part that's the most fun: Randomness! It's not terribly easy, but a lot of fun, and will reward you with unexpected results.

JavaScript has a function named Math.random(), which returns a long number between 0 and 1. We built a small helper function which returns a random number between its parameters:

function randomNumber(min, max) {
  // This function produces a random number between min and max.
  // Min is inclusive, max is exclusive.
  return Math.floor(Math.random() * (max - min)) + min;
}

Feel free to copy this function, because building on this it's way easier to get started. Now you can do things like make your drawing between 100 and 300 pixels wide, or make it rotate by 45°-90°. You can also use this like dice or throwing a coin to choose between different features. We only draw a star on top of our Christmas tree for two out of three trees, by calling randomNumber(0, 3), and only drawing a star if the result is not 0.

Colour

The size of a drawing is the best first approach to randomness. It will make you think about some measurements some more: If parts of your drawing border a random part, they need to be positioned correctly, so you'll have to add some calculations for that. If this gets boring, you can also vary the colour.

Colours in paper.js and in many other digital systems are made up of three parts: red, green, and blue (the RGB system). These values are often on a scale from 0 to 255. paper.js uses values between 0 and 1 instead – but because I found it harder to reason about small numbers like that, we chose numbers in the [0, 255] range and divided them by 256, instead. This is how we determine the green colour of a tree:

var red = randomNumber(0, 100) / 256
var green = randomNumber(115, 255) / 256
var blue = randomNumber(40, 130) / 256
triangle.fillColor = new Color(red, green, blue)

So how do we find these colour ranges? How do we know that our red value should be between 0 and 100? If you search for Colourpicker in the search engine of your choice, you should find an interactive colourpicker, often as part of the search result page. If you move the colour point in the area that looks good to you, you can pay attention to the way the three values change, and which range is appropriate for each of them. This is way easier if you're not alone, by the way, because one of you can focus on moving the point in a good colour space, and the other can write down the values. Afterwards, you can finetune the colours, e.g. if you notice that your colours tend to come out too blue, you can reduce the upper limit of your blue range.

Goodreads → SQLite

rixx — Sun, 13 Oct 2019 00:28:43 GMT

Books! Disappearing into books is great, and I have well-founded suspicions that it's occasionally the only thing that keeps me fit for human company. I like to share my opinions of the books I read – mostly so that I can look it up in a couple of months or years, but also for the small-but-steady troupe of interested people. This usually takes the form of my monthly book blog post – but now, you can see the raw data, too!

Using goodreads-to-sqlite Source.

Exporting Bookmarks from FBReader

rixx — Fri, 19 Jul 2019 14:14:02 GMT

Carrying all those books is something I sure don't miss. Source.

I read a lot, and I read a lot across different devices. Usually, I have at least a book open on my Kindle, and one on my mobile phone. I also like to highlight passages that make me laugh, or think, or that touch me in some way. I collect some of those quotes in a fortune(6) file for further usage: Put it on login shells, share it with friends, use it as a tongue-in-cheek Patreon reward.

The Kindle just drops your highlights into a plain text file with a very readable structure, which is very pleasant to work with. It turned out that my Android reader app, FBReader isn't nearly so cooperative, so this post documents how to extract the data from an unrooted phone.

127.257 and other fun legacy IP addresses

rixx — Fri, 12 Jul 2019 13:49:01 GMT

I think I'm taking up a coat of arms. Source.

IPv6, the addressing scheme of the future, has been lacking adoption for decades now. Its complexity is an often cited reason: What's with the different kinds of addresses? What's fe80 supposed to be? And you can't even compare them properly, what with those pesky :: contractions!

Though … did you know that 127.257 is interpreted as a valid IPv4 address by programs such as ping and your browser? Let's look into this.

Street Orientation Charts

rixx — Sat, 14 Jul 2018 20:30:00 GMT

Geoff Boeing recently released two blog posts showing off how the OSMnx library can be used to show in which directions a city's streets go most often.

Oh look, it's vienna

Badge Manufacturing Howto

rixx — Sun, 27 May 2018 13:20:00 GMT

This year, I had the pleasure of running DjangoCon Europe in Heidelberg, as part of a wonderful team. As a part of our effort to make DjangoCon Europe feel special, and to make our attendees feel welcomed, I decided to manufacture the badges for nearly 400 attendees myself. This is my story in eight simple steps. (Sing to me of the man, Muse …)

What I thought the process would look like

Building a Windows install medium on Linux

rixx — Wed, 27 Sep 2017 21:15:00 GMT

The problem

Imagine you were living in a Linux-only world, and suddenly felt the urgent need to install Windows on a laptop, for reasons entirely your own and not up for debate. (I'll get into that in a different post, promise.) Now, seeing as you have probably installed your fair share of Linux systems, and/or created rescue systems (either urgently required or due to painful experience and resulting paranoia), you download the image file, and use a tool of your choice, maybe dd, to put the .iso onto a USB drive, as you are used to doing. You put the drive into the PC and … it doesn't accept it as a boot device.

The solution

Now, since you're not me, you won't first debug partition table fuckups, and figure out how exactly UEFI relates to GPT vs MRB partition tables. Instead, you'll quickly figure out that apparently Windows .isos are not made for easy booting and require some more magic. There are two ways to provide this magic on Linux:

The easy way

Since you already have a Windows image on your Linux Desktop – just use that image to create a Virtual Machine, and then use the proper Windows tooling to put it onto the USB drive. It's overly complex, but it just works, and had I thought of this, it would have saved me quite some trouble.

The Linux way

But maybe you don't have virtualization software set up already, or you don't want to use it, or you want to get this to work on Linux on principle, this is what you do: You get yourself a copy of WoeUSB, and either use their GUI (woeusbgui) or their command line tool (woeusb).

Caveat: sudo woeusb --device Windows10.iso /dev/sdb did not work for me. Instead I had to wipe the USB drive, make a new partition and a GPT partition table (use any old tool like gparted), and then run sudo woeusb --partition Windows10.iso /dev/sdb1.

Caveat 2: Microsoft does not provide checksums for their downloads, and apparently the installers don't or don't completely check their integrity. If the installation process starts, then aborts for weird reasons, try another download.

Ligretto

rixx — Wed, 02 Nov 2016 10:01:00 GMT

The Setting

Because my friends are the most enduring people there are, they indulged me and played several hours of Ligretto with me on my birthday. Yay! We had decided early on that we would play until somebody reached a total score of either 100 or -100 points.

Because my friends are nerds, as the hours passed we noticed that we were generating the most interesting data, and we'd have to look at it later on.

AOSA4 - 500 lines or less

rixx — Sat, 16 Jul 2016 00:00:00 GMT

This is my review and summary of the latest AOSA book "500 Lines or Less", where experienced programmers solve interesting problems in short(-ish) programs. The book is available for free online, but if you are interested and can afford it, please consider buying the PDF or paperback versions.

CSAW 2014 Writeup: pybabbies

rixx — Tue, 30 Dec 2014 23:00:00 GMT

At the recent CSAW14 I participated with the krebs team. Sadly, I had only little time for the CTF, but I managed to complete one task nonetheless. It was called pybabbies, belonged to the category Exploitation and yielded 200 points (on a scale from 100 to 500).