Help with dragging an object using mousePressed

p5.js Coding Questions
21

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,  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.

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

22

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

23

Look at the command split () in the reference

1 Like
24

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.

25

read this for the submit: Help with using input values with variables along with if, else if code

when you got this use split()

1 Like
26

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.

1 Like
27

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

28

Yes, you can ask in the other thread please

29

@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?

30

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

1 Like
31

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

32

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,

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();
  }
}
1 Like
33

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.

34

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?

35

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

36

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?

37

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

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;
  }
}
38

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

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);
}
39

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.

1 Like
40

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.

1 Like