# \[SOLVED\] Use the keyboard to make a design appear

**URL:** <https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004>\
**Category:** Coding Questions\
**Created:** [December 1, 2019, 12:14am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004 "2019-12-01T00:14:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![P3t3R08](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@P3t3R08](https://discourse.processing.org/u/P3t3R08)\
**Post date:** [December 1, 2019, 12:14am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/1 "2019-12-01T00:14:27Z")

</div>

Hello,

I am trying to write a program where if I press the letter ‘c’ on the keyboard a design similar to one that is already programmed for, will appear and continue to go in a circle. The only issue is that the design only appears when I hold the letter ‘c’ on the keyboard and if I don’t hold onto it disappears. I would like the design to stay there once I press ‘c’ on the keyboard.

Things I have tried:

1. Move that specific block of code to the void keyPressed () section but it still does not work
2. I have tried to code it into a for loop in the following manner but I think I did it wrong. This is because when I press ‘c.’ The program just stops and everything stops moving.

Here is my code below:

```auto

void draw() {
  background (90);
  stroke (255); 
  strokeWeight(5); 

  translate(width/2, height/2);

  for (int i=0; i< TOTLINES; i++) {
    ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
  }
  t +=0.5;

  if ((keyPressed == true) && (key == 'c')) { // this is the part I need help with
    for (int p=0; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));                  
    } //this is the part I need help with
  }
}

float x1(float t) {
  return sin (t/10) * 130 + sin (t/5)*20;
}

float y1(float t) {
  return cos(t / 10)*150;
}
float x2(float t) {
  return sin (t/10) * 200 + sin (t)*2;
}

float y2(float t) {
  return cos(t / 20)*20 + cos (t/12)*20;
}

float x3(float t) {
  return -sin (t/10) * 130 + sin (t/5)*20;
}

float y4(float t) {
  return -cos(t / 10)*150;
}
float x5(float t) {
  return -sin (t/10) * 200 + sin (t)*2;
}

float y6(float t) {
  return -cos(t / 20)*20 + cos (t/12)*20;
}

```

This is how I tried to code for the issue using a for loop.  
I replaced the

```auto
  if ((keyPressed == true) && (key == 'c')) { // this is the part I need help with
    for (int p=0; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));                  
    } //
  }

```

with

```auto
 for (int i=0;(keyPressed == true) && (key == 'c');i++) { // this is the part I need help with
    for (int p=0; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));                  
    } //this is the part I need help with 
  }

```

Thank you for taking the time to help me out with this issue! I really appreciate it.

---

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [December 1, 2019, 1:20am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/2 "2019-12-01T01:20:10Z")

</div>

Maybe, you could make an int variable, and put 0 into it.  
Then, when Keypressed(), you can change the number into 1. Inside draw(), you can make it run only when the variable is 1.  
Did I understand your question properly?

---

<div class="post-metadata">

**Author:** ![P3t3R08](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@P3t3R08](https://discourse.processing.org/u/P3t3R08)\
**Post date:** [December 1, 2019, 3:31am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/3 "2019-12-01T03:31:38Z")

</div>

Hello,  
Thank you for your reply! I am not quite sure I understand how to implement your suggestion. I am not sure if I did it correctly. I have attached my code below. Essentially, what I would like this code to do is have two shapes moving in circle. However, one will be running immediately once the code starts. The second one will only move in a circle once the letter ‘c’ is pressed on the keyboard. My problem is that the shape does appear when I press ‘c’ but once I let go of the letter ‘c’ the shape disappears but I want it to be there even after I let go of the ‘c’ key. I hope that clarifies my problem a little better. Sorry, I know it was a little confusing to initially understand what my problem was. Once again thank you for your help!

```auto
int TOTLINES = 10;
float t;
int shape2=0;

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

void draw() {
  background (90);
  stroke (255); 
  strokeWeight(5); 

  translate(width/2, height/2);

  for (int i=0; i< TOTLINES; i++) {
    ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
  }
  t +=0.5;

  if ((keyPressed == true) && (key == 'c')) { // this is the part I need help with
    int shape2= 1; //This is where I added an int variable to
      for (int p=1; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));
    } //this is the part I need help with
  }
}

float x1(float t) {
  return sin (t/10) * 130 + sin (t/5)*20;
}

float y1(float t) {
  return cos(t / 10)*150;
}
float x2(float t) {
  return sin (t/10) * 200 + sin (t)*2;
}

float y2(float t) {
  return cos(t / 20)*20 + cos (t/12)*20;
}

float x3(float t) {
  return -sin (t/10) * 130 + sin (t/5)*20;
}

float y4(float t) {
  return -cos(t / 10)*150;
}
float x5(float t) {
  return -sin (t/10) * 200 + sin (t)*2;
}

float y6(float t) {
  return -cos(t / 20)*20 + cos (t/12)*20;
}

void keyPressed() {

  if ((keyPressed == true) && (key == 'a')) {

    for (int i=0; i< TOTLINES; i++) {
      ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
      fill(0, 0, 155);
    }
  } else if ((keyPressed == true) && (key == 'b')) {
    fill(120, 0, 0);
    for (int i=0; i< TOTLINES; i++) {
      ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![24stevek](https://avatars.discourse-cdn.com/v4/letter/2/edb3f5/32.png) [@24stevek](https://discourse.processing.org/u/24stevek)\
**Post date:** [December 1, 2019, 3:47am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/4 "2019-12-01T03:47:46Z")

</div>

No, You already said it clearly… Just that I am not good at English.  
draw() automatically repeats itself, so I don’t think you need a for() inside it.  
I am really sorry, I am not good at reading codes. I think the int shape2 is the int variable I told you?  
I suggest that you change the Keypressed() part like

```auto
void keyPressed() {
  if((keyPressed == true) && (key == 'c')) shape2 = 1;
}

```

and then in `draw()`, you only have to do it like

```auto
void draw(){
  //You can do the part that runs immediately here.
  if(shape2 == 1){//And this runs only when the key 'C' is pressed.
  for (int p=1; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));
  }
}

```

I am also a newbie so I couldn’t understand every part of your code… If you can’t understand what I’m saying, plz ask again.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 1, 2019, 4:16am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/5 "2019-12-01T04:16:18Z")

</div>

i think the point is if you use

```auto
void draw() {
  background(90);
  draw_something();
}

```

this is repeated ( 60 times per sec )

with a

```auto
void keyPressed() {

}

```

you can set something like suggested true or false or int

```auto
shape = 1;

```

but if you draw something from there  
it will be just visible at keyPressed() and not while keyPressed  
for 1/60 of a second.

* * *

also inside `void keyPressed(){}`  
no use to check on `(keyPressed == true)`

---

<div class="post-metadata">

**Author:** ![P3t3R08](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@P3t3R08](https://discourse.processing.org/u/P3t3R08)\
**Post date:** [December 1, 2019, 4:39am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/6 "2019-12-01T04:39:31Z")

</div>

Thank you for the suggestions! I tried to use the int shape2=1 suggestion but it told me to convert the int into a boolean.  
This was the error it gave me:

> cannot convert from int to boolean

This was how I setup the code as it wasn’t working initially. Please note I took the float functions to save space.

```auto
// code modified from https://www.youtube.com/watch?v=LaarVR1AOvs
int TOTLINES = 10;
float t;
int shape2=0;

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

void draw() {
  background (90);
  stroke (255); 
  strokeWeight(5); 

  translate(width/2, height/2);

  for (int i=0; i< TOTLINES; i++) {
    ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
  }
  t +=0.5;

  if(shape2= 1){//And this runs only when the key 'C' is pressed.
  for (int p=1; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));
  }
  }
}

```

After converting it to boolean the issue is now that the shape appears initially even before I press ‘c.’

Here is the code for it.

```auto
// code modified from https://www.youtube.com/watch?v=LaarVR1AOvs
int TOTLINES = 10;
float t;
boolean shape2=false;

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

void draw() {
  background (90);
  stroke (255); 
  strokeWeight(5); 

  translate(width/2, height/2);

  for (int i=0; i< TOTLINES; i++) {
    ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
  }
  t +=0.5;

  if(shape2= true){//And this runs only when the key 'C' is pressed.
  for (int p=1; p< TOTLINES; p++) {
      ellipse(x3(t+p), y4(t+p), x5(t+p), y6(t+p));
  }
  }
}

float x1(float t) {
  return sin (t/10) * 130 + sin (t/5)*20;
}

float y1(float t) {
  return cos(t / 10)*150;
}
float x2(float t) {
  return sin (t/10) * 200 + sin (t)*2;
}

float y2(float t) {
  return cos(t / 20)*20 + cos (t/12)*20;
}

float x3(float t) {
  return -sin (t/10) * 130 + sin (t/5)*20;
}

float y4(float t) {
  return -cos(t / 10)*150;
}
float x5(float t) {
  return -sin (t/10) * 200 + sin (t)*2;
}

float y6(float t) {
  return -cos(t / 20)*20 + cos (t/12)*20;
}

void keyPressed() {

  if (key == 'a') {

    for (int i=0; i< TOTLINES; i++) {
      ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
      fill(0, 0, 155);
    }
  } else if (key == 'b') {
    fill(120, 0, 0);
    for (int i=0; i< TOTLINES; i++) {
      ellipse(x1(t+i), y1(t+i), x2(t+i), y2(t+i));
    }
     if(key == 'c'){
     boolean shape2=true;
     }

  }
}

```

Once again, thank you to everyone for their suggestions!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 1, 2019, 4:54am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/7 "2019-12-01T04:54:09Z")

</div>

using a screen / state / … variable type INT gives much more possibilities and is much easier as bool.

```auto
int screen=1;

void setup() {
  size(500, 500);
  stroke (255); 
  strokeWeight(5);
  noFill();
  println("use arrow keys RIGHT LEFT");
}

void draw() {
  background (90);
  translate(width/2, height/2);
  if ( screen == 1 ) screen1();
  if ( screen == 2 ) screen2();
}

void screen1() {
  rect(0, 0, 100, 100);
}

void screen2() {
  circle(0, 0, 50);
}

void keyPressed() {
  if ( keyCode == RIGHT ) screen =2; // later might use screen++; and a constrain??
  if ( keyCode == LEFT ) screen =1; // if need can go back;
}

```

---

<div class="post-metadata">

**Author:** ![P3t3R08](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@P3t3R08](https://discourse.processing.org/u/P3t3R08)\
**Post date:** [December 1, 2019, 5:23am UTC](https://discourse.processing.org/t/solved-use-the-keyboard-to-make-a-design-appear/16004/8 "2019-12-01T05:23:41Z")

</div>

Hello,  
It works now! Thank you to everyone for their suggestions! I think the issue was with the way the if statment was written after implementing these suggestions it works.