# Help with dragging an object using mousePressed

**URL:** <https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968>\
**Category:** Coding Questions\
**Created:** [September 19, 2020, 6:36pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968 "2020-09-19T18:36:40Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 24, 2020, 3:27pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/21 "2020-09-24T15:27:46Z")

</div>

Oh I see, drawing it on GIMP will definitely be a herculean task. For that I was thinking of getting graph sheets on the internet. There will be many of them on the net,&nbsp; they are usually in .pdf format and converting them to image file i.e. .jpeg won't be a problem. To derive the angle of a straight line.  
 assuming it is for the line made of circles 3 and 4, the equation to use will be; first you get the gradient, same as slope of the line gradient = -((y3 - y4)/(x3 - x4)); then you take a step further to determine the angle = (atan(gradient))\*360/2/PI;

This is definitely the solution to determine the angle of a straight relative to the horizontal(x) axis. I’ve include the link for ease of understanding.

> **[p5.js Web Editor](https://editor.p5js.org/Chigoz/sketches/w406_IlrU)**

Please let me know If you want the angles in another relative/reference position.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 24, 2020, 3:43pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/22 "2020-09-24T15:43:08Z")

</div>

The problem I’m having at the moment I want you to help me solve is: parsing a string of numbers separated by comma’s into an array. The string of numbers will be typed into an input box and then parsed into an array when a button is clicked.

This is a link to a similar problem solved in JavaScript, you can start viewing from 6mins50sec; [https://www.youtube.com/watch?v=w47qqd3CtzA](https://www.youtube.com/watch?v=w47qqd3CtzA)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2020, 4:04pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/23 "2020-09-24T16:04:23Z")

</div>

Look at the command split () in the reference

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 24, 2020, 4:26pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/24 "2020-09-24T16:26:57Z")

</div>

Thanks Chris for the reply, I’ve tried parsing the data but I couldn’t. In addition to the split function, their is also the input function and the button function to deal with that’s why I couldn’t solve the problem. Basically it involves creating a user interface comprised of an input box and a submit button.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 24, 2020, 4:35pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/25 "2020-09-24T16:35:30Z")

</div>

read this for the submit: [Help with using input values with variables along with if, else if code](https://discourse.processing.org/t/help-with-using-input-values-with-variables-along-with-if-else-if-code/23910/24)

when you got this use `split()`

---

<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:** [September 24, 2020, 4:39pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/26 "2020-09-24T16:39:55Z")

</div>

> [@Chigoz](#):
>
> This is the solution to determine the angle of a straight relative to the horizontal(x) axis.

Yes, I’m aware of that. Along atan2() you can also use angleBetween(). But you have to translate() to set both start points at 0,0 And then some weird things happened. Tomorrow I will have a look at it again.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 25, 2020, 1:23am UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/27 "2020-09-25T01:23:20Z")

</div>

Thanks for the link, it’s a similar problem that was solved there but the code is not available.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 25, 2020, 9:46am UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/28 "2020-09-25T09:46:17Z")

</div>

Yes, you can ask in the other thread please

---

<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:** [September 25, 2020, 5:40pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/29 "2020-09-25T17:40:48Z")

</div>

@Chrisir I spent some more hours trying to calculate the angle between two lines, but I just can’t get the exact values using the provided translate() angleBetween() or atan2(). I remember doing this in java , but now I ended up using plain geometry calculation getting the acos of the fracture of the dot product of the two vector lines divided by the product of the squared lengths, which works in sketch below But I really would like to use the functions above. Have you done this before in P5.js?

https://editor.p5js.org/noelpil/present/dmtY9eCY6

---

<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:** [September 25, 2020, 6:01pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/30 "2020-09-25T18:01:27Z")

</div>

> [@Chigoz](#):
>
> For that I was thinking of getting graph sheets on the internet.

I’ve modified the code above in the P5.js edit box, adding the grid.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 25, 2020, 11:11pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/31 "2020-09-25T23:11:03Z")

</div>

This is great, you have good grasp of textures for colouring , please checkout the string parsing problem.

---

<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:** [September 27, 2020, 11:26am UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/32 "2020-09-27T11:26:13Z")

</div>

> [@Chigoz](#):
>
> please checkout the string parsing problem.

What is what you actually want? Something like the code below?  
I prefer text explaining instead of having to watch a video.  
I also noticed that you wrote an angle code above. It’s only to the horizontal axis related though,

```auto
var my_number_array = [];
var only_numbers = '1234567890.-'
let my_number_string;
let button;
let input;
var sum = 0;

function setup() {
  createCanvas(500, 500);
  button = createButton('Add to array');
  button.position(20, 50);
  button.mousePressed(addToArray);
  input = createInput('');
  input.position(20, 20);
  input.input(myInputEvent);
  input.elt.focus();
}

function draw() {
  background(255);
  for (let i = 0; i < my_number_array.length; i++) {
    text(my_number_array[i], 250, 35 + (i * 20));
  }
  text('Sum of numbers in array = ' + sum, 300, 35);
}

function addToArray() {
  sum = 0;
  if(my_number_string != '') my_number_array.push(my_number_string);
  for (let i = 0; i < my_number_array.length; i++) {
    sum = sum + float(my_number_array[i]);
  }
  input.elt.focus();
  input.value('');  
  my_number_string = '';
}

function myInputEvent() {
  if ((only_numbers.indexOf(key) == -1)) {
    alert("Not a number");
    input.value('');
  } else {
    my_number_string = this.value();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 28, 2020, 12:16pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/33 "2020-09-28T12:16:40Z")

</div>

Thank you very much for your efforts, the reference angle relative to the horizontal axis opens up the use of angles to a lot of possibilities, you have done a great job with that. The string of comma seperated numbers will be added to the array in one instance on the click of a button. They will include negative numbers. Example we have an array ;[“2,3,7,-9,4,-3”] and after the button is clicked it becomes [“2”,“3”,“7”,"-9",“4”,"-3"]. The string split function will be required to perform this operation.

---

<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:** [September 28, 2020, 12:32pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/34 "2020-09-28T12:32:43Z")

</div>

Ok, that’s simple, but where is the outcome going to be used for? I mean it isn’t saveStrings(), is it?  
Or do you want the outcome printed in the console?

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 28, 2020, 1:46pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/35 "2020-09-28T13:46:09Z")

</div>

It will be used to perform calculations, printed to console and also plotted on graph.

---

<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:** [September 28, 2020, 1:56pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/36 "2020-09-28T13:56:19Z")

</div>

I’m sorry, but this is what I don’t understand. If you are going to perform calculations, why would you like to have them in double-quotes?

---

<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:** [September 28, 2020, 3:10pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/37 "2020-09-28T15:10:38Z")

</div>

If it is to show outcome as text, one of the many ways to do it is:

```auto
var my_number_array = [1, -200, 3, 4, 0.34, 1056];
let button;

function setup() {
  createCanvas(500, 500);
  button = createButton('Modify');
  button.position(20, 50);
  button.mousePressed(Modify);
}

function draw() {
}

function Modify() {
  let tp = 0, two = 0;
  for (let i = 0; i < my_number_array.length; i++) {
    let tn = my_number_array[i];
    let ts = '"'+tn.toString()+'",';
    let tw = textWidth(ts);
    tp += two;
    if(ts != ',') text(ts, 1.3*tp, 30);
    two = tw;
  }
}

```

---

<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:** [September 28, 2020, 4:05pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/38 "2020-09-28T16:05:37Z")

</div>

Or as you wrote: “to the console”, as well:

```auto
var my_number_array = [1, -200, 3, 4, 0.34, 1056];
var my_array_string;
let button;

function setup() {
  createCanvas(500, 500);
  button = createButton('Modify');
  button.position(20, 50);
  button.mousePressed(modify);
  let txt = ' ['+[1, -200, 3, 4, 0.34, 1056]+' ]';
  text(txt, 0, 30);
}

function draw() {
}

function modify() {
  my_array_string = '["'+my_number_array[0]+'", ';
  let tp = 0, two = 0;
  for (let i = 1; i < my_number_array.length-1; i++) {
    let tn = my_number_array[i];
    let ts = tn.toString();
    if(ts != ',') my_array_string += '"'+ts+'" , ';
  }
  my_array_string += '"'+my_number_array[my_number_array.length-1]+'" ]';
  background(255);
  text(my_array_string, 0, 30);
  print(my_array_string);
}

```

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 28, 2020, 8:02pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/39 "2020-09-28T20:02:21Z")

</div>

The comma separated numbers will be typed into an input box, then after the click of a button they are stored as an array. It is a user interactive interface. Thanks for your efforts.

---

<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:** [September 28, 2020, 8:41pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968/40 "2020-09-28T20:41:35Z")

</div>

I must say that reading your latest posts, they all request something different, and you never reveal if my latest posts are in some way useful for you, so I will leave it by this.

[Previous page](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968.md?page=1)

[Next page](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968.md?page=3)