Sharing and embedding simulations, all client side code available on GitHub
The Logics sanbox code is now available on GitHub
A server is now available which handles logins and retrieval of saves. A list of available saves can be found here.
Interactive simulations can now be embedded into webpages, such as the full adder displayed here!
In 2016 I started building an automated watering system to water my plants.
First prototype, 2016
The first version has three pumps which were driven by a relay and the moisture level of the plants is measured by a simple soil resistance sensor connected to a 8 bit analog to digital converter.
The frame holding everything together is made out of Lego.
Every plant has its own pump and flow-sensor (YF-S402) which makes it possible to pump precise amounts of water.
The relays and sensors are controlled by an Arduino UNO which is controlled by a Raspberry PI over USB. The Raspberry PI runs a Telegram bot which allows me to run the pumps remotely and obtain plots which show the moisture level of the plants over time.
The following changes were made:
15bit analog to digital converters instead of 8bit (ADS1115)
8 pumps and flow-sensors
2x ESP8266 to measure soil moisture and send it over WiFi to reduce the amount of cables
Capacitive soil moisture measurement instead of resistive.
Three color E-ink display to show current moisture levels and last moment of watering
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 1part 2part 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.
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.
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.
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.
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.
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 redgreen 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 redgreen 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:
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.
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.
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.
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.
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 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.
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