Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//phill damaskin
//991469514

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

void draw()
{
  //quad order : top left, bottom left, bottom right, top right (ccw)

  //floor
  background(44);

  //reset stroke
  strokeWeight(0);
  //stroke(0, 0, 0, 0);

  //light layer
  {
    //gradient effect
    fill(201, 187, 132); //1
    quad(130, 0, 120, 40, 280, 40, 270, 0);

    fill(194, 181, 130); //2
    quad(120, 40, 110, 80, 290, 80, 280, 40);

    fill(188, 175, 128); //3
    quad(110, 80, 100, 120, 300, 120, 290, 80);

    fill(180, 169, 128); //4
    quad(100, 120, 90, 160, 310, 160, 300, 120);

    fill(166, 158, 125); //5
    quad(90, 160, 80, 200, 320, 200, 310, 160);

    fill(157, 149, 122); //6
    quad(80, 200, 70, 240, 330, 240, 320, 200);

    fill(150, 144, 121); //7
    quad(70, 240, 60, 280, 340, 280, 330, 240);

    //ground light
    fill(255, 245, 189);
    ellipse(200, 285, 140 * 2 + sin(frameCount * 0.5), 60 * 2 + sin(frameCount * 0.5));

    //light bounce effect
    fill(255, 245, 189, 18);
    ellipse(200, 285, 150 * 2 + sin(frameCount * 0.5), 65 * 2 + sin(frameCount * 0.5));
    fill(255, 245, 189, 14);
    ellipse(200, 285, 170 * 2 + sin(frameCount * 0.5), 73 * 2 + sin(frameCount * 0.5));
    fill(255, 245, 189, 10);
    ellipse(200, 285, 200 * 2 + sin(frameCount * 0.5), 80 * 2 + sin(frameCount * 0.5));
    ellipse(200, 285, 240 * 2 + sin(frameCount * 0.5), 100 * 2 + sin(frameCount * 0.5));
    ellipse(200, 285, 290 * 2 + sin(frameCount * 0.5), 125 * 2 + sin(frameCount * 0.5));
  }

  //rock layer
  {
    //shadow
    fill(44);
    rect(150 - sin(frameCount * 0.5) * 0.5, 260 - sin(frameCount * 0.5) * 0.5, 100 + sin(frameCount * 0.5), 40 + sin(frameCount * 0.5) * 0.5);

    //front
    fill(84);
    rect(160, 230, 80, 60);

    //top
    fill(200);
    rect(160, 210, 80, 20);

    //sword hole
    fill(0);
    rect(178, 217.5, 44, 5);
  }

  //sword layer
  {
    //y offset: + (mouseY - 240) * 0.25

    //blade
    fill(224);
    //blade left
    quad(190, 180 + (mouseY - 240) * 0.25, 180, 250 + (mouseY - 240) * 0.25, 200, 285 + (mouseY - 240) * 0.25, 200, 180 + (mouseY - 240) * 0.25); 
    fill(238);
    //blade right
    quad(200, 180 + (mouseY - 240) * 0.25, 200, 285 + (mouseY - 240) * 0.25, 220, 250 + (mouseY - 240) * 0.25, 210, 180 + (mouseY - 240) * 0.25); 
    fill(255);
    //blade shine
    rect(198, 180 + (mouseY - 240) * 0.25, 4, 100);

    //shadow on the blade
    fill(0, 0, 0, 126);
    //left blade
    quad(190, 180 + (mouseY - 240) * 0.25, 189, 190 + (mouseY - 240) * 0.25, 200, 195 + (mouseY - 240) * 0.25, 200, 180 + (mouseY - 240) * 0.25);
    //right blade
    quad(200, 180 + (mouseY - 240) * 0.25, 200, 195 + (mouseY - 240) * 0.25, 211, 190 + (mouseY - 240) * 0.25, 210, 180 + (mouseY - 240) * 0.25); 

    //blade separator
    //top separator highlight
    fill(213, 156, 0);
    quad(180, 165 + (mouseY - 240) * 0.25, 175, 170 + (mouseY - 240) * 0.25, 225, 170 + (mouseY - 240) * 0.25, 220, 165 + (mouseY - 240) * 0.25); 
    //connector
    rect(175, 170 + (mouseY - 240) * 0.25, 50, 5); 
    //top separator
    fill(174, 106, 0);
    quad(180, 170 + (mouseY - 240) * 0.25, 175, 175.5 + (mouseY - 240) * 0.25, 225, 175.5 + (mouseY - 240) * 0.25, 220, 170 + (mouseY - 240) * 0.25); 
    //bottom separator
    quad(175, 175 + (mouseY - 240) * 0.25, 180, 180 + (mouseY - 240) * 0.25, 220, 180 + (mouseY - 240) * 0.25, 225, 175 + (mouseY - 240) * 0.25);

    //highlight
    fill(255, 255, 255, 50);
    quad(180, 169 + (mouseY - 240) * 0.25, 175, 174 + (mouseY - 240) * 0.25, 225, 174 + (mouseY - 240) * 0.25, 220, 169 + (mouseY - 240) * 0.25);

    //handle
    fill(155, 90, 0);
    rect(195, 140 + (mouseY - 240) * 0.25, 10, 28);
    triangle(195, 168 + (mouseY - 240) * 0.25, 200, 171 + (mouseY - 240) * 0.25, 205, 168 + (mouseY - 240) * 0.25);

    //diamond shape
    //highlight
    fill(213, 156, 0);
    quad(200, 115 + (mouseY - 240) * 0.25, 190, 130 + (mouseY - 240) * 0.25, 200, 145 + (mouseY - 240) * 0.25, 210, 130 + (mouseY - 240) * 0.25);
    rect(190, 130 + (mouseY - 240) * 0.25, 20, 5);
    //base
    fill(155, 90, 0);
    quad(200, 120 + (mouseY - 240) * 0.25, 190, 135 + (mouseY - 240) * 0.25, 200, 150 + (mouseY - 240) * 0.25, 210, 135 + (mouseY - 240) * 0.25);

    //gem
    fill(0, 255, 0);
    ellipse(200, 135 + (mouseY - 240) * 0.25, 10, 13);

    //gem highlight
    fill(255);
    ellipse(200, 132 + (mouseY - 240) * 0.25, 5, 5);
  }

  //box rock overlay
  {
    //front
    fill(84); //1
    rect(160, 230, 80, 20);
    fill(80); //2
    rect(160, 250, 80, 20);
    fill(76); //3
    rect(160, 270, 80, 20);

    //top
    fill(200);
    rect(160, 222.5, 80, 7.5);

    //shadow
    fill(44);
    rect(150, 290, 100, 10);

    //ground light
    fill(255, 245, 189);
    rect(150, 300, 100, 40);

    //box highlight
    fill(255);
    rect(160, 230, 80, 4);
  }

  //fireflies
  {
    fill(255);
    ellipse(frameCount % 400, 100 + sin(frameCount * 0.03) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(frameCount % 400, 100 + sin(frameCount * 0.03) * 32, 30 + cos(frameCount), 30 + cos(frameCount));

    fill(255);
    ellipse(200 + (frameCount * 0.95 % 400), 100 + cos(frameCount * 0.02) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(200 + (frameCount * 0.95 % 400), 100 + cos(frameCount * 0.02) * 32, 30 + cos(frameCount), 30 + cos(frameCount));
    fill(255);
    ellipse(-200 + (frameCount * 0.95 % 400), 100 + cos(frameCount * 0.04) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(-200 + (frameCount * 0.95 % 400), 100 + cos(frameCount * 0.04) * 32, 30 + cos(frameCount), 30 + cos(frameCount));

    fill(255);
    ellipse(-300 + (frameCount % 700), 200 + cos(frameCount * 0.03) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(-300 + (frameCount % 700), 200 + cos(frameCount * 0.03) * 32, 30 + cos(frameCount), 30 + cos(frameCount));
    fill(255);
    ellipse(-100 + (frameCount % 500), 200 + cos(frameCount * 0.02) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(-100 + (frameCount % 500), 200 + cos(frameCount * 0.02) * 32, 30 + cos(frameCount), 30 + cos(frameCount)); 

    fill(255);
    ellipse(frameCount % 400, 300 + cos(frameCount * 0.03) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(frameCount % 400, 300 + cos(frameCount * 0.03) * 32, 30 + cos(frameCount), 30 + cos(frameCount));
    fill(255);
    ellipse(-200 + (frameCount * 0.95 % 400), 300 + sin(frameCount * 0.02) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(-200 + (frameCount * 0.95 % 400), 300 + sin(frameCount * 0.02) * 32, 30 + cos(frameCount), 30 + cos(frameCount));
    fill(255);
    ellipse(200 + (frameCount * 0.95 % 400), 300 + sin(frameCount * 0.04) * 32, 4, 4);
    fill(255, 255, 255, 10);
    ellipse(200 + (frameCount * 0.95 % 400), 300 + sin(frameCount * 0.04) * 32, 30 + cos(frameCount), 30 + cos(frameCount));
  }

  //vignette
  {
    fill(0, 0, 0, 0);
    strokeWeight(160);

    //this would be easier with a for loop!
    stroke(0, 0, 0, 20);
    ellipse(200, 200, 400 + (200 - mouseY) * 0.5, 400 + (200 - mouseY) * 0.5);
    ellipse(200, 200, 415 + (200 - mouseY) * 0.495, 415 + (200 - mouseY) * 0.495);
    ellipse(200, 200, 430 + (200 - mouseY) * 0.49, 430 + (200 - mouseY) * 0.49);
    ellipse(200, 200, 445 + (200 - mouseY) * 0.485, 445 + (200 - mouseY) * 0.485);
    ellipse(200, 200, 460 + (200 - mouseY) * 0.48, 460 + (200 - mouseY) * 0.48);
    ellipse(200, 200, 475 + (200 - mouseY) * 0.475, 475 + (200 - mouseY) * 0.475);
    ellipse(200, 200, 490 + (200 - mouseY) * 0.47, 490 + (200 - mouseY) * 0.47);
    ellipse(200, 200, 505 + (200 - mouseY) * 0.465, 505 + (200 - mouseY) * 0.465);
    ellipse(200, 200, 520 + (200 - mouseY) * 0.46, 520 + (200 - mouseY) * 0.46);
    ellipse(200, 200, 540 + (200 - mouseY) * 0.45, 540 + (200 - mouseY) * 0.45);
    ellipse(200, 200, 580 + (200 - mouseY) * 0.44, 580 + (200 - mouseY) * 0.44);
    ellipse(200, 200, 640 + (200 - mouseY) * 0.42, 640 + (200 - mouseY) * 0.42);
    ellipse(200, 200, 700 + (200 - mouseY) * 0.4, 700 + (200 - mouseY) * 0.4);
    ellipse(200, 200, 760 + (200 - mouseY) * 0.38, 760 + (200 - mouseY) * 0.38);
    ellipse(200, 200, 820 + (200 - mouseY) * 0.36, 820 + (200 - mouseY) * 0.36);
    ellipse(200, 200, 880 + (200 - mouseY) * 0.34, 880 + (200 - mouseY) * 0.34);
  }

  //camera border effect
  {
    noStroke();
    fill(0, 0, 0, 255);

    rect(0, 0, 400, 20 + (mouseY * 0.2));
    rect(0, 400 - 20 - (mouseY * 0.2), 400, 20 + (mouseY * 0.2));
  }
}