Month: April 2019

Design depends largely on constraints.

There’s a preconceived belief about discretion and invisibility being the priority in designs for disability, but in this chapter, to argue against this, the author proposes the example of eyeglasses, and how they’ve become not only accepted but also sought after as fashion statements. This acceptability is not due to their invisibility, and their ability to blend discreetly with a human’s features, etc. but that does not mean that some people do not still opt for invisibility, seeing as many people use contact lenses. However, the significance of this lies in the fact that people use both. Even when an option for complete invisibility exists, people still choose to use glasses.

So how can we design for disability, without allowing the product to become a stigma of some sorts?

The author made an interesting point about semantics or terminology in relation to design. He explains how eyeglasses are called “eyewear”, which suggests that you wear spectacles rather than just use or carry them, in a way, “wearer sets up a different relationship between the designer and the person being designed for” and this changes the perspective of prescription from “medical model” to “social model”, which is what destigmatizes medical design and allows it to become a part of the social sphere, in a way. It becomes a form of fashion, a statement, where you’re able to use your own style and customize its use based on your taste.

Towards the end, the author also mentions the importance of simplicity, as opposed to being “all things to all people”, which I whole-heartedly agree with. Especially because cognitive accessibility is an important yet overlooked aspect of disability design, perhaps because it is harder to quantify than say, disability on the basis of sight or hearing. But simple products are the most culturally and cognitively inclusive. (p.85)

Where is Tori’s mental state right now? You may be asking yourself. Well, last night, I had a dream where everyone just asked me if I was okay and told me to drink water.

So I decided to make a game where you would always win. No matter what. Because that’s the kind of support I need in my life.

The game is pretty basic. A bunch of circles go through the screen, bouncing off the walls like a kid who’s just discovered coffee. Your mission is to click on each ball, thus, vanishing it. There is a counter in the top left corner so you can keep track of how many balls there are left. And there is also a timer running. The catch? You have no idea how long you have. I’ve set the time t be between 10 and 30 seconds, although once you reach that time, you can reset the timer.

I should say that for some of the code, I used Amy’s catching ball game code as a reference to understand how the class may work. But the rest I figured out using my understanding of how it all works.

Here’s the video:

And here’s the main code:

int totBall = 30;
float xPos;
float yPos;
float spd;
int counter = 30;
boolean timer = true;
int x = 1;
boolean time = false;




Ball Ball[] = new Ball[totBall];


boolean timeIsUp=false;
float timeTillOver;

void setup() {
  fullScreen();

  noStroke();

  for (int i = 0; i < totBall; i++) {
    Ball[i] = new Ball(5, 100, random(1, 5), random(1, 5));
  }
  timeTillOver=millis()+random(10000,30000);
}


void draw() {
  background(0);

  if (time == false) {
    for (int i = 0; i < totBall; i++) {
      Ball[i].run();
    }


    fill(0);
    rect(0, 0, width, 50); 

    fill(255);
    textSize(30);
    text("Number of Balls:", 20, 30);
    text(counter, 280, 30);
    text("You Have Limited Time", 1500, 30);



    textSize(80);
    if (counter <= 0) {
      text("YOU WIN!", width/2-150, height/2);
      timer = false;
    }
  } else {
    textSize(60);
    text("TIME IS UP", width/2-150, height/2);
    textSize(30);
    text("press SPACE to resume", width/2 - 165, height/2 + 60);
  }

  if (timer == true) {
    if (millis() >= timeTillOver) {
      time = true;
    }
  }
}

void keyPressed(){
 if(key==' '){
  time=false; 
  timeTillOver=millis()+random(10000,30000);
 }
 
//maybe make a hard mode where they all turn black? or increase in speed?  
}

and Ball Class

class Ball {
  float xPos, yPos, spdX, spdY, size1;
  color clr;
  boolean disable = false;
  
  
  Ball(float x, float y, float speedX, float speedY) {
    xPos = x;
    yPos = y;
    spdX = speedX;
    spdY = speedY;
    size1 = random(35, 55);
    clr = color(random(0, 255), random(0, 255), random(0, 255));
  }
  
  void display() {
    
    if (disable == false){
    
    fill(clr);
    if (mousePressed    
    && dist(mouseX, mouseY, xPos, yPos) <= (size1/2)
     ){
      counter -= 1;
      disable = true;
    
    }
    ellipse(xPos, yPos, size1, size1);
    
    }
  
  }
  
  void move() {
    yPos += spdY;
    if (yPos > height || yPos < 50){
      spdY *= -1;
    }
    
    xPos += spdX;
    if(xPos > width || xPos < 0){
      spdX *= -1;
    }
  }
  
 

  void run() {
    move();
    display();
  }

  
}

 

In general, the human built environment is designed to fit the average person. Doors are designed for most people to be easily walked through. Chairs are designed to be sat in comfortable way (most of the time).

As such, most things are designed to be functional to the greatest number of users: ie. Right handed scissors. As the article states, however, some of the most interesting functional design comes in to being as a result of variance from the norm.

The article explains the significance and design of a multitude of common, and less common objects, and how they were designed to equalize those with disabilities such as bad eyesight, hearing, and lack of limbs. I was fascinated by the way this article defined an object as common as eyeglasses through this lens.

So if you are a particularly tall person, design a door you can fit through.

Thinking of design as depending largely on constraints – as quoted in Pullin’s chapter, was a very negative perspective to look at it through.  Though I consider myself to be a person with a tendency to view things rather negatively, surprisingly, I tend to think of design through all the possibilities that it can open. This negative way, however, implies that all of us are ‘disabled’ in a way and that good design helps us navigate through life with more simplicity and ease.

Yet I understand the point Pullin was making – the framework of thinking about design through constraints illuminates the border between design for functionality and design for visual pleasure.  This, however, poses the questions of balance and how exactly to maintain it without compromising one or the other. But, as Pullin further develops, designing for actual disabilities, can have immense formative factors on how the disability is perceived by the society in the first place. Quite a big responsibility, isn’t it?

What, however, strongly resonated with me was an implication of capitalism and how some of the benefits of modern research in design cannot be applied to the research in design for disabilities – simply because it would not be financially profitable as not as many people would buy it.

It reminded of a certain group of pharmaceuticals called ‘orphan drugs’ – drugs for diseases, that however, are not commercially developed and sold as companies are concerned about the level of profitability. Therefore, people with real conditions cannot get them treated because their condition is rare, and there would simply not be enough demand on the market to motivate the companies to satisfy it.

Though this is stretching it a little too far, the fact that designing for a disability is affected by such twisted forces of capitalism too, really makes me question the society as a whole – and what it is able to sacrifice in order to make a profit. There is so much potential, as Pullin vividly discusses, to destigmatize disabilities and integrate people of all needs through design. Yet the development and research of such are severely limited by ridiculous constraints of capitalism.

This reading made me think more about my life and how I use products though I tried to make a conscious effort to analyze how Pullin’s insights might be useful to the creation of my projects in this class. The discussion of medical aids and design choices was extremely interesting, although I honestly have not reached any conclusions of whether or not I believe that “fashion” should intrude into the design of prosthetics, hearing aids, etc.. This reading probably left me with more questions than answers to some of my beliefs on design and functionality. This brings me to discuss the other aspect of product design and creation in general that Pullin touches on: the importance of functionality and how it plays into the user experience. His discussion of James Leckey and his production of furniture for children with cerebral palsy. In what he calls the flying submarine, is it better to create products that are akin to a swiss army knife? Or are we better off creating products that suit a certain purpose/different people’s needs. Is the reason that Leckey decided to stop creating furniture that served many functions because of technological limitations of creating all these complex functions, or is cognitive overload the real cause in inhibiting its proper use? Like many of the readings, it is hard for me to reach any conclusions, but as I mentioned earlier, this reading made me think a lot about design decisions I make in creating as well as how design plays a role in my life and in others’ lives.

“Design depends largely on constraints”. This brings up an important idea in the balance between what is aesthetic and what is functional. Pullin describes the tension in medical professionals in engaging with a medical market that places objects “in fashion” or subsequently “out of fashion”.

What this tension tells us is of the significance in art and, in this case, design in creating and shifting the zeitgeist. A topic we touched upon in class, we now see that the zeitgeist is closely referenced in the medical field which attempts to make disability invisible. But as our notions of what should and shouldn’t be invisible, we see eyewear, a marker of disability, move from the realm of the invisible to visible, and s marker of something more than disability.

Here we see an intersection in the politically rooted nature of art, and the functionality of design. Spectacle designs take a stance on the nature of disabiilty and then create a specific experience with its use that exist outside of its original and inherent function. Wearing well design glasses express wealth, at some point in time is represented intelligence. These are factors influenced by design.  Ultimately, someone can engineer a fantastic set of spectacles, but what purpose does it serve if the experience of an individual is out of their control.

 

Additionally, here is my sketch for the week using objects.

//Circles and Lines_Nisala Saheed

DrawLine myLine[];
PVector center;
float angle;
float angle2;
float radius;
int numLines = 15;

void setup() {
  size(600, 600);
  
  center = new PVector (width/2, height/2); // we need to know the center of the cirlce that we are drawing.
  angle = 0;
  angle2 = 0;
  radius = 100;
  float increment = TWO_PI/numLines;
  myLine = new DrawLine[numLines];

  //increase i as an increment for the number of lines, until it reaches the desired number of lines
  for (int i=0; i<numLines; i++) {
    float ang = i*increment;//this is how much the angle increments by.
    myLine [i] = new DrawLine (ang, ang*sin(3)*4, radius);
  }
}
void draw() {
//background(50);
noStroke();
fill(20,30); 
rect(0,0, width,height);

  //if you want to see the center
  //ellipse(center.x, center.y, 10, 10);
//draw the lines
  for (int i=0; i<numLines; i++) {
    myLine[i].display();
    myLine[i].update();
  }
}

class DrawLine {

  PVector point1;
  PVector point2;

  float angle;
  float angle2;
  float radius;

  float x;
  float y;

  float x2;
  float y2;



  DrawLine(float _angle, float _angle2, float _radius) {

    point1 = new PVector(x, y);
    point2 = new PVector(x2, y2);

    angle=_angle;
    angle2=_angle2;
    radius = _radius;
  }

  void update() {

    x = center.x + cos(angle)*radius;
    y = center.y + sin(angle)*radius;


    x2 = center.x- cos(angle2)*radius;
    y2 = center.y- sin(angle2)*radius;

    angle += PI/120;
    angle2+=PI/90;
  }

  void display() {
    
    stroke(21, 220,160);
    line(x, y, x2, y2);
  }
}

 

So I have decided to make a ping pong game in processing. First of all it is a multiplayer game for two people. I have made two classes one of them is the paddle and the other one is the ball. The paddles are controlled by either “w” and “s” or “up” and “down”. There is a score count and a reset button.
Here is the code:
main file:

ball ball;
padle padle1, padle2;
color fillVal = color(126);
float move = 0;
float velocity = 40;
float move1 = 0;
PFont f;



void setup() {
  rectMode(CENTER);
  size(1280, 640);
  f = createFont("Arial", 16, true);
  ball = new ball(5, 5, 20);
  padle1 = new padle(width*0.05, height/2, 10, height/4);
  padle2 = new padle(width*0.95, height/2, 10, height/4);
}

void keyPressed() {
  println(keyCode);
  if (keyCode == 32) {
    ball.velocityX = 5;
    ball.ballY = height/2;
    ball.velocityY = 5;
    ball.ballX = width/2;
    ball.counter1 = 0;
    ball.counter2 = 0;
  }
  if (keyCode == 83) {
    if (move<=200)
      move+= velocity;
  }
  if (keyCode == 87) {
    if (move>=-200)
      move -= velocity;
  } 
  if (keyCode == 38) {
    if (move1>=-200)
      move1-= velocity;
  }
  if (keyCode == 40) {
    if (move1<=200)
      move1+= velocity;
  }
}
void draw() {
  background(0);
  textFont(f, 32);
  fill(255);
  text(ball.counter1, width*0.33, height*0.1);
  text(ball.counter2, width*0.66, height*0.1);
  textFont(f, 14);
  text("'SPACE' to reset score", 5, 14);
  text("'W' and 'S' to move left paddle", 5, height-7);
  text("'UP' and 'DOWN' to move right paddle", width*0.78, height-7);
  drawLine();  
  ball.run(height/2+move-height/8, height/2+move+height/8, height/2+move1-height/8, height/2+move1+height/8);
  padle1.display(width*0.05, height/2+move, 10, height/4);
  padle2.display(width*0.95, height/2+move1, 10, height/4);
}


void drawLine() {
  stroke(255);
  strokeWeight(4);
  fill(0);
  line(width/2, 0, width/2, height);
}

ball class:

class ball {
  float velocityX;
  float velocityY;
  int size;
  float ballX = width/2;
  float ballY = height/2;
  color fillVal = color(255, 0, 0);
  int counter1 = 0;
  int counter2 = 0;

  ball(float _velocityX, float _velocityY, int _size) {
    velocityX = _velocityX;
    velocityY = _velocityY;
    size = _size;
  }
  void update(float a, float b, float c, float d) {
    //println("velocityX = "+velocityX); 
    if (ballX >= width) {
      ballX = width/2;
      ballY = height/2;
      velocityX = -5;
      velocityY = 5;
      counter1+=1;
    }
    if (ballX <= 0 ) {
      ballX = width/2;
      ballY = height/2;
      velocityX = 5;
      velocityY = 5;
      counter2+=1;
    }
    if (ballX >= width*0.94 && ballX <= width*0.96 && ballY >= c && ballY <=d ||  ballX >= width*0.04 && ballX <= width*0.06 && ballY >= a && ballY <=b) {
      velocityX*=1.1;
      velocityY = random(-15,15);
      velocityX = -velocityX;
    }
    ballX += velocityX;
    if (ballY >= height || ballY <= 0) {
      velocityY = -velocityY;
    }
    ballY += velocityY;
  }


  void display() {
    //ellipse(width/2, height/2, size, size);
    fill(fillVal);
    noStroke();

    ellipse(ballX, ballY, size, size);
  }
  void run(float a, float b, float c, float d) {
    update(a, b, c, d);
    display();
  }
}

paddle class:

class padle {
  float x;
  float y;
  float w;
  float h;
  color fillVal = color(0, 255, 0);
  padle(float _x, float _y, float _w, float _h) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;

  }
  void update() {
  }
  void display(float x, float y, float w, float h) {
    fill(fillVal);
    rect(x, y, w, h, 5);
  }
  void run() {
    update();
    display(x,y,w,h);
  }
}

 

 

For this week’s assignment I decided to create a simple game using OOP, creating a game with a player-controlled rectangle that stays at the bottom of the screen. The player is able to control the rectangle across the x-axis as well as having it jump. The goal of the game is to avoid the falling ellipses, and the player’s score increases the longer they remain in the game. The number of ellipses increases as the duration of the game increases.

I created two classes for this game, the one for the ellipses and one for the player.

There were a few problems I encountered while making the game, and I had trouble detecting collisions between the rectangle and the falling ellipses. I was not sure how to loop through the array of ellipses created and detecting their contact with the player’s rectangle.  But thanks to Dan Shiffman’s helpful tutorials I was able to piece together how to detect this.

Below is a video showing the game in action:

Below is the code for the game:

float monsterSpotY = random(300, 560);
float monsterSpotX = random(200, 560);
float monsterRadius = 40;
int gravity = 1;

int counter = 0;
// gamestate to detect if player is dead and in play again menu or not
int gameState = 1;
Player myPlayer;
Monster myMonsters[];
void setup() {
  size(600, 600);
  myPlayer = new Player();
  int monsterCount = 500;
  myMonsters = new Monster[monsterCount];
  for (int i = 0; i < monsterCount; i++) {
    myMonsters[i] = new Monster();
  }
}    

void draw() {
  background(100);
  if (gameState == 1) {
    myPlayer.display();
    myPlayer.update();    
    myPlayer.stayDown();  
    gameOver();
    text(counter, width - 40, 30);
    
    int counterIncrement = counter /7;
    for (int i = 0; i < counterIncrement / 20; i+= 1) {
      myMonsters[i].run();
      //println("i is equal to " + i); 
      if (i == counterIncrement / 20) {
       i = 0; 
       println(i);
      }  
    }  
    counter++;
//increment counter to add elliipses falling
  } else {
     textAlign(CENTER);
     text("You Died! Your score is: " + counter, width/2, height / 2);
     text("Click here to play again", width / 2, height / 2 + 30);
     if (mousePressed == true && mouseX > 230 && mouseX < 360 && mouseY > 320 && mouseY < 340)  {
         setup();
         gameState = 1;
         counter = 0;
       }       
     }  
  }  

void keyPressed() {
  if (keyCode == UP && myPlayer.y == 580) {
    myPlayer.up = 2;
  }       
  if (keyCode == DOWN) {
    myPlayer.down = 2;
  }    
  if (keyCode == LEFT) {
    myPlayer.left = 2;
  }   
  if (keyCode == RIGHT) {
    myPlayer.right = 2;
  }
}     
void keyReleased() {
  if (keyCode == UP) {
    myPlayer.up = 0;
    myPlayer.down = gravity;
  } else if (keyCode == DOWN) {    
    myPlayer.down=0;
  } else if (keyCode == LEFT) {    
    myPlayer.left=0;
  } else if (keyCode == RIGHT) {    
    myPlayer.right=0;
  }
}    
void gameOver() {
  for (int i = 0; i < 30; i++) {
//detect if rect is hittiing any ellipse
    if (myPlayer.x + 20  > myMonsters[i].monsterSpotX - 20 && myPlayer.x - 20 < myMonsters[i].monsterSpotX && myPlayer.y - 20 < myMonsters[i].monsterSpotY && myPlayer.y + 20 > myMonsters[i].monsterSpotY - 10) {
      gameState = 0;      
  } else {
    }
  } 
}

The code for the ellipses and rectangle classes:

class Player { 
  float x;
  float y;
  float up;
  float down;
  float left;
  float right;
  float speed;
  float maxJump;
  float side;
  Player() {
    x = 0;
    y = 580;
    up = 0;
    down = 0;
    left = 0;
    right = 0; 
    speed = 4;
    maxJump = 200;
    side = 20;
  }    
  void display() {
    fill(0);
    rect(x, y, side, side);
  }    
  void update() {
    x = x + (right - left) * speed;
    y = y + (down - up) * speed;
    if (x <= 1) {
      x = 0;
      y = 580;
    } else if (x >= 580) { 
      x = 580;
      y = 580;
    } else if  (y <= 0) {
      y = 0;
    } else if (y >= 580) {
      y = 580;
    }
  }  
  void stayDown() {
    if (y < maxJump) {
      up=0;
      down = gravity;
    }
  }
}

class Monster {
  float x;
  float y;
  float radius;
  float ySpeed;  
  float monsterSpotY;
  float monsterSpotX; 
  color monsterColor;
  Monster() {

    radius = monsterRadius;
    ySpeed = random(2, 6);
    monsterSpotX = random(0, width);
    monsterSpotY = random(0,100);        
  }    
  void show() {
    monsterColor = color(map(monsterSpotY, 0, height, 0, 255), map(monsterSpotY, 0, height, 100, 150), map(monsterSpotY, 0, height, 150, 255));      

    fill(monsterColor);
    noStroke();
    ellipse(monsterSpotX, monsterSpotY, monsterRadius, monsterRadius);
  }
  void fall() {
    monsterSpotY = monsterSpotY + ySpeed;
    if (monsterSpotY > height) {
      monsterSpotY = random(-200, 300);
    }
}
  void run() {
    fall();
    show();
  }  
}

 

Before reading this, I had no idea there were so many inventions for the disabled and I did not think about the work that went into designing them. Because everyone’s situation is different, the devices that help aid them are difficult to standardize. Additionally, if that person has to use the technology for the rest of their lives, it has to be one that they enjoy and are comfortable with and because of that, for those creating the devices, design has to be up to par.

I personally like the point about simplicity because it really focuses in on what’s important and in this case, it’s to give the user a functionality they need. It should be simple enough that it’s intuitive and useful at the same time, yet there’s still a like of devices out there that are too confusing to use.

For this assignment, we were asked to create a piece of art or a game using object-oriented programming (OOP). I immediately thought of re-creating some significant piece of art using processing and adding randomized, generative elements to it. When I started thinking of pieces that were predominantly geometric, I immediately thought of Piet Mondrian’s work. I thought it would be interesting to see abstractness become randomized, in a way. After this, I searched for Mondrian + Generative Art. I did not expect to find that many results. Mondrian and code, Mondrian and generative art, Mondrian and processing. There even was an entire programming language called Piet. It was way, way too overdone to the point where I couldn’t think of any way I could create my own take on it- so I had to change my idea.

So, inspired by the rainfall over the weekend, I created a rainy skyline of Abu Dhabi from day to night. First, for the sky, I had to think on paper:

Here is the final result, the “time of day” changes with the movement of the mouse:

And, here is my code:

//arrayList to hold all stars
ArrayList<Star> stars = new ArrayList<Star>();


Moon moon = new Moon();
int modifier;
float raindrop; 
int red, green, blue;

void setup()
{
  size(585,430);
  background(0);
  raindrop= 0; 
  
  //generate 30 random stars
  for (int i = 0; i < 30; i++)
  {

    stars.add(new Star());
  }
}

void draw()
{
  

  raindrop = raindrop + 4; //speed
  
  //if raindrop falls below canvas, reset to zero
  if (raindrop >= height)
    raindrop = 0;
  
  //map mouseX to rgb values of background
  red = int(map(mouseX, 0, width, 83, 0));
  green = int(map(mouseX, 0, width, 157, 0));
  blue = int(map(mouseX, 0, width, 253, 0));


  modifier = int(map(mouseX, width/2, width, 29, 0));
  
  
  background(red, green, blue);
  
  if (mouseX > width/2)
  {
    for (int i = 0; i < stars.size() - modifier; i++)
    {
      Star s = stars.get(i);
      s.drawStar();
    }
  }
  
  moon.update();
  moon.drawMoon();
//rainfall
  
  fill(211,211,211);
rect(10, raindrop, 2, 5);
rect(50, raindrop+20, 2, 5);
rect(80, raindrop, 2, 5);
rect(110, raindrop+100, 2, 5);
rect(140, raindrop+150,2, 5);
rect(180, raindrop-200, 2, 5);
rect(200, raindrop-150, 2, 5);
rect(240, raindrop-50, 2, 5);
rect(240, raindrop, 2, 5);
rect(300, raindrop+20, 2, 5);
rect(440, raindrop, 2, 5);
rect(440, raindrop, 2, 5);
rect(550, raindrop+100, 2, 5);
rect(530, raindrop-250, 2, 5);
rect(530, raindrop-200, 2, 5);
rect(580, raindrop-300, 2, 5);
rect(300, raindrop-400, 2, 5);
rect(140, raindrop-350, 2, 5);
rect(400, raindrop-300, 2, 5);
rect(400, raindrop-250, 2, 5);
rect(400, raindrop-200, 2, 5);
rect(550, raindrop, 2, 5);

//this part of my code uses & adapts from "skyline" by Shiwen Qin on OpenProcessing

 //building 1
  fill(250);
  rect(35,255,5,55);
  fill(250);
  rect(40,250,40,60);
  fill(51, 51, 51);
  quad(80,250,80,310,95,310,95,260);
  fill(106,106,71);
  for (int y=258; y<310; y+=8){
    fill(106,106,71);
    rect(36,y,2,2);
  }
  for (int y=258; y<300;y+=10){
    for(int x=44; x<78; x+=10){
    fill(106,106,71);
    rect(x,y,3,3);
    }
  }
  
   //building 2
  fill(51, 51, 51);
  rect(93,265,40,60);
  for (int y=270; y<300;y+=10){
    for(int x=96; x<130; x+=10){
    fill(165,160,102);
    rect(x,y,5,3);
    }
  }
  
    //building 3
  fill(220,220,220);
  rect(150,225,15,120);
  fill(220,220,220);
  rect(164,215,10,140,6);
    fill(169,169,169);
  rect(166,218,2,140,7);
  fill(105,105,105);
  arc(170,250,70,70,-PI/2,0);
  rect(170,250,35,140);
    fill(192,192,192);
  arc(170,250,60,60,-PI/2,0);
  rect(170,250,30,140);
   fill(192,192,192);
  arc(170,250,40,40,-PI/2,0);
  rect(170,250,20,140);
  
  
    //fourth building
  fill(250);
  fill(250);
  rect(235,225,5,75);
  fill(250);
  rect(240,225,40,80);
   fill(106,106,71);
  for (int y=258; y<310; y+=8){
   fill(106,106,71);
    rect(236,y,2,2);
  }
  for (int y=258; y<300;y+=10){
    for(int x=244; x<278; x+=10){
   fill(106,106,71);
    rect(x,y,3,3);
    }
  }
  
   
 // fifth building
 fill(102, 102, 102);
 rect(300,185,36,120);
 fill (51, 51, 51);
 rect (295, 185, 5, 120);
 rect (305, 185, 5, 120);
 
  //sixth building
  fill(51, 51, 51);
  rect(376,172,2,10);
  rect(375,180,3,15);
  quad(350,206,350,316,380,316,380,190);
  fill(102, 102, 102);
  quad(375,198,375,316,405,316,405,215);
  fill(51, 51, 51);
  rect(387,215,1,115);
  rect(396,215,1,115);
  
  //seventh building
  fill(51, 51, 51);
  rect(430,200, 40 ,150);
  fill(250);
  rect(430,200, 40 ,5);
  rect(470,200, 2 ,150);

  //seventh building .2
  fill(192,192,192);
  rect(490,200, 40 ,150);
  fill(250);
  rect(490,200, 40 ,5);
  rect(500,200, 2 ,150);
  
  
  
  //eighth building
   fill(51, 51, 51);
  rect(225,225,10,120);
  rect(270,225,10,120);
    //building 8
  arc(540,190,70,70,-PI*4/6,-PI*1/6,CHORD);
  quad(523,159,523,325,570,325,570,172);
  for(int y=170;y<325 ;y+=5){
   fill(106,106,71);
  quad(523,y,570,y+2,570,y+4,523,y+2);
  }
  
  //ninth building
  fill(51, 51, 51);
  quad(585,165,615,155,620,325,585,325);
  fill(31,30,72);
  triangle(614,155,622,158,619,325);
  for(int y=210;y<325 ;y+=5){
   fill(106,106,71);
  quad(585,y,615,y-1,615,y+1,585,y+2);
  }
  for(int y=210;y<325 ;y+=5){
   fill(64,64,34);
  quad(615,y-1,621,y,621,y+2,615,y+1);
  }

  //shore
  fill(69, 137, 163);
  rect(0,310,900,400);
  
   //mangroves
   for(int x=0;x<900;x+=20){
   mangroves(x,310,10,10,3,28,5,255);
   //varying parameters for mangroves
      mangroves(x+10,305,8,8,6,41,8,255); 
      mangroves(x+5,300,5,4,14,62,17,255);
       
   }
}

void cloud(int x,int y,int w,int h,int red,int green,int blue,int a){
 fill(red,green,blue,a);
 ellipse(x,y,w,h);
}

//sets variables they're being created in
void mangroves(int x,int y,int w,int h,int red,int green,int blue,int a){
 fill(red,green,blue,a);
 ellipse(x,y,w,h); 
 ellipse(x+5,y+5,w,h);
 ellipse(x-5,y-3,w,h);
 ellipse(x+3,y-5,w,h);
 ellipse(x-3,y+5,w,h);
}

class Moon
{
  int x;
  int y;
  int sizeMod = 0; 
  
  Moon()
  {
 
    this.x = 60;
    this.y = 90;
  }
  
  void drawMoon()
  {
    int blue, green;
    
     //map mouseX to green and blue rgb values for moon
     green = int(map(mouseX, 0, width, 221, 250));
     blue = int(map(mouseX, 0, width, 0, 205));
     
     noStroke();
     fill(255, green, blue);
    
    //map mouse X to rgb values for background/sky
    int bg_red = int(map(mouseX, 0, width, 83, 0));
    int bg_green = int(map(mouseX, 0, width, 157, 0));
    int bg_blue = int(map(mouseX, 0, width, 253, 0));
    
    //map mouseX to variable sizeMod, starting at 0, ending at 20
    sizeMod = int(map(mouseX, 0, width/6, 0, 20));
     
    //width/6 divides canvas into 6, for each moon/sun phase
    if (mouseX <= width/6)
    {
      //sizeMod decreases size of moon, starts at 80, ends at 80 - 20 = 60
      ellipse(x, y, 80 - sizeMod, 80 - sizeMod);
    }
    else if (mouseX > width/6 && mouseX <= 2 * (width/6))
    {
      arc(x, y, 60, 60, HALF_PI, 3 * HALF_PI, OPEN);
    }
    else if (mouseX > 2 * width/6 && mouseX <= 3 * width/6)
    {
      ellipse(x, y, 60, 60);
      //draw two overlapping circles to give illusion of crescent moon
      fill(bg_red, bg_green, bg_blue);
      ellipse(x + 10, y, 50, 50);
    }
    else if (mouseX > 3 * width/6 && mouseX <= 4 * width/6)
    {
      ellipse(x, y, 60, 60);
      //can't figure out how to flip arc, just cover with rectangle
      fill(bg_red, bg_green, bg_blue);
      rect(x - 30, y - 30, 30, 60);
    }
    else if (mouseX > 4 * width/6 && mouseX <= 5 * width/6)
    {
      ellipse(x, y, 60, 60);
      //draw two overlapping circles to give illusion of crescent moon
      fill(bg_red, bg_green, bg_blue);
      ellipse(x - 10, y, 50, 50);
    }
    else
    {
      ellipse(x, y, 60, 60);
    }
  }
  
  void update()
  {
    x = mouseX;
  }
}

class Star
{
  int x;
  int y;
  
  Star()
  {
    //instantiate star with random x and random y values, every time you restart sketch it' random
    this.x = int(random(0, width));
    this.y = int(random(0, height/3));
  }
  
  void drawStar()
  {
    fill(255);
    ellipse(x, y, 1.5, 1.5);
  }
}