Drawing connected lines with keystroke commands

Processing Coding Questions
1

I have been trying to write a code that will allow me to press numbers keys and draw lines of that length, each connected to the one before. Ideally, the image would rotate 90 degrees between each line segment. In other words, when I press “4” it would draw a line of 4 pixels and turn 90 degrees, then when I press “8” it would draw a line of 8 pixels, starting from where the last line left off, and rotate 90 degrees, etc.

I am running into a couple issues:

(1) I can code the spiral and I can code line segments initiated by keystrokes, but when I try to put them together it all falls apart. The translate and rotate commands start behaving strangely inside a draw command and I haven’t managed to get pushMatrix to work. I read this:

https://processing.org/tutorials/interactivity/

(2) How can I make it so that it draws a line once when I press “2”, but not keep drawing that line for as long as I hold down the “2” key? I had success with redraw, but if I tried to add a translation, things went crazy again. Also, it only works the first time I press a given number, but not the second time. I read this:

https://forum.processing.org/one/topic/how-to-avoid-repetition-when-a-key-is-hold.html

Here is my code to test this:

int x=10; //length of line segment

void setup() {
size(500,500);
}

void draw() {
  if(keyPressed) {
    if (key == '1') {
    line(0,0,1*x, 0);
    }
    if (key == '2') {
    line(0,0,2*x, 0);
    //x+=10;
    //translate(x, 5);
    }
  }
}

void keyPressed(){
  redraw();//run code in draw one time
}

Any help would be appreciated!

1 Like
2

Look at the reference: there is keyPressed as a variable, then there is keyPressed() written with brackets which is a function.

The latter evaluates each key press and hold only once

Move all that you have in draw() inside keyPressed() function

3

Additionally: I think when you draw a line and you want the next line to start at the end of the first line : you need to store the x,y (xPos,yPos) (and direction?). So after line (0,0, 1*x, 0);
say xPos += 10;

Then at start of keyPressed() function say translate (xPos,yPos);

Chrisir

4

When I try what you suggested, nothing happens when I press a key:

void setup() {
size(500,500);
}

void keyPressed() {
    if (key == '1') {
    line(0,0,1*x, 0);
    }
    if (key == '2') {
    line(0,0,2*x, 0);
    //x+=10;
    //translate(x, 5);
    }
}
5

you must keep draw() although it’s empty now


int x=10; //length of line segment

void setup() {
  size(500, 500);
}

void draw() {
  //
}

//--------------------------

void keyPressed() {
  if (key == '1') {
    line(0, 0, 1*x, 0);
  }
  if (key == '2') {
    line(0, 0, 2*x, 0);
    //x+=10;
    //translate(x, 5);
  }
  if (key == '3') {
    line(0, 0, 0, 2*x);
    //x+=10;
    //translate(x, 5);
  }
}
1 Like
6

Thanks! Now it works, but only once. What I want to be able to do is press “1” and have it draw a 1-pixel line; press “6” and have it draw a 6-pixel line; press “3” and have it draw a 3-pixel line, etc. This is my struggle.

7

Never mind! adding the “translate” step you suggested earlier fixed that. Thank you for the help!

1 Like
8

here is my version with wasd keys




// https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/5


int lineSegment=30; //length of line segment

float xPos, yPos; 

void setup() {
  size(500, 500);
  background(111); 

  xPos=width/2;
  yPos=height/2;

  println("Use wasd");
}

void draw() {
  //
}

//---------------------------------------------------

void keyPressed() {

  translate (xPos, yPos);

  if (key == 'd') { // R 
    line(0, 0, lineSegment, 0);
    xPos += lineSegment;
  } else if (key == 'a') { // L 
    line(0, 0, -lineSegment, 0);
    xPos += -lineSegment;
  } else if (key == 's') { // Down 
    line(0, 0, 0, lineSegment);
    yPos+=lineSegment; 
   } else if (key == 'w') {   // UP
    line(0, 0, 0, -lineSegment);
    yPos += -lineSegment; 
  } 

  else if (key == 'c') {
    background(111);
  }//else if
}//func 
//
1 Like
9

Continued in his other thread

see Draw a square line by line

1 Like