Hello!
Welcome to my little contribution to the world wide web. I like exploring web design, mathematics, animations, art, and everything else that happens to temporarily grab my interest.
On this website you can find some of my projects. They are listed here below, with a short explanation of what inspired them and how they work.
Enjoy!
Hallo!
Welkom op mijn kleine stukje internet, je vind hier alle vreemde zaken die ik heb gemaakt, omdat ze me bezig hielden. Dat gaat van web design naar wiskunde, animaties en kunst. Mijn projecten staan hieronder met een korte omschrijving van wat ze zijn, wat ze heeft geïnspireerd en waarmee ze zijn gemaakt.
Veel plezier!
This is my third game. It is a tetris game using a de stijl color palette, just like my Match game.
Dit is het derde spel dat ik heb gemaakt. Het is tetris, maar dan met de kleuren van de Stijl, net zoals mijn Match spel.
Match is the second game I made. It is a puzzle game where you have to move blocks to make lines or rectangles of the same color. The design of the game makes it seem as if you are playing with a Mondrian painting. The board changes with every move, so you get a new composition every turn. You can play to improve your own score, or play in zen mode, where you have infinite moves and you can enjoy the infinite number of compositions.
Match is het tweede spel dat ik heb gemaakt. Het is een puzzelspel, waarbij je blokken moet verschuiven om rijen of rechthoeken van dezelfde kleur te maken. De blokken zijn zo ontworpen dat het lijkt alsof je met een Mondriaan schilderij aan het spelen bent. Bij elke zet verandert het bord, zodat je altijd een nieuwe compositie krijgt. Je kunt spelen om je eigen score te verbeteren, of in de zenmodus, waarbij je oneindig door speelt en zo oneindig veel schilderijen kan samenstellen.
On this page you can relax completely silently with a collection of digital fidget spinners. Compose them together yourself with different shapes, colors and sizes. You can even stack the spinners on top of each other, which can have very psychedelic results. Or very ugly results, if you choose the wrong colors. I made this page especially for Abel Spekken, a great ex-colleague, who unfortunately went to a job one hour closer to his house.
Op deze pagina kun je helemaal geruisloos ontspannen met een hele verzameling fidget spinners. Stel ze zelf samen in verschillende vormen, kleuren en formaten. Je kunt de spinners zelfs op elkaar stapelen, wat hele psychedelische effecten kan geven. Of hele lelijke, als je de verkeerde kleuren kiest. Deze pagina heb ik speciaal gemaakt voor Abel Spekken, een toffe ex-collega, die helaas een uur dichter bij zijn huis is gaan werken.
This is an interactive app which builds on the basic article flocking p5.js sketch by Daniel Shiffman. I followed his Coding Train tutorial on YouTube Coding Challenge #124: Flocking Simulation and build my own design from there.
To make it run a lot more smoothly I also included a Quadtree optimization, with the help of another Coding Train tutorial: Coding Challenge #98.1: Quadtree - Part 1.
I defined several scenes for the flock, by changing the properties of the Boids, the strength of the alignment, cohesion and seperation algoritms, and some external forces. I hope you enjoy watching them!
Dit is een interactieve app die verder bouwt op de basis zwerm schets in p5.js van Daniel Shiffman. Hiervoor heb in zijn tutorial gevolg op het Coding Train kanaal on YouTube Coding Challenge #124: Flocking Simulation en ben daarna zelf verder gegaan.
Om het een beetje soepel te laten lopen, heb ik een Quadtree optimalisatie toegevoegd. Dit heb ik ook geleerd van een Coding Train tutorial: Coding Challenge #98.1: Quadtree - Part 1.
Ik heb meerdere scenes gemaakt voor deze zwerm, die je kunt bekijken met de knoppen in het menu. De scenes zijn gemaakt door de eigenschappen van de Boids (deeltjes) te veranderen, de invloed van de algoritmes voor richting, verzameling en scheiding aan te passen en ik heb een aantal externe krachten toegevoegd voor sommige scenes. Veel plezier!
This is a fun puzzle game. You will get a grid of white squares that have to be painted the right colors. Numbers ont the surrounding squares will help you figure out the colors. Try to paint all the squares the right color!
Dit is een puzzel spel met kleuren en cijfers. Je krijgt een veld met witte tegels en elke tegel moet je de juiste kleur verfen. De getallen op de omringde tegels kunnen je daarbij helpen. Probeer het hele veld te kleuren!
I've always immensely enjoyed all the odd names for even stranger colors of paint swatches in the hardware store. It seems like a fantastic job: naming colors. The special names for these colors aren't related to the hue of the color itself, but perhaps only to our associations with it. And so we end up with dream, ambition, and rollercoaster.
This applet exhibits the polar opposite. What if the name of a color was based on its similarity to a set of 12 already named colors. The new name is computed by taking the names of the two most similar colors of that set. The more similar two colors are, the more similar their names will be. The result if quite incomprehensible. I would much rather wonder what kind of color carelessness is.
Ik heb me altijd vermaakt met de rare kleurnamen van verfstalen in de doe-het-zelf-zaak. Het lijkt me echt een fantastische baan: kleurnamen verzinnen. De bijzondere woorden voor aparte kleuren zijn totaal niet gerelateerd aan de kleuren zelf, maar misschien alleen aan onze interpretatie en associaties. Zo komen we aan droom of ijver of achtbaan.
Deze kleine app is een voorbeeld van precies het tegenovergestelde. Stel dat de namen van nieuwe kleuren juist wel gebaseerd was op de daadwerkelijke kleur. De namen worden berekend op basis van de 2 meest lijkende kleuren uit 12 vaste kleuren. Hoe meer een kleur op één van de 12 basis kleuren lijkt, hoe meer de naam daarop lijkt. Het resultaat is vooral onbegrijpelijk. Dan verbaas ik me veel liever over wat voor kleur achteloosheid zou zijn.
This is a mesmerising animation of times tables on a circle. Looking at it for long periods of time might just be very relaxing. You can change the number of points on the circle, the times table to draw and the size of the steps of the animation.
Based on the video Times Tables, Mandelbrot and the Heart of Mathematics by Mathologer on YouTube.
Dit is een hypnotiserende animatie van vermenigvuldigingstafels. Als je er te lang naar kijkt kan je zomaar helemaal ontspannen, of juist knettergek worden. Je kunt gewoon blijven kijken of met de velden aan de rechterkant zelf het aantal punten op de cirkel, de snelheid en het startgetal aanpassen.
Deze animatie is gebaseerd op de video Times Tables, Mandelbrot and the Heart of Mathematics van Mathologer op YouTube.
Change any image to make it look like it is made out of 1x1 LEGO bricks. It draws a transformed image on an HTML canvas, so you can download the resultant image to your own device.
There are options to choose the level of pixelation or the number of bricks across or up and down of the result. However, the larger the total amount of bricks to draw, the longer it takes to draw them!
Currently it is only possible to choose an image from a few selected ones already present.
UPDATE: I'm working on a version that 'brickifies' webcam input: Bricked faces on the p5.js webeditor.
Verander elke afbeelding in een veld van 1x1 LEGO blokjes. Je kunt (in Firefox) zelfs de afbeelding die is gemaakt opslaan naar je computer.
Er zijn opties om in te stellen hoe sterk de afbeelding wordt vervormt (pixelation) of hoe veel blokjes breed (bricks wide) of juist lang (bricks high) de afbeelding wordt. Let wel op, als je een heel precieze afbeelding wilt, dan duurt het langer om de afbeelding om te zetten!
Op dit moment kun je niet zelf een afbeelding uploaden, maar alleen kiezen uit een vaste selectie.
UPDATE: Ik ben bezig met een versie die webcam input 'brickifies': Bricked faces in de p5.js webeditor.
A page reminiscent of de stijl. Between orthogonal lines, geometric shapes and bright colors you can read the time, date and an inspiring (at least I hope so) quote.
de klok was one of my first projects in which I used CSS Grid, but I have been using Grid ever since. It has been super easy to put content exactly where you need it on a page, without relying on the other content.
This project was directly inspired by the video CSS Grid like you are Jan Tschichold by Jen Simmons. She has a very helpful website with a lot of experimental grid designs.
Een pagina die doet denken aan de stijl. Midden tussen de rechten lijnen, geometrische vormen en felle kleuren kun je lezen hoe laat het is, welke dag het is en, hopelijk, een inspirerende quote.
de klok was een van mijn eerste projecten waarbij ik CSS Grid gebruikte en ik vind dat nu helemaal fantastisch. Het is super makkelijk om alle elementen op de juiste plaats te krijgen, onafhankelijk van de rest van de elementen.
Dit project was direct geïnspireerd door de video CSS Grid like you are Jan Tschichold van Jen Simmons. Zij heeft ook een hele mooie website met allerlei toffe CSS Grid voorbeelden.
Vierkante oogjes (square eyes) is a dutch idiom used when someone is looking at a digital screen too much.
I'm not sure what inspired this page. Perhaps simply the possiblity of making it.
Tja, ik weet ook niet zo goed waarom deze pagina bestaat. Omdat het kan, denk ik toch.