Help with dragging an object using mousePressed

p5.js Coding Questions
1

I created a hexagon by using a function, I intend to mousePress when the cursor is inside the hexagon and drag it around similar to the object shown in this sketch; https://editor.p5js.org/enickles/sketches/H1n19TObz

Please help achieve my objective. Many thanks.

This is what I’ve done so far. You can check them out using p5.js online editor.

function setup() { createCanvas(400, 400); }

function draw() { background(200,110,145); stroke(255); strokeWeight(5) noFill(); regularPolygon(180,200,6,100,PI*0.245); }

function regularPolygon(x,y,n,radius,rotation){ beginShape(); for(let i=0; i < n; i++){ vertex(x+cos(i*TAU/n+rotation)*radius,y+sin(i*TAU/n+rotation)*radius); } endShape(CLOSE); }
1 Like
2

Hi @Chigoz
Because it is a polygon I used get() color in mouseDragged(), to be sure to only drag if the mouse is pressed within the polygon, so if you change the shape color, you also have to change get() color accordingly.

var mx = 200, my = 200;

function setup() { 
  createCanvas(400, 400);
  stroke(255); 
  strokeWeight(5); 
  fill(255, 0, 0);
  print("q");
} 

function draw() { 
  background(200, 110, 145); 
  regularPolygon(mx, my, 6, 100, PI, 0.245);
} 

function regularPolygon(x, y, n, radius, rotation) { 
  beginShape(); 
  for (let i = 0; i < n; i++) { 
    vertex(x+cos(i*TAU/n+rotation)*radius, y+sin(i*TAU/n+rotation)*radius);
  } 
  endShape(CLOSE);
}

function mouseDragged() {
  let cm = get(mouseX, mouseY); 
  let cp = [255, 0, 0, 255];
  if (eqcolor(cm, cp)) {
    mx = mouseX;
    my = mouseY;
  }
}

function eqcolor(a, b) {
  return a[0] == b[0] && a[1] == b[1] && a[2] == b[2] && a[3] == b[3];
}
1 Like
3

Hi Noel, I was surprised to see your amazing reply and solution to my question, I’m living in London and I should be asleep by now but for some queer reasons I’m awake. You nailed it, you dotted every i and crossed every t. You solution will open me up to a breakthrough. I’m a self taught programming enthusiast,I won’t call myself a programmer lol. What I do most of the time is watch tutorials on YouTube. You programmers won’t cease to amaze me. I couldn’t have solved this problem anytime soon without your help. The code is so clean and well structured and the rendering was superb, you are a star.Thanks a million!

The parameters in the contructor are actually 5.This[regularPolygon(mx, my, 6, 100, PI, 0.245);] on line 13 was a mistake from me,I guess it is error due to copying, it should have been [regularPolygon(mx, my, 6, 100, PI*0.245);].That is PI multiplied by 0.245.

I need one more help ; I want a second copy of the Hexagon.

regards

Chigozie

1 Like
4

If you are going to use a great number of objects, it’s better to make a class. If it’s just a few, you can do it with code as below.
I don’t know if the clicked polygon needs to become foremost. If that’s the case you need to use a boolean with multiple regularPolygon calls to set the right order of drawing in the draw() function.

var cm, mx1=mx2= 200, my1 = 100, my2 = 300;

function setup() { 
  createCanvas(400, 400);
  stroke(255); 
  strokeWeight(5); 
  textSize(60);
  textAlign(CENTER, CENTER);
} 

function draw() { 
  background(200, 110, 145); 
  fill(255, 0, 0);
  regularPolygon(mx1, my1, 6, 100, PI, 0.245);
  text("1", mx1, my1);
  fill(254, 0, 0);
  regularPolygon(mx2, my2, 6, 100, PI, 0.245); 
  text("2", mx2, my2);
} 

function regularPolygon(x, y, n, radius, rotation) { 
  beginShape(); 
  for (let i = 0; i < n; i++) { 
    vertex(x+cos(i*TAU/n+rotation)*radius, y+sin(i*TAU/n+rotation)*radius);
  } 
  endShape(CLOSE);
}

function mouseDragged() {  
  let cp1 = [255, 0, 0, 255];
  let cp2 = [254, 0, 0, 255];
  if (eqcolor(cm, cp1)) {
    mx1 = mouseX;
    my1 = mouseY;
    p1 = true;
  }
  if (eqcolor(cm, cp2)) {
    mx2 = mouseX;
    my2 = mouseY;
    p2 = true;
  }
}

function mousePressed() {
  cm = get(mouseX, mouseY);
}

function eqcolor(a, b) {
  return a[0] == b[0] && a[1] == b[1] && a[2] == b[2] && a[3] == b[3];
}
2 Likes
5

Thank you very much Noel, your effort and help is very very impressive. It will just be two objects(I’ll try to make multiple objects just for learning and fun), I intend to eventually join the centre of the two hexagons with a straight line, it will be a stretchable and movable line and I will prefer object1 to always remain relatively on the West/Left and the object2 always on the East/right.The can move up and down in their relative positions.They can go fully cycle but that will require some extra coding I suppose(My intention for this project is to calculate the gradient of a straight line). Check out the image attached within this comment. Thank you.

Movable Line for Noel
Movable Line for Noel1524×1488 59 KB

1 Like
6

Okay, so now this is up to you.
Let me know if you made it.

1 Like
7

Lol, I said I will create multiple objects just for learning and fun, it’s not part of my project. I need help with joining the two objects with a straight line that is stretchable and movable.

8

OK. Post what you already did, we’ll try to fix it.

1 Like
9

Ok, I haven't already done anything before you replied. The image I sent earlier was created on "The Microsoft Paint" software, I drew it as an illustration so you will be properly guided. Your solution to my problem was great, I had issues with the variable declaration mx1=my1=200. After I seperated them everything went out of hand and I got stuck. It took me a very long time to solve the problem, my approach drifted away from yours. I will like you to solve the problem your own way. Make the x and y positions for the two objects to be different.



Please check the "if" conditional statements in my work, I'm having issues defining boundaries within the objects.



This is a link to my solution; https://editor.p5js.org/Chigoz/sketches/qmNAZsLVg







 I want to keep touch, this is my email and facebook handle; chiobiteahsppttato@yahoo.co.uk  ,  https://m.facebook.com/chigozie.obialor



I'm looking forward to read from you in the alternative sites.



regards



Chigozie

10

The actual declaration I used in my code is: mx1=mx2= 200;
This is the same as: mx1 = 200; mx2 = 200;
These are initial values to give the polygons a position at sketch startup.
To connect the objects with a line just add this line to the code I posted above.
Write: line(mx1, my1, mx2, my2); beneath background(200, 110, 145);
Also, make the polygons smaller like: regularPolygon(mx1, my1, 6, 30, PI, 0.245);
As well with a smaller textSize, and stroke: strokeWeight(3); textSize(20);
And that’s it.
The modifications you made have a problem; when you move one polygon above the other, they ‘snap-in’, and one will hide permanently behind the other.
About posting on other sites; like you, I’m self-taught, learning by try and fail. It’s great that you can learn by searching for similar problems on this forum. So you don’t have to ask much; just search. For this reason, I want to constrain me to this forum to share here the little I know (I’m just a week or three into P5.js now).

Edit: I forgot about the boundaries,
To limit the objects to the window boundaries; just enclose all the code in mouseDragged() within the if-block:
if((mouseX < width && mouseX > 0 && mouseY < height) && mouseY > 0) {

1 Like
11

You know in mathematics the end points of a straight line graph are usually well spaced apart i.e. (x1,y1) and (x2,y2) are usually different like I illustrated in the diagram. In your case you made x1=x2, no worries , I know it’s because you’ve not gotten the full picture of what I am trying to achieve, this is just a bit of it.

Thanks for the instructions and modifications I will apply them to the code.

Your approach to the problem is quite unique, I understand only bits of your code and I am glad it offers better solution to the problem. I believe you have solid JavaScript and Processing programming language background, do you?. Like I said earlier I only depend and on video tutorials on YouTube, they are mainly by Daniel shiffman and your approach is quite different from his. You are doing very great, your learning curve of the P5.js language is quite steep. Which books are you using?

I’ll request assistance when I face another problem. From your solutions I have understood more about how to to apply functional programming. Thank you very much.

2 Likes
12

But I can guess, f.e something like this.
Just to train p5.js a little bit I wanted also to include the angles between the lines, but it’s more difficult then I thought. And yes I started 2 years ago with Processing java. mostly Android. P5.js looks similar but is quite different from java, I’ve to look up things all the time.
Just to practice I will start to make a program with the Cartesian system in 3d, with buttons giving the result of multiplying vectors or adding, dividing, etc. I think it will be nice to see vector lines in 3d when rotating.

1 Like
13

Yes, it is something similar to that. Yeah I tried to seperate mx1= mx2=200 and everything fell apart. You can fix that. Your approach to p5.js is unique, I guess you didn't learn from Daniel Shiffman, you're more likely using some books and the documentation. The Cartesian system in 3d will be amazing. I'm looking forward to develop some interesting and proprietary applications, that's why I wanted us to go private because I feel all we are going to do shouldn't be in public space.

14

That would be a pity, since it’s a real interesting discussion here!

15

I don’t think so, it’s a project I feel could be a commercial success, so leaving it’s trail here could give it away to someone who doesn’t even have any inkling about it to become it’s proprietor and that is unfair. I don’t have solid background in computer programming and I’m very happy to team up with an experienced computer programmer.

1 Like
16

I hope you are not referring to me, because I’m far from that. I’m maybe somewhere in the middle of Processing’s learning curve. Often reading forum’s topics I notice how little I know.
Further, I am retired and wouldn’t want to have any work obligations anymore. But if time permits, and I feel capable I’m happy to answer any question on this forum.

Maybe you think that because I used the get() function to pick up the line ends.
But you may remember that Daniel always finishes his videos saying, “Try it this way also”, or “You could also do it that way”. The same problem can be solved in many, many ways. To draw line points is very easy, but the difficulty lays in avoiding that different line end’s ‘snap into’ each other. Below another approach using booleans to avoid this. Maybe this code is easier to understand.

2 Likes
17

Haha, I guess experienced is wrong choice of word to use, I was implying anyone with solid background/foundation in computer programming. The project I have in mind will be light weight.Your last solution is amazing, this lends credence to the reality that there are so many approaches to solve computer programming problems. I intend the shape of objects at the tips of the line to be a polygon, it could be any shape other than a circle. I’ve also thought of using a .jpeg image as the object.

18

Like above? You will need to use multiple boolean options however, in draw(), to make the clicked image foremost.

1 Like
19

Blockquote

But I can guess, f.e something like this .
Just to train p5.js a little bit I wanted also to include the angles between the lines, but it’s more difficult then I thought.

Blockquote

I like that rendering of that graph sheet, how did you get that or was it an image?. I won’t have much issues determining the angles of the straight lines as they will be derived from mathematical equations.

20

No the lines and number sequence are drawn in a loop. Much easier and faster to code, then drawing an image in GIMP

I have it almost finished, but if you haven’t an issue with this I would like to see an example code.

1 Like