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

Processing Beginners
1

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.:cry:

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 :slight_smile:

1 Like
2

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);
}
3 Likes
3

see also

https://www.processing.org/reference/environment/#Coordinates

3 Likes
4

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

  list.add(pv1);
}
3 Likes
5

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
6

Nicely done! Good work.

2 Likes
7

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

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
8

yeah, you’re welcome!

It’s a great experience to program

with my code you can click and make permanent dots

2 Likes