Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup () {
  //window size
  size(400, 400);
}

void draw () {

  background(2, 8, 48); 
  rectMode(CENTER);
  
  //Background Pillars
  
  //background of Left pillar
  noStroke();
  fill(29, 29, 45);
  rect ((52 + (0.04 * mouseX)), 250, 20, 300);
   
  //background of Right pillar
  noStroke();
  fill(29, 29, 45);
  rect ((330 + (0.04 * mouseX)), 250, 20, 300);

  //background cable (Left)
  stroke(29, 29, 45);
  strokeWeight(3);
  line((64 + (0.04 * mouseX)), 102, (200 + ( 0.04 * mouseX)), 250);

  //background cable (Right)
  stroke(29, 29, 45);
  strokeWeight(3);
  line((200 + (0.04 * mouseX)), 250, (318 + (0.04 * mouseX)), 102);

  //Stars and the Moon
  
  //Star 1
  noStroke();
  fill(255, 252, 219);
  ellipse((50 + (0.08 * mouseX)), 70, 8, 8);
  
  //Star 2
  noStroke();
  fill(255, 252, 219);
  ellipse((170 + (0.12 * mouseX)), 40, 12, 12);
  
  //Star 3
  noStroke();
  fill(255, 252, 219);
  ellipse((130 + (0.06 * mouseX)), 30, 10, 10);
  
  //Star 4
  noStroke();
  fill(255, 252, 219);
  ellipse((120 + (0.15 * mouseX)), 80, 12, 12);
  
  //Star 5
  noStroke();
  fill(255, 252, 219);
  ellipse((230 + (0.12 * mouseX)), 10, 12, 12);
  
  //Moon
  noStroke();
  fill(255, 252, 219);
  ellipse((300 + (0.12 * mouseX)), 40, 60, 60);
  
  //Bridge centre
  //Shading 1(Brightest)
  noStroke();
  fill(84, 84, 84);
  rect(200, 250, 400, 10);
  
  //Shading 2
  noStroke();
  fill(71, 71, 71);
  rect(200, 255, 400, 10);
  
  //Shading 3
  noStroke();
  fill(61, 61, 61);
  rect(200, 260, 400, 10);
  
  //Shading 4(Darkest)
  noStroke();
  fill(45, 45, 45);
  rect(200, 265, 400, 10);

  //Support Front
  //Luminated Pillar (Left)
  noStroke();
  fill(84, 84, 84);
  rect(60, 250, 20, 300);
  
  //Support Cable (Left)
  stroke(74, 74, 84);
  strokeWeight(4);
  line(70, 104, 200, 248);
  
  //Front of the Pillar (Left)
  noStroke();
  fill(63, 63, 63);
  rect(60, 250, 16, 300);

  //Luminated Pillar (Right)
  noStroke();
  fill(84, 84, 84);
  rect(340, 250, 20, 300);
  
  //Support Cable (Right)
  stroke(74, 74, 84);
  strokeWeight(4);
  line(330, 104, 200, 248);
  
  //Front of the Pillar (Right
  noStroke();
  fill(63, 63, 63);
  rect(340, 250, 16, 300);
  
  //Body of water
  noStroke();
  fill(0, 0, 135);
  rect(200, 390, 400, 60);
  
  //tells me the X and Y position of the mouse
  fill(255);
  text(mouseX, 10, 10);
  text(mouseY, 10, 20);
  }