[SOLVED] Use the keyboard to make a design appear

Processing Coding Questions
1

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:


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

  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

 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.

2 Likes
2

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?

1 Like
3

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!

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));
    }
  }
}
1 Like
4

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

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

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

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.

3 Likes
5

i think the point is if you use

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

this is repeated ( 60 times per sec )

with a

void keyPressed() {

}

you can set something like suggested true or false or int

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)

2 Likes
6

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.

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

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

1 Like
7

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

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

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.