Tracking Mouse Movement

itsonlydallis

Hi there,

I'm trying to create a program which performs certain actions based on the users mouse movement. For example, if the user drags their mouse in a "swish and flick" gesture (a la Harry Potter), sparks appear on the screen. I'm having a hard time wrapping my head around how I'm going to do this though. I'm using a modified p5.js library which does not allow me to import other libraries to it, so I'm going to have to build these functions on my own. I was thinking of creating an array with x and y coordinates that the user should follow, and just comparing those values vs the ones gathered when the user drags their mouse but I would have to manually write in those original x and y arrays which seems extremely inefficient. The idea is that other people will be re-creating this project from my code, so I can't give them arrays with hundreds of values that they need to type out.

Does anyone have any ideas on a more efficient way to perform this task?

blindfish

I'm using a modified p5.js library which does not allow me to import other libraries to it

Why not? What's to stop you loading a library alongside it? That would seem like the most sensible approach; particularly as people have already addressed your requirements rather well - e.g. $1 Recognizer which even allows you to record additional shapes manually... If nothing else that appears to have plenty of reference material ;)

itsonlydallis

I'm working with a very strict development environment. There is no HTML material in which I can import other libraries. I'm fairly new to this version of processing, but from what I can find, to import libraries with p5.js involves importing them through the HTML, the same way you would import your processing sketch. I have no access to the HTML, simply the js file. If there is a way to import this library to it, that would be amazing (this seems like exactly what I want) and please correct me if I'm wrong, but searching through the p5.js API has told me nothing but how to import through HTML.

blindfish

I'm working with a very strict development environment.

That might warrant some explanation: e.g. is this deliberate in order to ensure you code it yourself (i.e. the project is "homework")? Are there any limits on network access? etc...

In principle you could simply copy paste the library source code into your sketch: anything outside setup/draw is in the same scope as if it were loaded from a separate file. Alternatively you could try using some JS to load it in dynamically (various well documented approaches)...

GoToLoop

Some ".html" templates for loading p5.js (and others):

<meta charset=utf8>
<script src=http://p5js.org/js/p5.min.js></script>

<script>

// p5.js sketch goes here...

</script>

<meta charset=utf8>
<script src=script.js></script>
<script src=lib/p5.js></script>