Update readme.md

Author: hamoid

readme.md

@@ -15,15 +15,7 @@ They are great for creating static / animated / interactive graphics and sound s
 
 My current tools include [OPENRNDR](https://openrndr.discourse.group/t/doodles-wall-c/51/3) and [GLSL](https://hamoid.com/post/in-the-mood-for-shaders/).
 
-### Roadmap
-
-- [x] Create thumbnails
-- [x] Create a visual index
-- [ ] Add tags to each sketch
-- [ ] Upload my sketches, one per day. I should be done in 2020.
-- [ ] Write a readme.md for each
- 
-| . | . | . | . | . |
+| ⠏ | ⠑ | ⠁ | ⠉ | ⠑ |
 | --- | --- | --- | --- | --- |
 | [uhmans<br><img src="processing/ideas/2006/04/uhmans/.thumb.jpg" title=" The oldest Processing sketch in my collection, from 22.04.2006.  It represents humans colectives. They feel good when there is enough distance. When they are too close there is conflict.  One of the first times I used object oriented code. I remember it feeling quite strange :) I was probably using https://github.com/processing/processing/releases/tag/processing-0112   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2006/04/uhmans/) <br><sub>animation, concept</sub> | [bezier Fish<br><img src="processing/ideas/2011/05/bezierFish/.thumb.jpg" title=" A program originally written in ActionScript (Flash) approximately in year 2000. This used to be my homepage for a while. Ported to Processing in 2011. One of my first sketches.  It draws animated bezier curves in which start, end and control points follow different bezier curves themselves.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/05/bezierFish/) <br><sub>line</sub> | [noise line<br><img src="processing/ideas/2011/08/noise_line/.thumb.jpg" title="">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/08/noise_line/) <br><sub>animation</sub> | [translate rotate<br><img src="processing/ideas/2011/08/translate_rotate/.thumb.jpg" title="">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/08/translate_rotate/)  | [noise is centered<br><img src="processing/ideas/2011/09/noise_is_centered/.thumb.jpg" title=" The blue line shows that noise spends most of the time at the center (near the value 0.5). Rarely, if ever, it will go to the top or to the bottom.  This is an attempt to fix that. We modify the noise value (n) in a way that the whole range of values is covered: from 0 to 1.  One drawback with this formula is that it's not continuous. It can disappear on the top and then appear on the bottom.  The red line shows the modified noise value.  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/09/noise_is_centered/) <br><sub>test</sub>  |
 | [sine acid<br><img src="processing/ideas/2011/09/sine_acid/.thumb.jpg" title=" Set the color of every pixel on the window based on multiple `sin()` operations applied to the position of the pixel.  This is the kind of programs I used to write in the 90s :-)  Animated. Uses time in the formulas to have an ever changing effect.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/09/sine_acid/)  | [sine rainbow<br><img src="processing/ideas/2011/09/sine_rainbow/.thumb.jpg" title="">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/09/sine_rainbow/)  | [sinecosine<br><img src="processing/ideas/2011/10/sinecosine/.thumb.jpg" title=" &quot;Spirograph&quot;, &quot;String art&quot; or &quot;pin and thread art&quot;?  Rotate two points around the center at different speeds. Connect the two points with a line of varying color.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/10/sinecosine/)  | [sinecosine2<br><img src="processing/ideas/2011/10/sinecosine2/.thumb.jpg" title=" &quot;Spirograph&quot;, &quot;String art&quot; or &quot;pin and thread art&quot;?  Rotate two points around the center at different speeds. Connect the two points with a line of varying color.  ``` mouse click = restart hold [space] for fade out [s] to save  ```    ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2011/10/sinecosine2/)  | [inf bezier<br><img src="processing/ideas/2012/02/inf_bezier/.thumb.jpg" title="">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2012/02/inf_bezier/) <br><sub>line</sub>  |
@@ -55,4 +47,4 @@ My current tools include [OPENRNDR](https://openrndr.discourse.group/t/doodles-w
 | [click To Erase<br><img src="processing/ideas/2019/01/clickToErase/.thumb.jpg" title=" A program that draws two layers and allows the user to interactively erase the top layer by dragging the mouse while holding the left mouse button down.  It shows an issue with [linear gamma color space](https://ninedegreesbelow.com/photography/test-for-linear-processing.html#painting)   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/01/clickToErase/) <br><sub>blend, gamma, interactive, trails</sub> | [circular Gradients<br><img src="processing/ideas/2019/04/circularGradients/.thumb.jpg" title=" Draw a grid of squares covering the window. The color of each square is chosen randomly from a list of colors. The squares are shaded with a circular gradient, implemented in a shader. Then a &quot;tornado&quot; effect is applied to the center of the window, deforming the squares.  There's an artifact when curving some lines that I later [solved](https://creativecodeberlin.github.io/Stammtisch/2019/05/03/ccs061.html) when porting this program to OPENRNDR.  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/04/circularGradients/) <br><sub>shader</sub> | [following2D<br><img src="processing/ideas/2019/04/following2D/.thumb.jpg" title=" A simple class for an object to follow a 2D target and reduce speed when getting near. If the target changes location suddenly the moving object turns towards the new target smoothly.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/04/following2D/) <br><sub>animation, physics, target</sub> | [gradient With Vertex<br><img src="processing/ideas/2019/04/gradientWithVertex/.thumb.jpg" title=" Draw a grid of rectangles covering the screen and maintaining a margin between rectangles and the borders of the window.  The recangles are filled with a gradient and also have a gradient stroke. This is achieved by setting the fill and stroke colors before each call to `vertex()`.  A better approach to gradients is by using shaders, as this technique does not allow rotating the gradient and is heavily influenced by the number of vertices and their order.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/04/gradientWithVertex/) <br><sub>static, gradient, grid, margin</sub> | [variable Thickness Lines<br><img src="processing/ideas/2019/04/variableThicknessLines/.thumb.jpg" title=" Shader based line drawing that produces lines that go from zero strokeWeight to full strokeWeight and back to zero. The program allows reloading the shader by pressing '0', and loading other shaders (if they were present) by pressing other number keys.  Press `r` to randomize, `s` to save.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/04/variableThicknessLines/) <br><sub>line, shader</sub>  |
 | [Thick Line Test<br><img src="processing/ideas/2019/06/ThickLineTest/.thumb.jpg" title=" A class for drawing pShape-based lines of variable thickness. The lines are made out of 4D points: x, y for position, z for depth and w for thickness. The program exports an .obj file when pressing the `s` key.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/06/ThickLineTest/) <br><sub>depth, line, obj, pshape, static</sub> | [crosses<br><img src="processing/ideas/2019/06/crosses/.thumb.jpg" title=" A program to generate the cover for the [Creative Code Stammtisch 62](https://creativecodeberlin.github.io/Stammtisch/2019/06/07/ccs062.html). Uses 3 point lights to create color gradients. Uses an exponential distribution so there are few large shapes and many small ones.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/06/crosses/) <br><sub>static</sub> | [Shader Texture Cube<br><img src="processing/ideas/2019/08/ShaderTextureCube/.thumb.jpg" title=" Simple shader-based generative texture applied to a rotating 3D cube.  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/08/ShaderTextureCube/) <br><sub>shader</sub> | [bezier similarity<br><img src="processing/ideas/2019/09/bezier_similarity/.thumb.jpg" title=" A mildly interactive sketch. The mouseX position sets the length of the drawn lines. [space] clears the background.  Lines are drawn starting on a circle, the exact point advancing clockwise. For each line it searches for 3 other nearby points at 3 different distances. It does that by first checking the pixel color on a photo at the spawn location. Then it searches three concentric circles in that photo for the most similar color in that virtual circle.  The spawn point and the 3 found points for the basis for a bezier curve. Instead of drawing that bezier curve directly, it interpolates smoothly towards that bezier curve. It does so to avoid jitter and reduce random jumps.  By coming up with different algorithms for moving the spawn point one can produce different aesthetics.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/09/bezier_similarity/) <br><sub>line, bezier, interactive</sub> | [sin rainbow<br><img src="processing/ideas/2019/09/sin_rainbow/.thumb.jpg" title=" A basic example of how to get all color hues without using the HSB mode. The variable `t` sets the hue. Then R, G and B are calculated based on `t` by using the `sin()` function.  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/09/sin_rainbow/) <br><sub>color</sub>  |
 | [draw Donut<br><img src="processing/ideas/2019/11/drawDonut/.thumb.jpg" title=" A simple method to create a ring-shaped PShape.  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/11/drawDonut/) <br><sub>pshape</sub> | [layer3D<br><img src="processing/ideas/2019/11/layer3D/.thumb.jpg" title=" Shows how to work with an animated 3D layer with transparent background which can be displayed multiple times.  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2019/11/layer3D/) <br><sub>pgraphics</sub> | [forum call method by name<br><img src="processing/ideas/2020/01/forum_call_method_by_name/.thumb.jpg" title=" In the Processing forum it was asked how to call a method by name. Here's one example using reflection.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2020/01/forum_call_method_by_name/) <br><sub>reflection</sub> | [irregular Line Between Two Points<br><img src="processing/ideas/2020/03/irregularLineBetweenTwoPoints/.thumb.jpg" title=" A method to draw an animated noise-bent line between two points.  Also shows how to create a square using polar coordinates. That is, how to get the radius of a square for any given angle.  float r = min(1/abs(cos(ang)), 1/abs(sin(ang)));  ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2020/03/irregularLineBetweenTwoPoints/) <br><sub>geometry, line</sub> | [ray Intersection<br><img src="processing/ideas/2020/04/rayIntersection/.thumb.jpg" title=" Geometry. Find out the intersection of two rays.  A ray has an origin (a location where it starts) and a direction. It goes infinitely in that direction.  Like a laser in perfect vacuum.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2020/04/rayIntersection/) <br><sub>geometry, interactive, intersection, ray</sub>  |
-| [line Segment Circle Intersection<br><img src="processing/ideas/2020/05/lineSegmentCircleIntersection/.thumb.jpg" title=" A function to calculate the intersection(s) between a line segment and a circle.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2020/05/lineSegmentCircleIntersection/) <br><sub>line, geometry, circle, intersection, interactive</sub> 
+| [line Segment Circle Intersection<br><img src="processing/ideas/2020/05/lineSegmentCircleIntersection/.thumb.jpg" title=" A function to calculate the intersection(s) between a line segment and a circle.   ">](https://github.com/hamoid/Fun-Programming/blob/master/processing/ideas/2020/05/lineSegmentCircleIntersection/) <br><sub>line, geometry, circle, intersection, interactive</sub>