Home of Buys de Barbanson

Logics sandbox game first pre-alpha!

I have been working on a logics sandbox for quite a while now. I think it is time to show it’s progress using a first pre-alpha release. You can read about the development so far here: part 1 part 2 part 3

This version does not allow for saving your simulations and has bugs and such. New additions are the sound devices including a wave generator, fourier transform and amplifier. Sound information is passed via red connectors which do not connect to the normal logic connectors. Because I use the Web Audio API, the audio elements in the sandbox do not work in browsers which do not support this API.

Click here to try the pre-alpha version


Adding an element: select an element by clicking on the element in the list on the left, then click on the desired position in the simulation. Click two connectors to place a wire between them. Clicking an element in the game selects the element, when the element is configurable a list of options is shown on the right. First clicking on an element and then pressing the DELETE key removes the element from the simulation. ESC deselects any selected element. The ARROW keys allow for movement in the simulation world.

Screenshot of the logics sandbox.
Link to this article

WIP logic sandbox game part 3

This is a followup on part 2

I made many changes and will start to discuss the changes to the game engine. As I hadn’t taken any special attention to the performance of the engine so far, creating fancier effects resulted in the fps counter dropping dramatically and it was surely the right time to work on the performance. In the past the engine used a single canvas to draw all graphics on and every frame all graphics were refreshed. This method works fine for simple graphics but as I was adding shadows and many textures; many of these textures are static in appearance but expensive to render and thus a waste of resources to redraw every frame. I implemented an often used strategy; multiple stacked canvasses which are only updated when necessary. The temporary drawback is that I had to alter the render code of every element which I had put into the game so far; the engine changes and updating the render routines took about 8 hours. The result is worth it: the impact of adding more elements to the simulation on the frame has dropped severely and the new graphics result in a better experience.


Many new elements were added and others updated. First the logic gates; these have a symbol now which indicates its type and are configurable to allow for bus input; the logic gate will perform its logic operation on every line of the input busses and return the output per line in the input busses to the output bus. An option to allow for more than two logical inputs is planned.

A new input device has been added; the selector knob. This knob either performs line selection or returns a binary coded digit; in the first mode only the selected line is set to high in the output bus, in the latter mode the selected number is sent to the output in binary format. When clicked upon the knob will advance one position, the positions themselves are also clickable advancing the knob directly to the desired location.

A DAC (digital to analog converter) device has been added, which allows for picking a either digital or mechanical mode of operation. In the first mode the digital signal will be mapped in a range from zero to one. In the second this is performed by using a whiffle tree. The whiffle tree is completely animated (the amount of bits, and thus whiffles is customizable) and the output result is based upon the measured position of the top whiffle [animation on youtube]. A corresponding ADC has been added too; the analog input is mapped from a range from 0 to 1 to the selected digital range. Finally a device to create sine waves has been added.


The elements are now colored in order when placed (every next object you place will have a different color then the previous); this preset color can be changed later. By default when a wire is placed it will take the color of the sending element which makes working with bigger simulations a little easier as it’s easier to comprehend the structure.

I hope to make a public version soon, stay tuned!

On the left: the selector knob in two different modi. The binary mode configured selector knob signal is passed to a 7 segment display and a whiffletree DAC.Image of the logic gates configured to allow for bus input.
Link to this article

WIP logic sandbox game part 2

This is a followup on part 1

After endlessly placing many wires to test the elements I was implementing, I prioritized the addition of busses to the game. The bus connectors allow for many outputs per component, greatly reduce the wire spaghetti and result in less time spent on the construction of connections. Finally it is reducing work as I can put functions like the conversion between binary and integers in the connector 'class' code. The wire graphics I implemented before were very simplistic and not really good looking (just a line with a color depending on its state), I improved the look of the wires by adding some curvature to it and making them a little wider relative to the size of the connector it connects to.

The implementation of the bus connectors made it really easy to start adding basic computing elements; the ALU, registers, memory and multiplexers. An example of the ALU multiplying two numbers is shown in the first image. (The 7-segment display, binary to 7-segment converter and dip-switches are also a new addition). The logics elements look really boring at the moment, I am planning to improve this, but I have not yet decided what type of graphics they should get; either a symbolic look which clearly shows what the function of the respective component is, or a more technical look with an IC in the center of each component block.

In part 1 an old project terminal display was discussed. This display is very resource intensive as I model every pixel as an object, I did create a fast version but it doesn't look half as good so a faster version will not be implemented anytime soon. I updated this terminal a little to also include a barrel distortion to give an even better CRT feeling.

Screenshot of the newly added ALU.Screenshot of the terminal display and keyboard input which is activated when clicked upon.

Link to this article

WIP logic sandbox game

Playing around with logic gates is fun; I really enjoyed software such as Multimedia Logic, constructing massive messy computers during the summer breaks. Currently I have tests to learn and projects to finish, therefore I worked quite hard on a hobby project; a logic sandbox game.

The game, or should I say simulation engine? currently features the basic logic gates and some more fancy equipment such as a mill and electronic wind vane. For the wind vane I used the design from "How to measure wind?" and drew it in Inkscape (It is already fully functional). The reason I am adding objects like the mill to the game is to add at least some challenge to the game for the ones who lack ideas on what to build and it broadens the overall degree of possibilities too. The rotary counter I could reuse from another project, the counter is completely vector based; it doesn't use a single texture.

Next up are implementing more advanced ic's, terminal screen (See second image) and a tape-drive as that was one of the most fun objects in Multimedia Logic.

Edit: I implemented a tape drive based on the QIC tapes, the amount of tracks (bits) is configurable between 1 and 8, and the tape length is also configurable. The tape is nicely animated; the tape transitions realistically between the spindles. The drive has write and read mode, in read mode the drive produces floating states in between the bytes to allow tracking the tape position, in write mode the data supplied at the write connectors is simply written to the head position. The drive speed is optionally configurable by supplying an analog signal, and finally an 'end' detection connector is present which is 1 when the end of the tape is reached.

Another important feature I added is saving the game to JSON, enabling storage of levels on a server or maybe in the HTML5 web storage. I think enabling saving the level state lowers the barrier for the construction of more complicated machinery and it could allow for sharing of saves, which would be great.

Screenshot of the current state of the sandbox.Screenshot of a terminal screen simulator I wrote and might implement in this game.Screenshot of the new tapedrive.

Link to this article

Dynamic image hue using Javascript

CSS does not support altering the hue of an image, which is a pity because it can have interesting uses. You could of course load the image on an HTML5 canvas and alter the hue there, however this will be quite CPU intensive, especially for large images. Here I will discuss how I implemented a background image with variable hue. (Scroll around on this website to see the effect).

Most screens and beamers use a mixture of the additive primary colors red green and blue to generate the full spectrum of colors. We can use the same principle in order to change the hue of an image; pre calculate the 3 color channels of the image, stack these images and mix the required amount intensity from each channel using opacity.

I created the 3 channels using paint-dot net; I changed the image to sepia first in order to get the image in one color and then changed the hue of the image to red green and blue respectively. Then I saved the images as PNG files. As we are on the web and we require small images I compressed the images first using pngquant which is a lossy compression tool (50 percent reduction in my case) and finally Pngcrush which compresses the image losslessly (I had a 4 percent size reduction).

After generating the images we stack these using CSS:

.classForLayers{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; }

And finaly add an url for all three images;

#channedId{ background-position: 0px 0px; background: url(./yourimageurl.png) center center fixed; }

Then the opacity of the different channels can be changed in order to get to hue you like, for example using jquery: $('#channedId').css({opacity:0.2})

Creating colour channels to mix any hue you like

Link to this article

Procedural plants in Javascript

Code which procedurally creates plants.

Procedurally generating shapes which are plant like is very interesting. This algorithm randomly chooses some basic parameters such as the amount of branches and the amount of segments in the main stem. The main stem is given "energy", which is spent on growing other stems, when the end of the branch is reached either a flower or a leaf is grown. Leaves also create energy which is propagated throughout the plant, which results in the segments widening and extending. The plants are affected somewhat by "wind" but this is still a little unpolished.

Screenshot of some procedurally generated plants

Link to this article

New website launched

This place has been abandoned for too long.

Welcome to my website! I am Buys de Barbanson, I am a bioinformatics master's student at the University Leiden and the TU-Delft.

For years I wanted to redesign my website. I created about six different versions, which were all abandoned before I finished them. Making a website has proven to be hard; finishing it is even harder (at least to me it is). Finishing this website was possible by reducing the aims a little, starting simple and using existing design which has proven itself already on my posters and presentations.

Currently the website is entirely flat-file based, everything which looks dynamic is client side Javascript. The biggest feature is the code to load Sozi presentations on the fly as these are a little too big (about 5Mb) to serve to everyone opening the index page and I added some functionality which allows for rescaling and viewing the presentation in a theater like mode.

Link to this article

Drosophila GRNs review presentation

The following is a review presentation about the article Efficient parameter estimation for spatio-temporal models of pattern formation: Case study of Drosophila melanogaster Yves Fomekong Nanfack, Jaap Kaandorp and Joke Blom

The presentation has been made during the course "Genomics and Systems biology"@TuDelft, the presentation has been constructed in Inkscape, exported to png to preserve the custom font editing, reimported and compiled using Sozi.

Link to this article

Integrating genetic and gene expression evidence, review presentation

The following is a review presentation used for discussing the article Integrating genetic and gene expression evidence into genome-wide association analysis of gene sets by Xiong et all.

The article describes how SNP data and gene expression data (Microarray) can be integrated aiming for a better prediction of what sets of genes are responsible for a specific phenotypic class. Complexity and noise reduction is performed by grouping the genes into sets of which the members have a comparable function (pathway).

First the genes are scored separately. As there is no trivial way of weighting the SNP values for one gene, only the most significant SNP within a 250bp window is used. Then the score for both the SNP and the gene expression is merged by a scoring scheme described in the slides. After scoring the genes are sorted and enrichment for a gene set is verified.

The presentation has been constructed in Inkscape, exported to png to preserve the custom font editing, reimported and compiled using Sozi.

Link to this article

Hough transform in javascript

Because, why not?

The Hough transform is used to find lines or ellipses in an image. In the course Advanced Digital Image Processing @TuDelft this technique was described. Later while fiddling around with the plug and play hough transform in Matlab I really wanted to implement one myself; nothing is more unsatisfying than using things which already work.

This implementation finds lines and estimates start and endpoints of those lines. As I quite dislike Matlab I decided to write it in Javascript, all images are rendered on HTML 5 canvas. Do not expect any performance as this is a hobby project only :). Oddly enough it is way faster in Internet explorer than Firefox. Click

Screenshot of the Hough transform implementation in javascript
Link to this article

Ackermann steering in javascript

Hobby project: get a car to drive and steer.

I always wanted to program a car driving. I underestimated the complexity of this when I started, there are many translations involved, and I programmed this at a time when I didn't know about linear algebra. This implementation is written in javascript and uses the HTML 5 canvas to render on. This implementation uses the ackermann steering principle to move the car. Thus by this principle all axles point to a single center point which is also visualized in the simulation. Use the arrows on the keyboard to steer the car. The other cars will follow you and go right through you as I didn't bother implementing collision detection. Click

Screenshot of the Ackermann steering implementation in javascript
Link to this article

Learn the amino acids

During my bachelor's I had to learn all amino acids and their properties, as learning these bored me quickly I started writing a program which helps you learning the amino acids and their properties.

First you will see the table with all amino acids, hovering over an amino acid will show the corresponding structural formula. The actual test starts with easy questions, and learns what information you learned already. If you do well your level will increase which results in more difficult questions. The types of questions include: 3 letter codes (both ways), 1 letter codes (both ways), sizes, hydrophobicity states, and structural formulas. Enjoy learning the amino acids! Take the test

Screenshot of the amino acids learning tool
Link to this article