Javier's public fiddles
-
hDAO snapshot block selector
This example shows how to select the block level for the hDAO snapshot.
-
Life expectancy example
This example was motivated by two blog entries posted by Lisa Charlotte Rost on her blog. It shows the tight relationship between a country's average personal income and the average life expectancy. The point areas are proportional to the country's population. Left click on a point to see the country name. Drag the plot area with the mouse to pan in any direction. Zoom in and out with the mouse central button.
-
Two vertical axes example
Drag the plot area with the mouse to pan in any direction.
-
Evolving words
Particles compose words, words make sentences, and sentences evolve into stories.
-
Recursive puzzle
This sketch simulates a recursive sliding puzzle. Click the screen to increase or decrease the level of recursion. Original photo by Sukanto Debnath: http://www.flickr.com/photos/sukanto_debnath/2354607553
-
Oil painting simulation
Simulates an oil paint using a picture as a reference. The work by Sergio Albiac was my main source of inspiration: http://www.sergioalbiac.com This sketch has many optional parameters, but not all of them produce optimal results. Original photo by Sukanto Debnath: http://www.flickr.com/photos/sukanto_debnath/2354607553
-
See life
A flocking sketch using with p5.js and dat.GUI libraries Inspired by this flocking tutorial: http://www.flight404.com/blog/?p=459 http://libcinder.org/docs/dev/flocking_chapter1.html
-
Thousand words
Type some text on the keyboard to reveal the image. Left/right click decreases/increases the line separation. Picture by Petras Gagilas http://www.flickr.com/photos/gagilas/4495968987
-
Word limits
Click the mouse to start again. Works with any font and shape.
-
Leapfrog
The beauty of the leapfrog algorithm: http://en.wikipedia.org/wiki/Leapfrog_integration Image by Alex Proimos: http://www.flickr.com/photos/proimos/7810727314 Click the screen to reset
-
Simple tree generator
Click on the screen to generate a new tree.
-
Photo slices
Click on the screen to increase or decrease the number of slices. Move the cursor for some interaction. Picture from Sukanto Debnath http://www.flickr.com/photos/sukanto_debnath/3081836966/
-
Drawing balls
Inspired on the work from Robert Hodgin: http://roberthodgin.com/stippling/ Picture from Sukanto Debnath http://www.flickr.com/photos/sukanto_debnath/3081836966/
-
Flaring star
Move the cursor to change the star properties. The inspiration came from this great sketch: http://www.openprocessing.org/sketch/112601
-
Two axis example
This example shows the way to add two different axis scales to a given plot Uses the grafica.js library: https://github.com/jagracar/grafica.js
-
Oktoberfest example
(this sketch doesn't work completely because it cannot load the external cvs file) Every 4 years a curious coincidence occurs. I wonder how many Germans will try to vote totally drunk after a whole day at the Oktoberfest... Uses the grafica.js library: https://github.com/jagracar/grafica.js The data was obtained from Google trends
-
Default plot example
Default plot example from the grafica.js library https://github.com/jagracar/grafica.js
-
Multiple plots example
An example with multiple plots using the grafica.js library: https://github.com/jagracar/grafica.js Drag the mouse (+control key) over the first plot to pan in any direction. Left click to show the point labels. Click left in the second plot to recenter and use the mouse wheel to zoom.
-
Moving points example
Click to change the points movement. Drag to pan the plot. Uses the grafica.js library: https://github.com/jagracar/grafica.js
-
Multiple panels example
An example of a plot with multiple panels using the grafica.js library: https://github.com/jagracar/grafica.js