Create image from interaction with website

Processing Project Guidance
7

Hi @Fabiana
Sorry. I almost forgot my promise to post the Auto hotkey code, to capture mouse clicks and drags. But here it is. You can download the very small (30 Mb) Auto hotkey ide here. It installs easily and once finished, right-click on the desktop and choose ‘New \ Autohotkey Script’ Paste the code and save it. By double-clicking the icon, a message box will explain how to start and end, recording. The script will be running in the background., and when ended two files, mouse_clicks and mouse_drags will be saved in C: hard drive. If you don’t want to install AHK you can download an executable of the script here.
I also wrote a simple Processing sketch for you to start with. The image is not exactly an artwork, it’s just meant to be an example.

MsgBox,1, , To start recording press F1`nTo end and save the
and program press F2`nThe files will be saved in C:\MouseEvents
IfMsgBox CANCEL
ExitApp

F1::
Allowed = A
return

F2::
FileAppend, %PCX%~%PCY%, C:\MouseEvents\mouse_click.txt
FileAppend, %PDX%~%PDY%, C:\MouseEvents\mouse_drag.txt
ExitApp

~LButton::
MouseGetPos,SX,SY
block = 0
if (Allowed != %A%){
  while GetKeyState("LButton", "D") { 
    MouseGetPos,X,Y
      If((SX != X) || (SY != Y)){
        PDX = %PDX%,%X%
        PDY = %PDY%,%Y%
        MouseGetPos,SX,SY
        mouseDrag = D
      } else { 
        if(block = %0%){
          PCX =  %PCX%,%X% 
          PCY =  %PCY%,%Y%
          block = 1
      }
     }
  }
  if(mouseDrag != %D%) {
    PDX = %PDX%,!
    PDY = %PDY%,!
    mouseDrag =
  } 
}
return

Processing:

 //  Special random array with lower possibility off picking random high numbers for values up to 500
//  The table was made by a program you can find in this topic:  https://discourse.processing.org/t/random-probability-customizing-random-function/18571/8?u=noel
int[]num={14,14,14,14,24,29,33,40,46,50,54,60,64,67,71,74,78,82,85,89,93,95,100,102,104,106,109,112,114,117,120,123,125,127,130,133,136,139,143,146,150,153,156,160,163,168,170,174,179,182,187,188,187,14,14,14,13,13,13,13,13,13,13,12,12,12,12,11,11,11,11,11,11,10,10,10,9,9,9,9,8,8,8,8,8,7,7,7,7,7,6,6,6,6,5,5,4,4,4,4,4,4,4,4,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,4,4,5,5,6,7,7,8,9,10,10,10,11,12,13,13,15,16,18,20,22,25,31,35,41,44,46,48,51,54,57,61,65,69,73,77,81,85,89,93,97,101,109,113,120,123,131,140,144,152,160,165,175,184,194,200,200,198,197,194,190,185,183,177,173,170,166,161,157,148,140,132,109,82,69,57,47,39,29,23,19,14,10,7,7,7,7,7,7,7,8,8,8,8,8,8,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,5,5,6,6,6,6,7,7,8,9,9,9,10,10,11,11,11,11,11,11,12,12,12,13,13,13,13,13,13,13,14,14,14,14,14,14,14,14,14,15,15,15,15,15,15,15,15,15,16,16,16,16,16,16,16,16,16,17,17,17,17,18,18,18,18,18,18,19,19,19,19,28,29,33,36,39,41,43,45,47,49,52,54,56,58,60,62,65,67,70,72,75,77,80,83,86,88,91,93,96,100,102,105,107,109,112,115,118,122,124,127,130,132,135,137,140,144,147,150,152,155,159,164,168,171,174,177,180,184,190,195,199,202,205,209,214,218,222,226,229,234,238,241,248,255,258,265,276,287,308,324,339,348,363,373,381,389,394,402,405,405,404,403,400,396,391,383,377,370,356,170,166,164,163,160,157,155,153,151,89,86,84,82,80,79,77,75,73,71,70,68,56,52,47,44,42,38,37,37,36,35,35,34,34,34,33,33,33,32,32,32,31,31,31,30,30,30,29,29,28,28,28,28,28,27,27,27,27,27,26,26,26,29,31,34,37,39,41,43,45,47,50,52,55,57,59,60,62,65,67,69,72,74,76,79,81,83,86,89,91,94,97,99,102,104,106,109,112,114,117,120,122,125,128,130,133,136,138,141,143,146,150,154,158,162,166,170,174,178,182,186,190,197,203,207,210,214,217,220,224,227,229,232,235,238,241,245,248,251,256,260,265,270,274,277,280,285,290,294,298,301,306,312,318,323,328,332,335,340,346,351,354,357,362,367,371,375,379,383,388,393,396,400,405,409,411,413,415,415,412,410,407,402,396,390,386,379,371,366,361,355,350,344,339,333,328,322,315,305,296,288,281,275,264,256,249,239,232,226,224,223,222,221,221,220,219,218,217,216,214,213,213,212,211,210,209,208,207,206,205,203,202,201,199,197,196,195,194,193,192,191,190,188,187,185,183,182,180,179,177,175,174,172,171,169,167,165,163,161,159,158,156,154,152,150,148,146,144,142,140,138,136,134,132,130,127,125,123,121,119,116,114,112,110,107,101,85,61,55,48,46,44,42,41,40,38,36,35,33,32,32,32,32,32,32,32,32,32,33,33,33,33,34,34,34,34,34,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,45,46,46,46,46,47,47,47,47,47,47,47,47,48,48,48,48,49,49,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,495,67,67,68,68,68,71,72,72,72,73,73,73,73,74,74,74,74,74,74,};
String[] c_x, c_y, split_dx, split_dy;
int t;

void setup() {
  size(1200, 600);
  background(255);
  stroke(200);
  strokeWeight(2);
  fill(0);

  // Extracting click coordinates from txt file into arrays and draw them
  String clicks[] = loadStrings("C:/mouseEvents/mouse_click.txt");
  String str_c = clicks[0];    // The one text srting devided in first half x values, second half y values
  String[] c_xy = split(str_c, "~");     // The one text srting devided in first half x values, second half y values
  c_x = split(c_xy[0], ",");    // The x value clicks array
  c_y = split(c_xy[1], ",");    // The y value clicks array

  // Extracting drag coordinares into arrays and draw them
  String drags[] = loadStrings("C:/mouseEvents/mouse_drag.txt");
  String str_d = drags[0];
  String[] d_xy = split(str_d, "~");          // The one text srting devided in first half x values, second half y values
  String[] d_x = split(d_xy[0], "!");         // The x value drags array
  String[] d_y = split(d_xy[1], "!");         // The y value drags array
  stroke(150);
  for (int i = 0; i < d_x.length; i++) {      // For each drag...  ( total number of drags)
    split_dx = split(d_x[i], ",");            // The x value array
    split_dy = split(d_y[i], ",");            // The y value array  
    for (int t = 1; t < split_dx.length-1; t++) {   // Draw the drags
      line(float(split_dx[t]), float(split_dy[t]), float(split_dx[t+1]), float(split_dy[t+1]));
    }
  }
  
   // Clicks drawn as circles with diameter values out of RandomTable below
  for (int i = 0; i < c_x.length-1; i++) {
    int rnd = num[int(random(0, 974))];
    fill(random(0, 255), random(0, 255), random(0, 255));
    circle(float(c_x[i]), float(c_y[i]), rnd/15);
    stroke(200);
    strokeWeight(1);
    fill(255, 10);
    circle(float(c_x[i]), float(c_y[i]), rnd/2);
    stroke(200);
  }
  
}

Screenshot

1 Like