Dynamically splitting Disks with Mouseover

Question

I've recently stumbled across this site: Koalas to the Max, and the first thought that came to my mind was "I want to recreate this with Mathematica".

As a first step I tried to create a Disk that splits itself up into four disks, when the mouse cursor touches it. Those four disks should in turn split themselves up. Here's what I have so far:

makeDisks[pos_] := makeDisks[1, pos]
makeDisks[level_, pos_] :=
 Module[{
   disk = Disk[pos, 1/level]},
  Mouseover[Dynamic@disk, Dynamic[disk = makeDisks[level + 1, #] & /@ 
   (pos + # & /@ (1/(2 level)) Tuples[{-1, 1}, 2])]]
  ]

(* test with the following *)

 Graphics[{makeDisks[1]},
   PlotRange -> {{-1, 1}, {-1, 1}}]

For the first disk this seems to work just as I want it. For later steps, however, I got the positioning wrong and some of the disks go back to larger ones, when another one is touched. How can these issues be fixed?

As a next step I want to add colors to the disks. Maybe this can be done by using MapIndexed with makeDisks on the ImageData of some image. The colors in each step should probably be the mean values of appropriate subsets of the image data.

Any help to move this little program forward is highly appreciated!

Answer 1

Here's a simple way using buttons, for some reason AutoAction is not working so you have to click, anyone know why?

nextPos[p_, r_] := {p + # r/2, r/2} & /@ Tuples[{1, -1}, 2]

DynamicModule[{diskList = {{ {0, 0}, 1}}},
 Graphics[Dynamic[
   Button[{ColorData["Rainbow"][Last@#], Disk @@ #},
      diskList = DeleteCases[Join[diskList, nextPos @@ #], #]
      ,AutoAction -> True
      ] & /@ diskList]]
 ]

The coloring is only based on depth (radius)

Basing color on underlying image:

background = ImageCrop[ExampleData[{"TestImage", "Peppers"}], AspectRatio -> 1];

DynamicModule[{diskList = {{{0, 0}, 1}}}, Graphics[Dynamic[
   Button[{RGBColor@ImageValue[background,First@#, DataRange -> {{-1, 1}, {-1, 1}}],
       Disk @@ #} 
     ,diskList = DeleteCases[Join[diskList, nextPos @@ #], #]
     ,AutoAction -> True] & /@ diskList]]]

Using code from @Szabolcs comment it's possible to split the disks without clicking:

(* Create at most 2^6=64 disks in a row *) 
rmin = 2^-6;
DynamicModule[{diskList = {{{0., 0.}, 1.}}}, Graphics[Dynamic[
  EventHandler[{RGBColor@ImageValue[background, First@#, DataRange -> {{-1, 1}, {-1, 1}}], 
                Disk @@ #}
    ,{"MouseMoved" :>
      If[Last@# > rmin, diskList =DeleteCases[Join[diskList, nextPos @@ #], #]]}
   ] & /@ diskList]]
]

Answer 2

Alternative

DynamicModule[{visited = False}, 
    Dynamic@EventHandler[
      If[visited, 
       Thread@Translate[#0@#, {1, -1}~Tuples~2]~Scale~
        0.5, {ColorData["Rainbow"]@Random[], #}], 
      "MouseEntered" :> (visited = True)]] &[Disk[]] // Graphics

Other version. Works "more or less" fine. Read comments

SetAttributes[translateOnHover, HoldFirst];
s : translateOnHover[onVar_, animationLength_, animationRate_: 200][
   prim_] := 
 With[{creationTime = Clock[Infinity]~Refresh~None}, 
  DynamicModule[{visited = False}, 
   Dynamic@If[visited, 
     With[{visitedTime = Clock[Infinity]~Refresh~None}, 
      With[{currentTime := 
         1/animationLength (Clock[{0, visitedTime + animationLength, 
              1`/animationRate}, visitedTime + animationLength, 1] - 
            visitedTime)}, 
       Thread@Translate[s, ({1, -1}~Tuples~2) /. 
           pt : {_, _} :> Dynamic[pt currentTime]]~Scale~
        Dynamic[currentTime /. t_ :> 1 - t + 0.5 t^2]]], 
     EventHandler[{ColorData["Rainbow"]@Random[], prim}, 
      "MouseEntered" :> 
       If[onVar && 
         Refresh[Clock[Infinity], None] - creationTime > 
          animationLength, visited = True]]]]]

With[{animationLength = 0.8, animationRate = 80}, 
  DynamicModule[{on = False}, 
   Column[{Row[{Button["Start", on = True, Enabled -> Dynamic[! on]], 
       Spacer[20], 
       Button["Stop", on = False, Enabled -> Dynamic[on]]}], 
     Graphics[
      translateOnHover[on, animationLength, animationRate][Disk[]], 
      ImageSize -> Medium, PlotRange -> 1.2 {{-1, 1}, {-1, 1}}]}, 
    Alignment -> Center]]] // Panel