GremlinsInGame03.html

<html>
<head>
  <title>Art / Dev - Rainy Day</title>
  <script src="p5.min.js"></script>
  <script>
  var IMAGE_WIDTH = 640;    // Don't change this.
  var IMAGE_HEIGHT = 640;   // Don't change this.
  var bucketX = 0;
  var bucketY = 0;
  var bucketWidth = 120;
  var bucketHeight = 140;
  var rainDropsCaught = 0;
  var particleCount = 120;
  var particles = [];
  var particleCounter = 0;
  var rainFill = 640;
  var delayFill = 0;

  //=============== DO ALL YOUR WORK HERE =======================

  function setup() {
    createCanvas(IMAGE_WIDTH, IMAGE_HEIGHT); // don't change this

     for (var i=0; i<particleCount; i++) {
      var magnitude = random(0, 300);
      var angle = random(0,2*PI )
       particles[i] = {
         x: random (200,400), //320 + magnitude * cos(angle);
         y: -50, //320 + magnitude * sin(angle),
         r: random(8, 30),
         hue: random(200, 230),
         vy:0,
         vx:0,
         x2:random (-20,20),
         x3:random (-20,20),
         x4:random (-20,20),
         y2:random (-10,10),
         y3:random (-20,20),
         y4:random (-30,30),
         alive:1

        };
     }
     noStroke()
     colorMode(HSB, 360, 100, 100, 1)


  }

  function draw() {
    fill(180, 0, 20,1)
    rect(0,0,width,height)

    var currentParticle = particles[particleCounter]
    var magnitude = random(1, 2)
    var angle = random(0, 2*PI)
    
      currentParticle.x = random (0,640)
      currentParticle.y = 0

    currentParticle.vx = magnitude * cos(angle)
    currentParticle.vy = 7 //magnitude * (sin(angle))
    currentParticle.alive = 1
    particleCounter = (particleCounter+1) % particleCount

    particles.forEach(updateParticle)
    particles.forEach(drawParticle)

    fill(0, 0, 0)
    stroke(0);
    strokeWeight(1);
    textSize(16);
    // text("Magnitude: "+magnitude,0, 20);
    // text("Angle: "+angle,0, 40);
    // text("vX: "+currentParticle.vx,0, 60);
    // text("vY: "+currentParticle.vy,0, 80);

    fill(216, 100, 100)
    stroke(216,100,100);
    rect(0,rainFill,640,640)  // Draw RainPuddle
    if (delayFill){ //Start Filling after first Drop hits ground
    rainFill -=0.05
    }

    fill(33, 100, 75)
    stroke(33,100,75);
    rect(0,635,640,640)  // Draw Ground

    drawBucket()

  }


 
  function updateParticle(particle) {
   
    particle.y += particle.vy

    if (particle.y > rainFill)
    {
      delayFill = 1
      ellipse(particle.x,particle.y,particle.r,particle.r)
      if (particle.vy > 0)
      { particle.vy = -particle.vy}
      particle.alive= 0
    }

    if (particle.x > bucketX && particle.x < bucketX + bucketWidth )
    {
      if (particle.y > bucketY + bucketHeight)
      {
        
        if(rainDropsCaught*.01 < bucketHeight+2)
        {rainDropsCaught++
          particle.alive= 0}
        else
        {
          if (random(1) < 0.5)
          {
           particle.x = bucketX-2
           
          }
          else
          {
            particle.x = bucketX+bucketWidth+2
          }
          particle.y = bucketY+5
          
        }

        
      } 
     
    }
    
  }


  function drawParticle(particle) {
    if(particle.alive)
    {
    fill(particle.hue,80,100)
    stroke(particle.hue,80,100)
    strokeWeight(5)
    bezier(particle.x,particle.y,particle.x-2,particle.y-2,particle.x-3,particle.y-4,particle.x-1,particle.y-7);

    
    }
  }


  function drawBucket() {
    bucketY = mouseY - bucketHeight / 2;
    bucketX = mouseX - bucketWidth / 2;


    fill  (216, 100, 100)
    stroke(216, 100, 100)
    rect(bucketX+1,bucketY+bucketHeight-rainDropsCaught*.01,bucketWidth-2,rainDropsCaught*.01)  // Draw Water in Bucket

    fill(185, 100, 75,.4)
    stroke(75,75,75);
    rect(bucketX,bucketY,bucketWidth,bucketHeight)  // Draw Bucket
  }

  // =============== STOP WORKING HERE ==========================

  </script>
  <style>
    body { padding: 0; margin: 5% 0 0; background-color: #666;}
    canvas { margin: 0 auto; display:block; }
  </style>
</head>
<body>
</body>
</html>