Drawing Skyscrapers

jb5

Hello. I'm trying to make a program for my homework, in which it draws 1 to 7 skyscrapers in random locations and at random heights when the background under the rainbow is clicked, but when I call drawSkyscraper, the background within my circle changes color instead of the building appearing.

color[]rainbow=new color[7];

void setup()
{
  size(600,600);
  background(0,200,255);
  noFill();
  rainbow[0]=color(#FF0000);
  rainbow[1]=color(#FF8633);
  rainbow[2]=color(#FCFF33);
  rainbow[3]=color(#58FF33);
  rainbow[4]=color(#33ECFF);
  rainbow[5]=color(#3933FF);
  rainbow[6]=color(#C733FF);
}

void draw()
{
  background(0,200,255);
  drawRainbow();
  //drawRainDrop(random(0,600),0,random(0,8),rainbow[1]);
  //drawSkyscraper();
}


void drawRainbow()
{
 strokeWeight(10);
  stroke(rainbow[0]);
  ellipse(300,410,800,800);
  stroke(rainbow[1]);
  ellipse(300,410,790,785);
  stroke(rainbow[2]);
  ellipse(300,410,780,770);
  stroke(rainbow[3]);
  ellipse(300,410,770,755);
  stroke(rainbow[4]);
  ellipse(300,410,760,740);
  stroke(rainbow[5]);
  ellipse(300,410,750,725);
  stroke(rainbow[6]);
  ellipse(300,410,740,710);
}



void drawRainDrop(float xLoc, int yLoc, float speed, color c)
{  
  //rainbow[c]=random(0,6);
  int x=120;
  int y=120;
  int size=8;
  yLoc=0;
  //int xLoc=random(0,600);
  noStroke();
    for (int i = 0; i < 10; i++) {
      fill(c);
      ellipse(xLoc,yLoc + i*4,i*2,i*2);
      xLoc=random(0,600);
      speed=yLoc+speed;
    }
}

void mouseClicked()
{
  if(mouseX>0&&mouseX<600&&mouseY>=300)
  {
    drawSkyscraper();
  }
  else
  {
  }
}

void drawSkyscraper()
{

  fill(0,4,74);
  rect(50,300,50,200);
}

KevinWorkman

You're changing the fill() color in your drawSkyScraper() function.

Also note that you're calling background() inside your draw() function, so any skyscraper you draw will immediately be drawn over.

TfGuy44

Okay. What's happening is that when you draw the skyscraper, yo set the filcolor to (0,4,74). You're doing this on line 78. This fill color doesn't go away. It remains set until it gets changed - and it doesn't get changed!

What you need to do is call noFill(); inside your drawRainbow() function, so that the ellipses you draw for the rainbow don't have the same fill color that was set for drawing the skyscraper.

Once you fix this, your next question is obvious: Why doesn't my skyscraper remain drawn? Well, be cause you're only drawing it in mousePressed()... and it immediately gets drawn over by the call to background().

What you will need to do is to have variables that remembers how many and where the skyscrapers are, and then change those values in mousePressed(), and use those values to draw the skyscrapers inside draw().

You should do all your drawing in draw() (or functions that draw() calls)!

jb5

Thanks! Next, I want to draw the raindrops. When 10 of them are supposed to fall at random x locations and speeds, and all of the will be painted with a random color from the rainbow.

void drawRainDrop(float xLoc, int yLoc, int speed, color c)
{  
  //rainbow[c]=random(0,6);
  int x=120;
  yLoc=0;
  //int xLoc=random(0,600);
  noStroke();
    for (int i = 0; i < 10; i++) {
      fill(c);
      ellipse(xLoc,yLoc + i*4,i*2,i*2);
      xLoc=random(0,600);
      speed=yLoc+speed;
    }
}

void mouseClicked()
{
  if(mouseX>0&&mouseX<600&&mouseY>=240&&mouseY<600)
  {
    drawSkyscraper();
  }
  else
  {
    drawRainDrop(xLoc, yLoc, speed, c);
  }
}

TfGuy44

Alright.

How are you going to remember where each raindrop is?

How are you going to remember which color each one is?

What additional variables will you need?

Have you considered using classes/objects?

jb5

I'm going to use arrays for the rain drops location and speed. For color c, I'm going to use the rainbow array, and I'm going to need to define it within my method.

color[]rainbow=new color[7];            
rainbow[0]=color(#FF0000);
rainbow[1]=color(#FF8633);
rainbow[2]=color(#FCFF33);
rainbow[3]=color(#58FF33);
rainbow[4]=color(#33ECFF);
rainbow[5]=color(#3933FF);
rainbow[6]=color(#C733FF);

I'm not going to use classes/objects, since that wasn't really covered in my class.

TfGuy44

I'm going to use arrays for the rain drops location and speed.

Great! You should start by defining these arrays...

GoToLoop

https://Forum.Processing.org/two/discussion/8082/from-several-variables-to-arrays

jb5

There's a problem. When I try to draw a raindrop, it won't move down the screen despite me defining speed and yLoc, and also my color variable won't change color from purple, even though that's not the one I chose in the array.

void drawRainDrop(int xLoc, int yLoc, int speed, color c)
{ 


    for (int i = 0; i < 10; i++) {
      speed=1;
      xLoc=int(random(0,600));
      fill(c);
      ellipse(xLoc+i*10,yLoc,10,10);
      yLoc=yLoc+1;
      speed=speed*2;
    }
}

void mouseClicked()
{
  if(mouseX>0&&mouseX<600&&mouseY>=240&&mouseY<600)
  {
    background(0,200,255);
    drawSkyscraper();
  }
  else
  {
    drawRainDrop(0, 1, 1, rainbow[2]);
  }
}

I'm trying to see if all the raindrops fall at the same speed first.

TfGuy44

Again, you are doing your drawing inside mousePressed(). So these raindrops will only be drawn for a fraction of a second when the mouse is pressed, and then they will immediately be drawn over on the next frame by the call to background(). This is not what you want.

Do all your drawing in draw()!

TfGuy44

Example raindrop variables:

float raindrop_0_x;
float raindrop_0_y;
float raindrop_0_s;
color raindrop_0_c;

void setup(){
  size(400,400);
  raindrop_0_y = -100;
}

void draw(){
  background(0);
  raindrop_0_y+=raindrop_0_s;
  fill(raindrop_0_c);
  ellipse(raindrop_0_x,raindrop_0_y,20,20);
}  

void mousePressed(){
  raindrop_0_x = mouseX;
  raindrop_0_y = mouseY;
  raindrop_0_s = 1;
  raindrop_0_c = color(random(255),random(255),random(255));
}

jb5

So should I just call mousePressed in draw then if want my skyscrapers and raindrops to appear? I actually called drawRaindrop in draw() and it looped the circles and they still didn't have the color I wanted them to have.

jb5

And in your example, how would any of those variables translate into the variables I'm using? Because you can't set the raindrop variables outside its method.

TfGuy44

Keep in mind that I am only drawing one raindrop. To just draw one raindrop, I need 4 variables. They are the x and y positions of the drop, it's speed (how fast it is falling) and the raindrop's color.

Here, maybe this will make things clearer for you:

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

void draw() {
  background(100,100,200);
  rainbow_draw();
  raindrop_0_draw();
}  

void mousePressed() {
  raindrop_0_reset();
}

// ----- Raindrop related variables and functions below.

float raindrop_0_x;
float raindrop_0_y = -100;
float raindrop_0_s;
color raindrop_0_c;

void raindrop_0_reset() {
  raindrop_0_x = mouseX;
  raindrop_0_y = mouseY;
  raindrop_0_s = 1;
  raindrop_0_c = color(random(255), random(255), random(255));
}

void raindrop_0_draw() {
  raindrop_0_y+=raindrop_0_s;
  fill(raindrop_0_c);
  noStroke();
  ellipse(raindrop_0_x, raindrop_0_y, 20, 20);
}


// ----- Rainbow stuff

void rainbow_draw(){
  noFill();
  strokeWeight(4);
  stroke(255,0,0);
  ellipse(200,400,600,300);
}

TfGuy44

It's hard to see what variables you are using, because... I haven't seen you define any variables for your raindrops yet at all!

You said before that you would have arrays for your raindrops. This is a good idea. You will need four arrays. One for the x positions. One for the y positions. One for the speeds. And one for the colors...

jb5

I'm using the rainbow array for my colors, the same one I used to draw the rainbow.

color[]rainbow=new color[7];

For some reason, when I call it to replace color c, it doesn't work.

I was using

void drawRainDrop(int xLoc, int yLoc, int speed, color c)
{ 
  speed=1;
  fill(rainbow[1]);
}

rainbow[1] would have colored the raindrop orange.

jb5

I tried to replicate your setup with a few additions and using my own variables color[]rainbow=new color[7];

void setup()
{
  size(600,600);
  rainbow[0]=color(#FF0000);
  rainbow[1]=color(#FF8633);
  rainbow[2]=color(#FCFF33);
  rainbow[3]=color(#58FF33);
  rainbow[4]=color(#33ECFF);
  rainbow[5]=color(#3933FF);
  rainbow[6]=color(#C733FF);
}

void draw()
{
  background(0,200,255);
  drawRainbow();
  drawRainDrop(dropX,dropY,rainSPD,dropC);
  //drawSkyscraper();
}


void drawRainbow()
{
  int h=800;
  int j=800;
  for (int i = 0; i <= 6; i++) {
  noFill();
  strokeWeight(10);
  stroke(rainbow[i]);
  ellipse(300,410,h-i*10,j-i*15);
  }

}

int dropX;
int dropY= -100;
color dropC;
int rainSPD;  

void raindrop_0_reset() {
  dropX = int(random(0,600));
  dropY = 0;
  rainSPD = 1;
  dropC = color(rainbow[int(random(0,6))]);
}

void drawRainDrop(int xLoc, int yLoc, int speed, color c){ 
    c=dropC;
    speed=rainSPD;
    xLoc=dropX;
    yLoc=dropY;
    for (int i = 0; i < 10; i++) 
    {
      yLoc+=speed;
      fill(c);
      ellipse(xLoc+i*40,yLoc,10,10);
    }
}

void mousePressed()
{
  if(mouseX>0&&mouseX<600&&mouseY>=240&&mouseY<600)
  {;
    drawSkyscraper();
  }
  else
  {
     raindrop_0_reset();
  }
}

But I still can't get those raindrops to move. In your code, I first modified your code so that it would draw a row of 10 raindrops and a randomly picked color, and it was able to do both.

color[]rainbow=new color[7];
float dropX;
float dropY = -100;
float rainSPD;
color dropC;

 void draw() {
  background(0,200,255);
  drawRainbow();
  drawRainDrop();
}  
void raindrop_0_reset() {
  dropX = random(0,600);
  dropY = 0;
  rainSPD = 1;
  dropC = color(rainbow[int(random(0,7))]);
}

void drawRainDrop() {
  for(int i=0;i<=10;i++)
  {
  dropY+=rainSPD;
  fill(dropC);
  noStroke();
  ellipse(dropX+i*30, dropY, 20, 20);
  }

}

So the question is: can I make my method do what it needs to do with the statements intact? Of course by that, that I mean XLoc, yLoc,etc.

Chrisir

said before that you would have arrays for your raindrops. This is a good idea. You will need four arrays. One for the x positions. One for the y positions. One for the speeds. And one for the colors...

For loop over these arrays to display the raindrops in draw- and also to move them by adding to x and y position in the array

float x[] = new int[10];

jb5

OK, so I defined my arrays, but I'm confused as to how to define my arrays and how to use the for loops.

int[] dropX=new int[10];
int []dropY= new int[10];
color[] dropC = new int[10];
int [] rainSPD=new int[10];  




void setup()
{
  size(600,600);
  rainbow[0]=color(#FF0000);
  rainbow[1]=color(#FF8633);
  rainbow[2]=color(#FCFF33);
  rainbow[3]=color(#58FF33);
  rainbow[4]=color(#33ECFF);
  rainbow[5]=color(#3933FF);
  rainbow[6]=color(#C733FF);
  dropX[0]=int(random(0,600));
  dropX[1]=int(random(0,600));
  dropX[2]=int(random(0,600));
  dropX[3]=int(random(0,600));
  dropX[4]=int(random(0,600));
  dropX[5]=int(random(0,600));
  dropX[6]=int(random(0,600));
  dropX[7]=int(random(0,600));
  dropX[8]=int(random(0,600));
  dropX[9]=int(random(0,600));
  dropY[0]=int(random(0,600));
  dropY[1]=int(random(0,600));
  dropY[2]=int(random(0,600));
  dropY[3]=int(random(0,600));
  dropY[4]=int(random(0,600));
  dropY[5]=int(random(0,600));
  dropY[6]=int(random(0,600));
  dropY[7]=int(random(0,600));
  dropY[8]=int(random(0,600));
  dropY[9]=int(random(0,600));
  rainSPD[0]=int(random(1,5));;
  rainSPD[1]=int(random(1,5));;
  rainSPD[2]=int(random(1,5));;
  rainSPD[3]=int(random(1,5));;
  rainSPD[4]=int(random(1,5));;
  rainSPD[5]=int(random(1,5));;
  rainSPD[6]=int(random(1,5));;
  rainSPD[7]=int(random(1,5));;
  rainSPD[8]=int(random(1,5));;
  rainSPD[9]=int(random(1,5));;
  dropC[0]=rainbow[int(random(0,6))];
  dropC[1]=rainbow[int(random(0,6))];
  dropC[2]=rainbow[int(random(0,6))];
  dropC[3]=rainbow[int(random(0,6))];
  dropC[4]=rainbow[int(random(0,6))];
  dropC[5]=rainbow[int(random(0,6))];
  dropC[6]=rainbow[int(random(0,6))];
  dropC[7]=rainbow[int(random(0,6))];
  dropC[8]=rainbow[int(random(0,6))];
  dropC[9]=rainbow[int(random(0,6))];
}

void draw()
{

  background(0,200,255);
  drawRainbow();
  for (int i = 0; i <= 9; i++) {
  drawRainDrop(dropX[i],dropY[i],rainSPD[i],dropC[i]);
  }
  //drawSkyscraper();

}

void drawRainbow()
{
  int h=800;
  int j=800;
  for (int i = 0; i <= 6; i++) {
  noFill();
  strokeWeight(10);
  stroke(rainbow[i]);
  ellipse(300,410,h-i*10,j-i*15);
  }

}


void raindrop_0_reset() {
  for (int i = 0; i <= 600; i++) 
    {
    dropX[i] = int(random(0,600));
    }
    for (int i = 1; i <= dropY.length; i++) 
    {
    dropY[i] = 0;
    }
  for (int i = 0; i < rainSPD.length; i++) 
    {
      rainSPD[i]= int(random(1,5));
    }
  //dropC = rainbow[int(random(0,6))];
}

void drawRainDrop(int xLoc, int yLoc, int speed, color c){ 

  xLoc=0;
    for (int i = 0; i < 9; i++) 
    {
      //drops[i].move();
      //drops[i].display();
      dropY[i]+=speed;
      fill(c);
      ellipse(xLoc=dropX[i],dropY[i],10,10);
    }
}

Chrisir

Please read about for loops in the reference

Rain drop is independently from rainbow

Rain drop is just

ellipse (dropX[i],dropY[i],7,7);

then to move the drop

dropY[i] = dropY[i] + rainSPD[i];

Chrisir

press ctrl-t in processing

Chrisir

Double for-loop

in draw() you have

  for (int i = 0; i <= 9; i++) {
       drawRainDrop(dropX[i],dropY[i],rainSPD[i],dropC[i]);
  }

you loop over the raindrops. OK.

BUT in drawRainDrop() you loop again over the raindrops. Bad idea.

 for (int i = 0; i < 9; i++) 
    {
      //drops[i].move();
      //drops[i].display();
      dropY[i]+=speed;
      fill(c);
      ellipse(xLoc=dropX[i],dropY[i],10,10);
    }

That's doing it twice (or in fact 9x9 times).

Solution

instead, in draw you want:

drawRainDrops(); without for loop [and as a plural]

the function drawRainDrops looks like this [it's basically like your function]:

void drawRainDrops() { 
  strokeWeight(1);  // because for rainbow you have strokeWeight(10)
  noStroke();          // no outline for a drop
  for (int i = 0; i < dropX.length; i++) {
    fill(dropC[i]); // individual color 
    ellipse(dropX[i], dropY[i], 10, 10);  // individual position 
    dropY[i] += rainSPD[i]; // individual speed
  }
}
//

Chrisir

your setup() function can be much shorter using a for loop similar like above:

void setup() {
  size(600, 600);

  rainbow[0]=color(#FF0000);
  rainbow[1]=color(#FF8633);
  rainbow[2]=color(#FCFF33);
  rainbow[3]=color(#58FF33);
  rainbow[4]=color(#33ECFF);
  rainbow[5]=color(#3933FF);
  rainbow[6]=color(#C733FF);

  for (int i=0; i<dropX.length; i++) { // !!!!!!!!!!!!!!!!!!!!!!!!
    dropX[i]=int(random(0, width));
    dropY[i]=int(random(20, 60));
    rainSPD[i]=int(random(1, 5));
    dropC[i]=rainbow[int(random(0, 6))];
  }//for

}//setup

Remark

Remember to hit ctrl-t in processing to get auto-format of your code.

I use it all the time

Best, Chrisir ;-)

jb5

Hey I know I'm pretty late about this, but thanks for the help guys! I was able to get the program to do exactly what I wanted it to do.

jb5

Here's the final product:

boolean rain=false;
boolean skyscraper =true;

color[]rainbow=new color[7];


int lightX;
int lightY;
//float
//rect(lightX,lightY,i+12,20)


//for
int[] dropX=new int[10];
int []dropY= new int[10];
color[] dropC = new int[10];
int [] rainSPD=new int[10];  

int []skyX=new int[7];
int []skyY=new int[7];
int []skyWd=new int[7];
int[]skyHt=new int[7];


void setup()
{
  size(600, 600);
  //sets values for rainbow colors
  rainbow[0]=color(#FF0000);
  rainbow[1]=color(#FF8633);
  rainbow[2]=color(#FCFF33);
  rainbow[3]=color(#58FF33);
  rainbow[4]=color(#33ECFF);
  rainbow[5]=color(#3933FF);
  rainbow[6]=color(#C733FF);
  //sets values for drawRaindrops
  dropX[0]=int(random(0, 600));
  dropX[1]=int(random(0, 600));
  dropX[2]=int(random(0, 600));
  dropX[3]=int(random(0, 600));
  dropX[4]=int(random(0, 600));
  dropX[5]=int(random(0, 600));
  dropX[6]=int(random(0, 600));
  dropX[7]=int(random(0, 600));
  dropX[8]=int(random(0, 600));
  dropX[9]=int(random(0, 600));
  dropY[0]=int(random(0, 600));
  dropY[1]=int(random(0, 600));
  dropY[2]=int(random(0, 600));
  dropY[3]=int(random(0, 600));
  dropY[4]=int(random(0, 600));
  dropY[5]=int(random(0, 600));
  dropY[6]=int(random(0, 600));
  dropY[7]=int(random(0, 600));
  dropY[8]=int(random(0, 600));
  dropY[9]=int(random(0, 600)); 
  rainSPD[0]=int(random(1, 5));
  ;
  rainSPD[1]=int(random(1, 5));
  ;
  rainSPD[2]=int(random(1, 5));
  ;
  rainSPD[3]=int(random(1, 5));
  ;
  rainSPD[4]=int(random(1, 5));
  ;
  rainSPD[5]=int(random(1, 5));
  ;
  rainSPD[6]=int(random(1, 5));
  ;
  rainSPD[7]=int(random(1, 5));
  ;
  rainSPD[8]=int(random(1, 5));
  ;
  rainSPD[9]=int(random(1, 5));
  ;
  dropC[0]=rainbow[int(random(0, 6))];
  dropC[1]=rainbow[int(random(0, 6))];
  dropC[2]=rainbow[int(random(0, 6))];
  dropC[3]=rainbow[int(random(0, 6))];
  dropC[4]=rainbow[int(random(0, 6))];
  dropC[5]=rainbow[int(random(0, 6))];
  dropC[6]=rainbow[int(random(0, 6))];
  dropC[7]=rainbow[int(random(0, 6))];
  dropC[8]=rainbow[int(random(0, 6))];
  dropC[9]=rainbow[int(random(0, 6))];
  //draws indeces for the skyscrapers' dimensions
  skyX[0]=int(random(0, 600));
  skyX[1]=int(random(0, 600));
  skyX[2]=int(random(0, 600));
  skyX[3]=int(random(0, 600));
  skyX[4]=int(random(0, 600));
  skyX[5]=int(random(0, 600));
  skyX[6]=int(random(0, 600));
  skyY[0]=600;
  skyY[1]=600;
  skyY[2]=600;
  skyY[3]=600;
  skyY[4]=600;
  skyY[5]=600;
  skyY[6]=600;
  skyWd[0]=50;
  skyWd[1]=50;
  skyWd[2]=50;
  skyWd[3]=50;
  skyWd[4]=50;
  skyWd[5]=50;
  skyWd[6]=50;
  skyHt[0]=int(random(200, 600));
  skyHt[1]=int(random(200, 600));
  skyHt[2]=int(random(200, 600));
  skyHt[3]=int(random(200, 600));
  skyHt[4]=int(random(200, 600));
  skyHt[5]=int(random(200, 600));
  skyHt[6]=int(random(200, 600));
}
void draw()
{

  background(0, 200, 255);
  drawRainbow();
  for (int i = 0; i <= 9; i++) {
    drawRainDrop(dropX[i], dropY[i], rainSPD[0], dropC[4]);
  }  
  //draws the skyscrapers
  for (int i = 0; i <= 6; i++) 
  {
    drawSkyscraper(skyX[i], skyY[i], skyWd[i], skyHt[i]);
  }
}



void drawRainbow()
{
  int h=800;
  int j=800;
  //for loop draws all the circles
  for (int i = 0; i <= 6; i++) {
    noFill();
    strokeWeight(10);
    stroke(rainbow[i]);
    ellipse(300, 410, h-i*10, j-i*15);
  }
}

//sets the raindrop values to be used in 
void raindrop_0_reset() {
  for (int i = 0; i <= 9; i++) 
  {
    dropX[i] = int(random(0, 600));
    dropY[i] = 1;
    rainSPD[i]= int(random(1, 4));
    dropC[i] = rainbow[int(random(0, 7))];
  }
}
//This method draws raindrops at random locations, speed, and color.
void drawRainDrop(int xLoc, int yLoc, int speed, color c) { 

  for (int i = 0; i < 9; i++) 
  {
    dropY[i] = dropY[i]+ rainSPD[i];
    stroke(c);
    ellipse(dropX[i], dropY[i], 10, 10);
  }
}

void mousePressed()
{

  if (mouseX>0&&mouseX<600&&mouseY>=240&&mouseY<600)
  {
    skyScraper_0_reset();
    skyscraper=true;
  } else
  {
    raindrop_0_reset();
  }
}

//this sets the values of the skyscrapers' x and y locations.
void skyScraper_0_reset() {
  for (int i = 0; i <= 6; i++) 
  {
    skyX[i] = int(random(0, 600));
    skyY[i] = 600;
    skyWd[i]=50;
    skyHt[i]=int(random(200, 600));
  }
}



//draws 1 to 7 skyscrapers
void drawSkyscraper(int xLoc, int yLoc, int wid, int hit)
{  
  for (int i=0; i<6; i++)
  {
    //noStroke();
    fill(255);
    rectMode(CORNER);
    rect(skyX[i], skyY[i]-skyHt[i], skyWd[i], skyHt[i]);
    fill(255, 255, 0);
    //rect(lightX+50,lightY,i+12,20);
  }
}

Chrisir

Thanks for sharing!

Chrisir

there are a few things that can be criticized here

Arrays and for-loops

first in setup():

you use arrays but you forgot that the beauty of arrays is that we can use for loops with arrays.

So this:

  //sets values for drawRaindrops
  dropX[0]=int(random(0, 600));
  dropX[1]=int(random(0, 600));
  dropX[2]=int(random(0, 600));
  dropX[3]=int(random(0, 600));
  dropX[4]=int(random(0, 600));
  dropX[5]=int(random(0, 600));
  dropX[6]=int(random(0, 600));
  dropX[7]=int(random(0, 600));
  dropX[8]=int(random(0, 600));
  dropX[9]=int(random(0, 600));

becomes

  for (int i=0; i < dropX.length; i++)
    dropX[i]=int(random(0, 600));

please note how we use i as an index for the array: dropX[i]=!

in fact we can treat all your arrays for the drops in one for loop:

  //sets values for drawRaindrops
  for (int i=0; i < dropX.length; i++) {
    dropX[i]=int(random(0, 600));
    dropY[i]=int(random(0, 600));
    rainSPD[i]=int(random(1, 5));
    dropC[i]=rainbow[int(random(0, 6))];
  }

that makes your setup() a lot shorter and more easy to handle and to read.

same applies for skyX, skyY, skyWd, skyHt (see below!!!)

By the way

in the function skyScraper_0_reset() you do just this:

//this sets the values of the skyscrapers' x and y locations.
void skyScraper_0_reset() {
  for (int i = 0; i <= 6; i++) 
  {
    skyX[i] = int(random(0, 600));
    skyY[i] = 600;
    skyWd[i]=50;
    skyHt[i]=int(random(200, 600));
  }
}

So why not call skyScraper_0_reset()from setup() instead of having all the lines in setup() like:

  //draws indeces for the skyscrapers' dimensions
  skyX[0]=int(random(0, 600));
  skyX[1]=int(random(0, 600));
  skyX[2]=int(random(0, 600));
  skyX[3]=int(random(0, 600));
  skyX[4]=int(random(0, 600));
  skyX[5]=int(random(0, 600));
  skyX[6]=int(random(0, 600));

??

From several arrays to classes

you have the properties (x,y, its color, its speed) of one drop distributed over the arrays.

you have to look in all four arrays in the same line number of that array (its index) to collect the properties of one drop.

Instead we can teach processing what a drop is and define it like a new type of variable.

see

https://forum.processing.org/two/discussion/8081/from-several-arrays-to-classes

for discussion.

Try to rewrite your code using class Drop and objects of it in an array drops.

Call of drawRainDrop wrong

In draw() you draw the drops:

  for (int i = 0; i <= 9; i++) {
    drawRainDrop(dropX[i], dropY[i], rainSPD[0], dropC[4]);
  }  

BUT

this line:

drawRainDrop(dropX[i], dropY[i], rainSPD[0], dropC[4]);

let's you call ALL drops with the speed of drop #0 and ALL drops with color of drop 4. That renders both arrays (for rainSPD and dropC) useless.

ALL raindrops 6 times!!!

Another error:

in function drawRainDrop

 for (int i = 0; i < 9; i++) 
  {
    dropY[i] = dropY[i]+ rainSPD[i];
    fill(c);
    ....

BUT in draw()_

 for (int i = 0; i <= 9; i++)
    {
      drawRainDrop(dropX[i], dropY[i], rainSPD[i], dropC[i]);
    }

oups!

So each raindrop is drawn 9 times...

in draw() just say drawRainDrop();

same is true for drawSkyscraper() !!!!!!!!!

New Version

A new version with a few (not all by far!) corrections:

Among other things you can switch rain on and off now with the mouse and the rain just continues. Each drop that leaves the screen gets a reset.

boolean rain = false;
// boolean skyscraper = true;

color[] rainbow = new color[7];

int lightX;
int lightY;

int[]   dropX   = new int[10];
int[]   dropY   = new int[10];
color[] dropC   = new int[10];
int[]   rainSPD = new int[10];  

int[] skyX  = new int[7];
int[] skyY  = new int[7];
int[] skyWd = new int[7];
int[] skyHt = new int[7];

color skyscraperC;  

// -----------------------------------------------------------
// Processing core functions 

void setup()
{
  size(600, 600);

  //sets values for rainbow colors
  rainbow[0]=color(#FF0000);
  rainbow[1]=color(#FF8633);
  rainbow[2]=color(#FCFF33);
  rainbow[3]=color(#58FF33);
  rainbow[4]=color(#33ECFF);
  rainbow[5]=color(#3933FF);
  rainbow[6]=color(#C733FF);

  //sets values for drawRaindrops
  for (int i=0; i < dropX.length; i++) {
    dropX[i]=int(random(0, 600));
    dropY[i]=int(random(0, 600));
    rainSPD[i]=int(random(1, 5));
    dropC[i]=rainbow[int(random(0, 6))];
  }

  //draws indeces for the skyscrapers' dimensions -  skyScraper_0_reset(); !!! 
  skyX[0]=int(random(0, 600));
  skyX[1]=int(random(0, 600));
  skyX[2]=int(random(0, 600));
  skyX[3]=int(random(0, 600));
  skyX[4]=int(random(0, 600));
  skyX[5]=int(random(0, 600));
  skyX[6]=int(random(0, 600));

  skyY[0]=600;
  skyY[1]=600;
  skyY[2]=600;
  skyY[3]=600;
  skyY[4]=600;
  skyY[5]=600;
  skyY[6]=600;

  skyWd[0]=50;
  skyWd[1]=50;
  skyWd[2]=50;
  skyWd[3]=50;
  skyWd[4]=50;
  skyWd[5]=50;
  skyWd[6]=50;

  skyHt[0]=int(random(200, 600));
  skyHt[1]=int(random(200, 600));
  skyHt[2]=int(random(200, 600));
  skyHt[3]=int(random(200, 600));
  skyHt[4]=int(random(200, 600));
  skyHt[5]=int(random(200, 600));
  skyHt[6]=int(random(200, 600));
}

void draw()
{
  background(0, 200, 255);

  drawRainbow();

  //draws the skyscrapers
  drawSkyscraper();

  if (rain) {
    drawRainDrop();
  }//if
}//func 

// -----------------------------------------------------------
// Inputs 

void mousePressed()
{
  if (mouseX >  0   &&
    mouseX   <  600 &&
    mouseY   >= 240 &&
    mouseY   <  600 )
  {
    skyScraper_0_reset();
    //skyscraper=true;
  } else
  {
    raindrop_0_reset();
    rain=!rain;
  }
}//func 

// -----------------------------------------------------------
// Other functions 

void drawRainbow()
{
  int h=800;
  int j=800;

  //for loop draws all 6 circles
  for (int i = 0; i <= 6; i++) {
    noFill();
    strokeWeight(10);
    stroke(rainbow[i]);
    ellipse(300, 410, h-i*10, j-i*15);
  }
}

//sets the raindrop values to be used in 
void raindrop_0_reset() 
{
  for (int i = 0; i <= 9; i++) 
  {
    dropX[i]   = int(random(0, 600));
    dropY[i]   = -13;
    rainSPD[i] = int(random(1, 4));
    dropC[i]   = rainbow[int(random(0, 7))];
  }
}

//This method draws raindrops at locations, speed, and color.
void drawRainDrop() 
{ 
  for (int i = 0; i < 9; i++) 
  {
    dropY[i] = dropY[i]+ rainSPD[i];
    fill(dropC[i]);
    noStroke(); 
    //strokeWeight(1);
    ellipse(dropX[i], dropY[i], 
      10, 10);
    // left the screen?
    if (dropY[i] > height + 20) 
    {
      // reset!
      dropX[i]   = int(random(width));
      dropY[i]   = int(random(-33, -17));
      rainSPD[i] = int(random(1, 4));
      dropC[i]   = rainbow[int(random(0, 7))];
    }
  }
}

//this sets the values of the skyscrapers' x and y locations.
void skyScraper_0_reset() 
{
  for (int i = 0; i <= 6; i++) 
  {
    skyX[i] = int(random(0, 600));
    skyY[i] = 600;
    skyWd[i]=50;
    skyHt[i]=int(random(200, 600));
  }
  skyscraperC = rainbow[int(random(0, 6))];
}

//draws skyscrapers
void drawSkyscraper()
{  
  for (int i=0; i<6; i++)
  {
    //noStroke();
    fill(255);
    stroke ( skyscraperC ); 
    strokeWeight(10);
    rectMode(CORNER);
    rect(skyX[i], skyY[i]-skyHt[i], 
      skyWd[i], skyHt[i]);
    fill(255, 255, 0);
    //rect(lightX+50,lightY,i+12,20);
  }
}
//

Warm regards, Chrisir ;-)