member since August 22, 2011
profile picture

portfolio of

Plus+ Member


To play it in its original form, use the code in the IDE, uncommenting the line that copies the image. More funny and interesting.

Luhn's CA

Luhn's is one of the little algorithms most present in our everyday life. It's used to calculate the control digits of credit cards and check them in online transactions. This script explores some aesthetical properties of Luhn's algorithm using it in a process wherein each cell adquires a new state (represented by an integer in the range 0-9 mapped to a gray value) based on Luhn's checksum of the states of its neightbours.
A nicer pure canvas version here:

HTML5 AudioAPI + Microphone

An example of how to access microphone data and HTML5 Audio API sound analysis capabilities in a simple crossbrowser manner. It only works on recent versions firefox and chrome (maybe safari, I haven't checked it).
You can check full source code here (no processingjs, only javascript, using requestAnimationFrame instead of relying only on setTimeOut as processingjs does):
And you can try it that way here:

Truchet explorer

I've been playing a lot with Sebastien Truchet classic tilings lately. This sketch is intended to show its beauty and to share a simple codification of the patterns.
There are 96 different combinations (classic Truchet tiles as appeared in 'Description des métiers', 1705).

· 'a' and 'd' keys: change the current tile
· 'w' and 'x' keys: change the zoom level.
Check browser title for tile reference and position in the set.

Brightness & Contrast

Processing lacks a filter to adjust brightness and contrast of a given image, so I did this one, based on gimp's implementation of this operation. Although there're a lot of resources on this, if you're interested, Pippin's documentation of gimp features is excellent:

Press '←' or '→' to shift global brightness and '↑' or '↓' to shift global contrast.


I love Bridget Riley's work. : )
Click to create a new pattern.
'w' and 'x' to increase and decrease the number of circles
'a' and 'd' to increase and decrese the number of rays


A class to get closest points, distances and intersection points between segments and circles.


A filter for pictures, inspired by Claude Mellan's 'Sudarium of Saint Veronica'. Click to toggle the background picture (original/filtered).


A util class to calculate distances from one point to a line segment and an example. Code straight-forwardly ported from Pieter Iserbyt's java implementation of an algebra method described by Paul Bourke here: (I simply implemented it slighlty different and adapted it to PVector.)
Move mouse to draw circles centered in mouse position and tangent to the diagonals of the canvas.

Grid & Destroy

A generator for the last compositions I'm working on, based on grids composed of springs. Click the mouse to reset the structure using a rectangular grid (left button) or polar grid (right button).
Uses toxilibs for the verlet integration.

Image Tangram

An improvement of a previous sketch that plays with subdivision and edge detection to subdivide shapes according to a base picture.
Click to subdivide the shapes further (using random methods), press any key to restart.


A generator of fingerprint visualizations for sounds or music. It'd take a minute to load the song. Be patient once loaded to see the final results. The purpose is not (only) to visualize 'live' music/sounds but to create an unique graphic piece shaped by the properties of the song itself (aka a 'fingerprint' of the song).

"Basura sónica no deseada" of AZ-Rotator, "Spam", 2010.


Another tweak of my vector field sketches and another interesting way of using them to generate procedural drawings based on an buffered image.
Drag to draw, click to reset.

Delaunay Filter

Creates a delaunay triangulation of the significant points of a picture. For the edge detection it convolutes image pixels with a Sobel kernel.
For the triangulation I used a custom refactoring of the Triangulate library by Florian Jennet, that implements a qhull algorithm ported from Paul Bourke's work.

There's no interaction.

Picture: Portrait of Jean-Charles de Cordes, by Rubens.

Procedural Ink

This drawing machine uses a vector field to get a procedural portrait of a base picture.
Drag to draw, press any key to clean the canvas.

A cover for a book done with this approach:ón-de-andros


A drawing generator created to show how to implement an efficient perlin noise vector field using lookup tables.
Drag to draw. Press any key to reset.

Tangram Tilings

I updated the sketch here to a new version named Image Tangram that is more interesting in the way it works with images (using edge detection instead of setting an equal random probability of being subdivided to all shapes). So I changed the sketch here to a purpose more related with the algorithm inside: create tilings based on tangram shapes using random subdivision methods and random colors from a fancy palette.
Click to subdivide it further. Press any key to start again.


Got this just exploring how to create dynamically simple drop-shadows to enhance my drawings.
- Drag to draw.

Intersection Fruits

An experiment that came around playing with circle intersections. What'd happen if we place virtual concentric circles in the vertices of a regular polygon and real circles in its intersections?
- Left and right arrows to change the number of sides of the polygon
- Up and down arrows to change the number of concentric circles per vertex.
- MouseX controls the size of the real circles.
- MouseY controls the size of the virtual circles.
Circle intersection based on Daniel Quirk's C implementation of an algebraic method:


RPSE stands for Regular Polygon Subdvision Explorer. It's intended to explore the combination of the different subdivision methods to a regular polygon as original seed.
Keys 1 to 5 apply different subdivison methods (I don't know if they have proper names):
1.- Sparse barycentric
2.- Mirrored
3.- Dense Barycentric
4.- Starred
5.- Sutcliffe's
Use left and right arrows to reset the queue and change the number of sides of the polygon (from 3 to 12).

It'd be nice to have a list of good combinations, so kindly share your findings in the comments! Enjoy!

Recursive Cardioid

This drawing machine displays lines connecting particles rotating in a 'recursive cardioid system'. (Don't know how to explain it better, : )
The code is messy and probably deserves a lot of improvements, but I'm quite lazy to refactor it.
Click to reset.


A BZ reaction displayed onto a toroidal hexagonal grid. BZ reaction as modelled by Alasdair Turner:

Dedicated to Alasdair Turner.


A small generator of truchet tilings. Click to reset. MouseX will set the probability of getting one shape or the other.


An example of a method to divide line segments into equal parts in a fast and simple manner.
· MouseX sets the length of the lines in which the ellipses are centered.
· MouseY sets the number of parts/ellipses.

Henon Phase Strange Attractor

A take on Henon Phase strange attractors. I always get amazed by how so simple maths can yield so beautiful patterns...
Click to get a new attractor, setting an initial random angle.
[EDIT: fixed a strange behaviour that darkened the canvas as result of trying to paint outside of it]


This code visualizes color frequencies at regular distances to a certain point inside a picture.
Left-click to select the point, right click to come back to the original picture
[Picture of Tintin by Hergé, vectorized by Sander Huisman,]

HTML5 Local Storage

A simple proof-of-concept onto html5 local storage api. Just draw some dots clicking on the screen, go away and come back.
Press any key to remove all items from the database.


An eyecandy, tweak of the previous sketch 'Drawing Machine#12'. For further commentaries check this one.
A video of of this piece as showed on the media facade of MedialabPrado [#programalaplaza 2013]:

Generic CSR Matrix

This code is an implementation of a generic sparse matrix using a 'compressed sparse row' format (CSR). This kind of matrices are populated primarily by zeros and they allow saving memory allocation when used instead of its dense representations. Wikipedia explains it much better than me:

A hash grid

Inspired by a commentary by Marc Fleming I updated the code of the hash grid I were using in my sketches:
Spatial hashing is a collision detection technique, quite simple to implement and very cool for optimizing calculations. Former version took as reference an old code by Flux, and basically it updated the deprecated elements and simplified some methods:


This sketch tries to go deep into noise based warping, a technique described by Iñigo Quilez here:
and pointed out by Amnon Owed here:
(Thanks to both)

I've done the sketch as an exercise that tries to understand the technique and to observe the effect of the different parameters involved in the final result. I've designed it with this objective in mind, so it isn't a much efficient design for real time animations.


Last take onto data visualization generic tools. This time flow charts and the budgets of my f**d up country (next visualization: killed bankers). The chart takes its data from a .tsv file and makes a recursive node tree from it. I have used Ostrich Sans free font, by Tyler Finck. Complete credits (and links) inside.

Interaction: click on desired flow or node to get some extra info.

[Apologies for the possible mistakes in the translation of the data... although I try hard, English isn't one of my strong points. ;-)]


This app is a formal experiment that applies an emergence-kind of force to the points of a typography. Each one of these move in a direction that depends only on the positions of the previous and next point in the shape, with a force determined by Perlin noise.
Uses Geomerative library and FreeSans font.

- Press any key to select a char.
- Press any mouse button to begin-toggle the loop.


A bit kludgy recursive bitmap filter.
Mouse x-position sets the angle of rotation between slices and mouse-Y position sets the number and distance of these ones.
Original image from the comic-book "The Killing Joke", by my beloved Alan Moore and Brian Bolland.
This is a simpler version of the app I made it for a serie of prints on Obama's mirage:

Terrain 0.5

A generic class, from scratch, to display 3d grids. As example I have sculpted a terrain, using as generator the brightness data of a picture. It uses peasyCam.


A quite simple visualization sketch that plots song waves in a polar mood.
It can take over 2 minutes to load the song...

Song · Bordeaux
Author · MJCole
Record · Satellite EP
--copyrighted by its author--


A generic beta tool that plots over earth surface some cuantitative data, stored in a csv file.
As example I´ve displayed top 100 most populated metropolis.
Drag to rotate earth and hover elements to extract some info.

Credits to a lot of people, mainly Flink Labs for inspiration and code: look inside.


A drawing tool intended to be used with a graphic tablet in order to get some kind of charcoal drawings (although it´s possible to use the mouse only).
· e: to clean the screen
· h: to hide the control window
· u: to unhide the control window
· n: number of particles
· d: distribution diameter
· f: noise factor (a bigger value a rougher stroke)
· p: to adjust tablet pressure
It´s better to use it offline because the pen works much better (i.e. offline you can create shadows with short gestures)


A graphic generator, based on the polar displacement of a curve shifted and coloured by perlin noise.

-Click to reset the shape.

This code is an update of former SilkRoad. Changes:
- Reset method improved (it didn't work properly).
- Implementation of lookup tables to improve the performance.
- New output.


Just messing around with some particles guided by attractors and convolution. The latter one is based on dotlassie´s fast blur:
Click to create an attractor (they´ll define the shape of the vortex).
Press any key to reset.


Another small generator: a bezier curve rotates following two antisymmetric spiral paths.
Click to reset randomly the initial settings.


This is an hexagonal lattice generator, obtained by mapping to mouse the parameters of an hexagonal grid (height and side of the triangles that shape the hexagons).
Drag the mouse to add strata of patterns to the drawing. Although it´s nice to look at the transitions, I think best results are obtained with unconnected short gestures.


This is a circle lattice generator, done by mapping to mouse the polar distribution and size of a variable number of circles.
Drag the mouse to explore it.
(Does anybody know why sometimes processingjs runs faster than applets?)


Picture from "Akira" | Katsuhiro Otomo


Just playing with XOR operators, seduced by bizarre&&lovely "Logic Plaids", by krazyDad (


Take 2000 slave birds of 10 different species and make them work hard painting some expresionist artworks for you.
Press backspace to reset and enter to toggle the execution of the loop.


Minimal sound architectures.
It's an openGL sketch but I've uploaded it as P3D.
Use mouse to navigate (peasy). Press 's' for solid display and 'w' for wireframe.
Sound credits inside.


This sketch was intended for a nice silkscreen, so I went into bitmap patterns.
Sometimes when I see the sketch I can note strange repetitions of the same structure, like a cloud advancing to the viewer. I suppose it has to do with some math cycles in perlin algorithm, don't know...
[EDIT: Although the results are not spectacular, I like a lot the code. There is no explicit algorithm there: no for, no if. Only operators...]


A generator of abstract digital landscapes.

- Handle the camera with the mouse (peasy).
- Press 's' to reset and 'z' to halt/restart the loop.


Simple idea: to simulate a solid flowing, mapping some lights and shadows onto a moving delaunay grid.
No interaction.


Here I played with a particle system with interactions not based on flocking or similar. Thus, I played with some cross products, related to rotation forces (and electromagnetic fields, there's a really interesting post of Reza Ali on this on his blog).
Press 's' to restart and 'z' to toggle the loop.


This is a first prototype for the visualization of series of coxcomb charts. I´ve visualized migration data in Spain from 2001 to 2010 for the ten most-represented 2010 foreign nationalities (source and more info inside). The central polar chart displays data regarding the nationalities and the row of buttons above represent total values for each year.
- Left-click into the buttons above to change the dataset and hover the sectors to extract info.
- Right-click to toggle the display of the graphic scale behind.
- Drag the mouse in order to rotate the chart.


Drawing machine with motion constrained to certain angles.
Default: hexagonal grid (key '4').

Click to put a seed.
Key 's' to clean the screen
Key 'z' to stop/restart the loop
Keys '1'-'6' to change the angle
(15, 30, 45, 60, 75, 90)


A generic polar graph tool that reads information from a csv file. This example takes random and generic data, just for showing the implementation. More info inside
Hover the elements to check their connections, left click on them to display connections permanently.
Left-click any point else to clean all. Right click to show all.


Just a sketch I did for fun, inspired by Keith Peter's Lissajous webs.
Be patient.


A bunch of discipled particles marching through a force field. Takes as source of inspiration Marius Watz's 'Grid Distortion'.
Keys '1' and '2' to reset the drawing, using limits or not (default '1', limits on).
Click to halt the loop.
Inside there's another displaying method, using shapes instead of points.

This code has been updated:
This is a basic example purposed only for showing the implementation of a hash-grid, to optimize collision detection. This one is a tweak of a code by Flux, and updates deprecated classes and simplifies some methods:
5000 particles here.


An experiment with typography and noise, with some-kind-of fire effect :-)
It's set in ChunkFive, a wonderful free typography from The League of Moveable Type. Check them for more great-professional-free faces.
No interaction.


My first openp5 sketch :-).
A basic example in order to teach some p5 features.
Press any key for reset the settings and any mouse button in order to stop/loop the sketch.
followed by


Share Share Subscribe to sketches