# How to get x and y lines follow mouse + draw coordinates

Me and my 13 year old son just started to learn programming in processing with the guidence from “the coding train”.
I have a hard time explaining how easy the coorinate system is. Drawing on paper and stuff but I guess I suck at explaining it.

With the visuals of two lines following the mouse at the same time as x and y coordinates is printed in the window I think he could get it right away.

So… im looking for the simpliest way to make to lines follow my mouse cursor.
I want them to keep straight also so theres always 2 straight lines following the mouse from x and y. So if I holde the mouse in center I would have a box like shape from the 2 lines. one coming straight down from the top and the other out from the left.

Aslo, I would love the coordinates x and y printed in a corner of the window.
A bonus would be if points could be created by clicking the mouse button but in my head that might complicate the code even more? Could help when comparing different coorinates and talking about it.

I tried and this is how far I got with my poor skills.

``````void setup(){
size(640,320);
}

void draw(){
stroke(0);
line(mouseX,mouseY, 1, mouseY);
// background(255);
}
``````

With this test I made lines are created correctly but they stay on screen! I end up filling the screen with lines.
I tried the backround under the line to see if That would erase the prevoius line but af cource it stacks above the line roe all together.

Anyone up for making a example on a code like I am asking for or if there is any guide I havent found jet?

Thx

1 Like

step 1:

``````

void setup() {
size(640, 320);
}

void draw() {
background(255);

// vertical
stroke(0, 0, 255); // blue
line(mouseX, 0,
mouseX, mouseY);
fill(0, 0, 255); // blue
text(mouseX + " x",
mouseX+3, 18);
//

// horizontal
stroke(0, 255, 0); // green
line( 0, mouseY,
mouseX, mouseY);
fill(0, 255, 0); // green
text(mouseY+ " y",
7, mouseY-1);

// ----------------------------------------------
// black texts in 4 corners
fill(0);
text("0,0",
5, 18);

text("-> x",
width-24, 18);

text("y",
5, height-18);

text(width+","+height,
width-47, height-18);
}
``````
2 Likes
2 Likes

step 2

click mouse to make a point

``````
// click mouse to make a point

// When you click the mouse, a point is drawn.
// in this list we store the points
ArrayList<PVector> list = new ArrayList();

void setup() {
size(640, 320);
}

void draw() {
background(255);

// vertical
stroke(0, 0, 255); // blue
line(mouseX, 0,
mouseX, mouseY);
fill(0, 0, 255); // blue
text(mouseX + " x",
mouseX+3, 18);
//

// horizontal
stroke(0, 255, 0); // green
line( 0, mouseY,
mouseX, mouseY);
fill(0, 255, 0); // green
text(mouseY+ " y",
7, mouseY-1);

//red: mouse coords
fill(255, 0, 0);
text (mouseX+","+mouseY,
width-50, height/2);

// ----------------------------------------------
// black texts in 4 corners
fill(0);
text("0,0",
5, 18);

text("-> x",
width-24, 18);

text("y",
5, height-18);

text(width+","+height,
width-47, height-18);

// ----------------------------------------
// show stored points from list
for (PVector pv : list ) {
// noStroke();
stroke(0);
fill(255, 255, 12);
ellipse(pv.x, pv.y, 5, 5);
fill(0);
text(pv.x+", "+pv.y,
pv.x, pv.y);
}// for
}

void mousePressed() {
// store points in list
PVector pv1 = new PVector(mouseX, mouseY);

}
``````
2 Likes

started writing before i saw chris already answered so here you go:

``````void setup() {
size(640, 320);
//stroke only needs to be called once so we put it in setup
stroke(0);
fill(0);
}

boolean showText = true;

void draw() {

//always start with drawing the background, so the last frame gets "painted over"
//then you can start drawing lines over it
background(255);

//top line
line(mouseX, 0, mouseX, mouseY);

//left line
line(0, mouseY, mouseX, mouseY);

//if + boolean to toggle the text
if (showText) {
text("x: " + mouseX, mouseX + 30, mouseY - 10);
text("y: " + mouseY, mouseX - 20, mouseY + 20);
}

//now drawing the numbers on the side every 100 px

int steps = 100;

//this is needed so that the numbers are actually on the right spot
textAlign(CENTER);

//label using for loop for the x axis
for (int i = 0; i <= width / steps; i++) {
text(i * steps, i * steps, 10);
}

//label using for loop for the y axis
for (int i = 0; i <= height / steps; i++) {
text(i * steps, 10, i * steps);
}
}

//system function, triggers at mouse press
void mousePressed() {
//showText is set to what it wasn't before, so it switches
showText = !showText;
}
``````

good luck on your coding journey!

3 Likes

Nicely done! Good work.

1 Like

Guys!!!.. I almost fell of my chair here! Thax a lot
Both of your examples are amzing and both solves the problem. I can only pick one sulotion

It should be possible to accept more than one post as a sulotion… I’ll have a look if there has been any duskussion ablut this before…

I am super thankfull for your help and both codes are amazing!!

2 Likes

yeah, you’re welcome!

It’s a great experience to program

with my code you can click and make permanent dots

1 Like