# Need help to solve (skyscraper)

**URL:** <https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685>\
**Category:** Coding Questions\
**Created:** [February 9, 2021, 5:24am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685 "2021-02-09T05:24:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 5:24am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/1 "2021-02-09T05:24:50Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

String storey = " “;  
String tokens=split(storey,”,");  
int level ={0,1,2,3,4,5,6,7,8,9,10};  
int j = 0;

void setup() {  
size(1000,1000);  
background (0);  
}

void draw(){  
textSize(45);

String caret =“”;  
if (millis() % 1000\<500){  
caret=“|”;  
}  
fill(255);  
rect (0,0,1000,100);  
fill(0);  
text( storey + caret, 0, 60);

```
for (int i = 0; i<level.length; i++){
fill(211,211,211);
rect(i - 10, 900, 200, 100);

```

}  
}

void keyTyped(){  
if (key == BACKSPACE) {  
if (storey.length()\>0){  
storey = storey.substring(0, storey.length()-1);  
}  
}  
else if (key == ENTER) {  
// We split when the user presses enter  
int tokens = int(storey.split(“,”));  
}  
else {  
storey += key;  
}  
}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 9, 2021, 8:24am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/2 "2021-02-09T08:24:25Z")

</div>

Hi,

Welcome to the forum! 😉

Please use the `</>` button to format your code on the forum or put it inside quotes ``` here ```.  
You can also press `Ctrl+T` in the Processing editor before pasting it to auto indent your code!

When you post a question on the forum, try not to put the question in the title but rather describe it in the body of the message : what do you want this code to do? What did you try, what doesn’t work? Do you have a screenshot?

Then it’s going to help us answer your questions!

---

<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 9, 2021, 10:21am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/3 "2021-02-09T10:21:57Z")

</div>

I agree.

- What is happening now and what do you want to happen instead?

You have to state this in your post to get good answers.

**Explanation**

> Need help to solve why the rect appear even when I haven’t do any input

setup() is running once, draw() is running on and on.

The rectangle (which one? The one on top or on the bottom? I assume you mean the bottom one) is displayed because you display it in the for-loop. The for-loop is `i<level.length` which is initially 11 (the length of the array level) OR did you mean `i<tokens.length`? Maybe you confused the two. That could be one reason.

**Remark**

Also, in keyTyped() you have int tokens = . Here I have to say when you repeat int it’s a new variable known only locally and NOT the String tokens you declare before setup(). Is that your intention?

Chrisir

**Sketch**

I modified the code only minimal, you can see now what the for-loop is doing.

```auto
String storey = " ";
String[] tokens=split(storey, ",");
int[] level ={0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
int j = 0;

void setup() {
  size(1000, 1000);
  background (0);
}

void draw() {
  textSize(45);

  String caret ="";
  if (millis() % 1000<500) {
    caret="|";
  }
  fill(255);
  rect (0, 0, 1000, 100);
  fill(0);
  text( storey + caret, 0, 60);

  for (int i = 0; i<level.length; i++) {
    fill(211, 211, 211);
    rect(i * 40+30, 900, 33, 33);
  }
}

void keyTyped() {
  if (key == BACKSPACE) {
    if (storey.length()>0) {
      storey = storey.substring(0, storey.length()-1);
    }
  } else if (key == ENTER) {
    // We split when the user presses enter
    int[] tokens = int(storey.split(","));
  } else {
    storey += key;
  }
}

```

---

<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 9, 2021, 11:25am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/4 "2021-02-09T11:25:40Z")

</div>

I now modified your Sketch more and you can submit Words from storey to tokens

```auto

String storey = "";
String[] tokens= {}; // split(storey, ",");
//int[] level ={0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
//int j = 0;

void setup() {
  size(1000, 1000);
  background (0);

  // println(level.length);
}

void draw() {
  background (0);

  textSize(45);

  String caret ="";
  if (millis() % 1000<500) {
    caret="|";
  }
  fill(255);
  rect (0, 0, 1000, 100);
  fill(0);
  text( storey + caret, 0, 60);

  textSize(13);
  fill(255); 
  text("Please enter your Word. Submit with Enter, You can use Backspace. ", 
    200, 130); 

  for (int i = 0; i<tokens.length; i++) {
    fill(211, 211, 211);
    rect(i * 70+15, 900, 
      67, 33);
    textSize(13);
    fill(0); 
    text(tokens[i], 
      i * 70+15+3, 900+20);
  }
}

void keyTyped() {
  if (key == BACKSPACE) {
    if (storey.length()>0) {
      storey = storey.substring(0, storey.length()-1);
    }
  } else if (key == ENTER) {
    // We split when the user presses enter
    tokens = (String[]) append (tokens, storey);
    // reset 
    storey="";
  } else {
    storey += key;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 11:59am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/5 "2021-02-09T11:59:21Z")

</div>

> [@Chrisir](#):
>
> ```auto
> String storey = "";
> String[] tokens= {}; // split(storey, ",");
> //int[] level ={0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
> //int j = 0;
> 
> void setup() {
> size(1000, 1000);
> background (0);
> 
> // println(level.length);
> }
> 
> void draw() {
> background (0);
> 
> textSize(45);
> 
> String caret ="";
> if (millis() % 1000<500) {
> caret="|";
> }
> fill(255);
> rect (0, 0, 1000, 100);
> fill(0);
> text( storey + caret, 0, 60);
> 
> textSize(13);
> fill(255); 
> text("Please enter your Word. Submit with Enter, You can use Backspace. ", 
> 200, 130); 
> 
> for (int i = 0; i<tokens.length; i++) {
> fill(211, 211, 211);
> rect(i * 70+15, 900, 
> 67, 33);
> textSize(13);
> fill(0); 
> text(tokens[i], 
> i * 70+15+3, 900+20);
> }
> }
> 
> void keyTyped() {
> if (key == BACKSPACE) {
> if (storey.length()>0) {
> storey = storey.substring(0, storey.length()-1);
> }
> } else if (key == ENTER) {
> // We split when the user presses enter
> tokens = (String[]) append (tokens, storey);
> // reset 
> storey="";
> } else {
> storey += key;
> }
> }
> 
> ```

Thank you for taking time to solve my problem. But what I would like to do is when I press 1, one rectangle will pop out and when I press 2, still one rectangle(another rectangle0 but 2x times the height. Like 3,4,5 and so on.

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 12:01pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/6 "2021-02-09T12:01:32Z")

</div>

Ok noted. Thanks for the tips.

---

<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 9, 2021, 12:04pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/7 "2021-02-09T12:04:55Z")

</div>

I see.

Okay, you can store how many numbers have been entered (variable `int howManyNumbers=0;` ).

Use this for the for-loop (as upper bound: `i<howManyNumbers`)

Make tokens int[] and global (define before `setup()`)

On Enter: store the storey into tokens at pos j and say j++ then: tokens[j] = storey; j++;

When displaying the rects in the for loop use tokens[i] as the height of the rect

```auto
   rect(i * 70+15, 900-tokens[i] * 20, 
      67, tokens[i] * 20);

```

Chrisir

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 12:09pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/8 "2021-02-09T12:09:22Z")

</div>

Thanks for the tips. I will work on it.

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 12:46pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/9 "2021-02-09T12:46:34Z")

</div>

Sorry to trouble but I cannot solve it. Would you mind adding here?  
String storey = “”;  
String[] tokens= {}; // split(storey, “,”);  
//int[] level ={0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};  
//int j = 0;

void setup() {  
size(1000, 1000);  
background (0);

// println(level.length);  
}

void draw() {  
background (0);

textSize(25);

String caret ="";  
if (millis() % 1000\<500) {  
caret="|";  
}  
fill(255);  
rect (0, 0, 1000, 40);  
fill(0);  
text( storey + caret, 0, 30);

textSize(15);  
fill(255);  
text("Please enter your Word. Submit with Enter, You can use Backspace. ",  
250, 60);

for (int i = 0; i\<tokens.length; i++) {  
fill(211, 211, 211);  
rect(i \* 70+15, 900,  
200, 100);  
textSize(15);  
fill(0);  
text(tokens[i],  
i \* 70+15+3, 900+20);  
}  
}

void keyTyped() {  
if (key == BACKSPACE) {  
if (storey.length()\>0) {  
storey = storey.substring(0, storey.length()-1);  
}  
} else if (key == ENTER) {  
// We split when the user presses enter  
tokens = (String[]) append (tokens, storey);  
// reset  
storey="";  
} else {  
storey += key;  
}  
}

---

<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 9, 2021, 12:51pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/10 "2021-02-09T12:51:25Z")

</div>

I edited my post above.

Can you solve it now?

You haven’t changed anything. What have you tried?

```auto

String storey = "";
int[] tokens= {}; // split(storey, “,”);

void setup() {
  size(1000, 1000);
  background (0);
}

void draw() {
  background (0);

  textSize(25);

  String caret ="";
  if (millis() % 1000<500) {
    caret="|";
  }
  fill(255);
  rect (0, 0, 1000, 40);
  fill(0);
  text( storey + caret, 0, 30);

  textSize(15);
  fill(255);
  text("Please enter your number. Submit with Enter, You can use Backspace. ", 
    250, 60);

  for (int i = 0; i<tokens.length; i++) {
    fill(211, 211, 211);
    rect(i * 70+15, 900-tokens[i]*30, 
      200, tokens[i]*30);
  }
}

void keyTyped() {
  if (key == BACKSPACE) {
    if (storey.length()>0) {
      storey = storey.substring(0, storey.length()-1);
    }
  } else if (key == ENTER) {
    // We submit when the user presses enter
    tokens = (int[]) append (tokens, int(storey));
    // reset
    storey="";
  } else if (key>='0' && key <= '9') {
    storey += key;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 12:58pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/11 "2021-02-09T12:58:59Z")

</div>

I try adding the solution u given but it shows “the operator \* is undefined for the argument type(s)”

---

<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 9, 2021, 1:01pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/12 "2021-02-09T13:01:18Z")

</div>

You haven’t answered my questions.

> [@Sett](#):
>
> I try adding the solution

Well, which part are you “adding”?

I changed the type of tokens, did you see?

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 1:06pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/13 "2021-02-09T13:06:09Z")

</div>

String storey = “”;  
String[] tokens= {}; // split(storey, “,”);  
//int[] level ={0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};  
//int j = 0;  
int numbers = 0;

void setup() {  
size(1000, 1000);  
background (0);

// println(level.length);  
}

void draw() {  
background (0);

textSize(25);

String caret ="";  
if (millis() % 1000\<500) {  
caret="|";  
}  
fill(255);  
rect (0, 0, 1000, 40);  
fill(0);  
text( storey + caret, 0, 30);

textSize(15);  
fill(255);  
text("Please enter your Word. Submit with Enter, You can use Backspace. ",  
250, 60);

for (int i = 0; i\<tokens.length; i++) {  
fill(211, 211, 211);  
rect(i \* 70+15, 900,  
200, 100);  
textSize(15);  
fill(0);  
text(tokens[i],  
i \* 70+15+3, 900+20);  
}  
for (int j = 0, j ,tokens.length; j++){  
rect(j \* 70+15, 900-tokens[j] \* 20,  
67, tokens[j] \* 20);  
}  
}

void keyTyped() {  
if (key == BACKSPACE) {  
if (storey.length()\>0) {  
storey = storey.substring(0, storey.length()-1);  
}  
} else if (key == ENTER) {  
// We split when the user presses enter  
tokens = (String[]) append (tokens, storey);  
// reset  
storey="";  
} else {  
storey += key;  
}  
}

I added like that.

---

<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 9, 2021, 1:11pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/14 "2021-02-09T13:11:17Z")

</div>

Yeah, well tokens is now int[] as I mentioned already

---

<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 9, 2021, 1:11pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/15 "2021-02-09T13:11:54Z")

</div>

> [@Sett](#):
>
> tokens = (String) append (tokens, storey);

Changed this line as well obviously

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 9, 2021, 1:16pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/16 "2021-02-09T13:16:20Z")

</div>

Ok. Thanks for the help.

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 12, 2021, 3:49am UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/17 "2021-02-12T03:49:21Z")

</div>

I don’t know why I cannot add little rectangle to the big rectangle, when I can, it only add one but at the wrong place. Help me solve please.

String storey = “”;  
int[] tokens= {}; // split(storey, “,”);

void setup() {  
size(1000, 1000);  
background (0);  
}

void draw() {

textSize(25);

String caret ="";  
if (millis() % 1000\<500) {  
caret="|";  
}  
fill(255);  
rect (0, 0, 1000, 40);  
fill(0);  
text( storey + caret, 0, 30);

textSize(15);  
fill(255);  
text(“Please enter your number from 1 to 10. Maximum input is 5.”,  
250, 60);

for (int i = 0; i\<tokens.length; i++) {  
fill(211, 211, 211);  
rect(i \* 200, 1000-tokens[i]\*80, 200, tokens[i]\*100);

```
 int n=6;
 for(int j=0;j<n;j++){
 for(int x=50;x<200;x+=20){
   for(int y=0; y <= tokens.length; y+=50){
     int a = (int) random(1);
     if (a == 1 ){
     fill(0,0,255);
     }
     else {
      fill(0); 
     }
  rect(x+10,100*y-50*y,5,15);
   }
 }
 }

```

}  
}  
void keyTyped() {  
if (key == BACKSPACE) {  
if (storey.length()\>0) {  
storey = storey.substring(0, storey.length()-1);  
}  
} else if (key == ENTER) {  
// We submit when the user presses enter  
tokens = (int[]) append (tokens, int(storey));  
// reset  
storey="";  
} else if (key\>=‘0’ && key \<= ‘9’) {  
storey += key;  
}  
else if (key==‘n’){ //night time  
background(0);  
}  
else if (key==‘d’){ //day time  
background(135,206,235);  
}  
else if (key==‘m’){ //moon  
fill(230,230,250);  
ellipse(200, 200, 100, 100);  
}  
else if (key==‘S’){ //sun  
fill(255,255,224);  
noStroke();  
ellipse(800, 200, 150, 150);  
}  
else if (key==‘s’){ //star  
background(25,25,112);  
for(int k=0;k\<50;k++){  
fill(0,10);  
rect(0,0,width,height);  
fill(255);  
noStroke();  
ellipse(random(width),random(height), 3, 3);  
}  
}  
}

---

<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 12, 2021, 12:34pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/18 "2021-02-12T12:34:04Z")

</div>

> [@Sett](#):
>
> I cannot add little rectangle to the big rectangle

I don’t understand. Where are these little rectangles in your code?

Where do they appear now, in the input box on top of the screen?

You have FOUR nested for-loops. That’s a lot. Why so many? What are you trying to achieve?

Below is my version.

Chrisir

**Sketch**

```auto
String storey = "";
int[] tokens= {};

void setup() {
  size(1000, 1000);
  background (0);
}

void draw() {

  textSize(25);

  // Input rectangle 
  fill(255);
  rect (0, 0, 1000, 40);
  fill(0);
  text( storey + caret(), 0, 30);

  // help text 
  textSize(15);
  fill(255);
  text("Please enter your number from 1 to 10. Maximum input is 5.", 
    250, 60);

  for (int i = 0; i<tokens.length; i++) {
    fill(211, 211, 211);
    rect(i * 200, height-tokens[i]*80, 
      200, tokens[i]*80);

    for (int y=0; y < tokens[i]; y++) {
      // int a = (int) random(1);
      if (random(1) < 0.5 ) {
        fill(0, 0, 255);//blue
      } else {
        fill(255, 0, 0);
      }
      rect((i * 200)+(y*10)+9, height-tokens[i]*80+4, 
        5, 15);
    }
  } //for
} //func 

void keyTyped() {
  if (key == BACKSPACE) {
    // delete last letter
    if (storey.length()>0) {
      storey = storey.substring(0, storey.length()-1);
    }
  } else if (key == ENTER) {
    // We submit when the user presses enter
    tokens = (int[]) append (tokens, int(storey));
    // reset
    storey="";
  } else if (key>='0' && key <= '9') {
    storey += key;
  } else if (key=='n') { //night time
    background(0);
  } else if (key=='d') { //day time
    background(135, 206, 235);
  } else if (key=='m') { //moon
    fill(230, 230, 250);
    ellipse(200, 200, 100, 100);
  } else if (key=='S') { //sun
    fill(255, 255, 224);
    noStroke();
    ellipse(800, 200, 150, 150);
  } else if (key=='s') { //star
    background(25, 25, 112);
    for (int k=0; k<50; k++) {
      fill(0, 10);
      rect(0, 0, width, height);
      fill(255);
      noStroke();
      ellipse(random(width), random(height), 3, 3);
    }
  }
}

String caret() {
  // blink 
  String caret ="";

  if (millis() % 1000<500) {
    caret="|";
  }//if

  return caret;
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![Sett](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@Sett](https://discourse.processing.org/u/Sett)\
**Post date:** [February 12, 2021, 1:03pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/19 "2021-02-12T13:03:59Z")

</div>

> [@Sett](#):
>
> ```auto
> int n=6;
> for(int j=0;j<n;j++){
> for(int x=50;x<200;x+=20){
> for(int y=0; y <= tokens.length; y+=50){
> int a = (int) random(1);
> if (a == 1 ){
> fill(0,0,255);
> }
> else {
> fill(0); 
> }
> rect(x+10,100*y-50*y,5,15);
> }
> }
> }
> 
> ```

These are the little rectangle code.  
And yes they appear in the input bos on top of the screen.

I am trying to make a building with window. then set night backgroud and all.

---

<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 12, 2021, 1:04pm UTC](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685/20 "2021-02-12T13:04:49Z")

</div>

Do you like my version?

[Next page](https://discourse.processing.org/t/need-help-to-solve-skyscraper/27685.md?page=2)