Nathan Vos

- I'm only sure of what I imagine -

- wat ik zeker weet verzin ik zelf -

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!

Scenic Flocks

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!

Scenes van Zwermen

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!

Inkteger

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!

Naming Color

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.

Kleur Benoemen

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.

Times of the Round Table

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.

De Ronde Tafel

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.

Brickify

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.

de klok

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

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.