# Drawing connected lines with keystroke commands

**URL:** <https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947>\
**Category:** Coding Questions\
**Created:** [February 20, 2020, 3:44am UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947 "2020-02-20T03:44:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichelO](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@MichelO](https://discourse.processing.org/u/MichelO)\
**Post date:** [February 20, 2020, 3:44am UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/1 "2020-02-20T03:44:38Z")

</div>

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/](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](https://forum.processing.org/one/topic/how-to-avoid-repetition-when-a-key-is-hold.html)

Here is my code to test this:

```auto
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!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 20, 2020, 7:03pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/2 "2020-02-20T19:03:10Z")

</div>

> [@MichelO](#):
>
> 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?

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 20, 2020, 7:07pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/3 "2020-02-20T19:07:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MichelO](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@MichelO](https://discourse.processing.org/u/MichelO)\
**Post date:** [February 23, 2020, 5:31pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/4 "2020-02-23T17:31:19Z")

</div>

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

```auto
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);
    }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 23, 2020, 6:25pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/5 "2020-02-23T18:25:26Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![MichelO](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@MichelO](https://discourse.processing.org/u/MichelO)\
**Post date:** [February 23, 2020, 9:31pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/6 "2020-02-23T21:31:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MichelO](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@MichelO](https://discourse.processing.org/u/MichelO)\
**Post date:** [February 23, 2020, 10:02pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/7 "2020-02-23T22:02:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 23, 2020, 10:14pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/8 "2020-02-23T22:14:16Z")

</div>

here is my version with wasd keys

```auto

// 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 
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 24, 2020, 2:09pm UTC](https://discourse.processing.org/t/drawing-connected-lines-with-keystroke-commands/17947/9 "2020-02-24T14:09:53Z")

</div>

Continued in his other thread

see [Draw a square line by line](https://discourse.processing.org/t/draw-a-square-line-by-line/18059)