Coloring a square grid by clicking

Question

I want to make an interface where a user can fill in a square grid by clicking. Some processing will then be done with these pixels to produce a new picture. How can I make this clickable interface? I thought about linking each little square to a set of mouse positions, but this seems unnecessarily complicated.

shrap · Accepted Answer · 2018-11-03T18:59:55.747

15

just select n for a nxn grid

n = 5;
Grid[Partition[
Table[DynamicModule[{col = White}, 
EventHandler[
 Dynamic[Graphics[{EdgeForm[Thick], col, Rectangle[]}, 
   ImageSize -> 
    Tiny]], {"MouseClicked" :> (col = 
     col /. {Black -> White, White -> Black})}]], {n^2}], n]]

here is the result

edited Nov 03 '18 at 18:59

answered Nov 03 '18 at 18:19

shrap

195
1
6

Is there a way to get the information out of the picture e.g. {{0,0,0},{1,1,1},{0,1,0}} for a 3x3 grid? – gilianzz Nov 03 '18 at 18:55
@gilianzz I found a way to do this and posted an answer – ZaMoC Nov 03 '18 at 23:27

kglr · Answer 2 · 2018-11-04T04:45:14.617

5

n = 10;
m = ConstantArray[0, {n, n}];
Row[{Dynamic[EventHandler[ArrayPlot[m, Mesh -> All, ImageSize -> 300], 
  {"MouseClicked" :> With[{p = Reverse[{1, n} + {1, -1} Floor@MousePosition["Graphics"]]},
   m[[## & @@ p]] = m[[## & @@ p]] /. {0 -> 1, 1 -> 0}]}]], 
 Dynamic[Style[MatrixForm[m], 24]]}, Spacer[20]]

edited Nov 04 '18 at 04:45

answered Nov 04 '18 at 00:31

kglr

394,356
18
477
896

1

I think you should use Mesh -> True in ArrayPlot – ZaMoC Nov 04 '18 at 01:33
good idea, thanks @J42161217. – kglr Nov 04 '18 at 03:49

score 1 · Answer 3 · answered Nov 03 '18 at 23:25

I think I found a "way to get the information out of the picture"

First Run the code in the first answer

Let's say you get

Out[15]=....(Grid)...

then you manipulate the grid and when you are done you must "run" (shift+enter) the final grid.

so, you'll get a new output like

 Out[17]=....(Grid)...

we are interested in the number "17" of the final output.
you take this number and place it in the begining of the function below

out = %17;
Map[ToExpression[(Characters @@ StringCases[ToString@InputForm[
      #], "vel[" ~~ __ ~~ "]}, E"])[[5]]] &, 
First[out], {2}] /. {0 -> 1, 1 -> 0}

this will give you the result you asked in the comment of the first answer

Coloring a square grid by clicking

3 Answers3