# Create image from interaction with website

**URL:** <https://discourse.processing.org/t/create-image-from-interaction-with-website/18315>\
**Category:** Project Guidance\
**Created:** [March 2, 2020, 3:43pm UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315 "2020-03-02T15:43:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fabiana](https://avatars.discourse-cdn.com/v4/letter/f/e9a140/32.png) [@Fabiana](https://discourse.processing.org/u/Fabiana)\
**Post date:** [March 2, 2020, 3:43pm UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/1 "2020-03-02T15:43:21Z")

</div>

Hello,  
is it possible through processing, I connect to a website for example: google, and through my interaction on the google page, for example clicks and scroll, generate a graphic, abstract image in processing?

Thanks

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 5, 2020, 2:57am UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/2 "2020-03-05T02:57:07Z")

</div>

> [@Fabiana](#):
>
> generate a graphic, abstract image in Processing?

You can get information from the mouse with [Robot (Java Platform SE 8 )](https://docs.oracle.com/javase/8/docs/api/java/awt/Robot.html), but I think that it will be very hard to do what you want with a browser.

You might want to use browser-side telemetry generation, like a Chrome extension, a Tampermonkey script, or a third-party tool, and then send clicks and coordinates to your sketch from the browser, rather than trying to collect data on the mouse from the sketch through the operating system.

- [Usability Testing Tools: The Complete List (2019) - The Good](https://thegood.com/guide/usability-testing-tools/)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 5, 2020, 4:27am UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/3 "2020-03-05T04:27:48Z")

</div>

Hi Fabiana, welcome to the forum.  
I would do this with the help of [AutoHotkey](https://www.autohotkey.com/docs/AutoHotkey.htm), which is C++ wrapper designed for this kind of things. It’s an easy to use language that can also interact in the background with Processiing.  
If your gonna try, please let us know the results.🙂

---

<div class="post-metadata">

**Author:** ![Fabiana](https://avatars.discourse-cdn.com/v4/letter/f/e9a140/32.png) [@Fabiana](https://discourse.processing.org/u/Fabiana)\
**Post date:** [March 6, 2020, 3:59pm UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/4 "2020-03-06T15:59:44Z")

</div>

Yes, I want to generate an abstract image through the user’s interactivity with a website, I don’t necessarily need more technical info. just an abstract image. I don’t know much or almost nothing about code. I thought that there could be software that could generate an image within those parameters.

---

<div class="post-metadata">

**Author:** ![Fabiana](https://avatars.discourse-cdn.com/v4/letter/f/e9a140/32.png) [@Fabiana](https://discourse.processing.org/u/Fabiana)\
**Post date:** [March 6, 2020, 5:28pm UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/5 "2020-03-06T17:28:50Z")

</div>

this:

> **[Art within Art - Tracking my Mouse on Photoshop - Nicolas El Hayek](https://www.nicolashayek.me/art-art-tracking-mouse-photoshop/)**
>
> Sometimes the simplest form of art is the one left unnoticed, visualized through our mundane routines and unconscious repetitions that we barely take into account. Any abstract piece will remain out of this world until we find ourselves in...

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 6, 2020, 6:37pm UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/6 "2020-03-06T18:37:49Z")

</div>

If you can wait some time I’ll write a code in AutoHotkey that captures mouse clicks and, if you wish, also mouse-click-dragging and than saves the data in a file.  
This data can then easily be used in a processing program and draw an art sketch like above.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 16, 2020, 10:32am UTC](https://discourse.processing.org/t/create-image-from-interaction-with-website/18315/7 "2020-03-16T10:32:56Z")

</div>

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.](https://drive.google.com/open?id=1RB__ZIdrJUoA-b_6fKzd6DynIp6ZsSL2)  
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.

```auto
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:

```auto
 // 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/30624fc22a61045d779176abc01a743246fbdd48.gif)