Projectile physics using jQuery

index.jade

body
  .container
    .glass
    .floor

script.js

var speed = 100;
var gravity = 10;
var floorPos = $('.floor').position().top;
var interval = 1000;
//rotate plugin
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.glass').click(function() {
  var div = $("<div class=\"tear\"></div>");
//$("#box").append(div);
  var angle = 30 + Math.round(Math.random()*120);
  div.attr({'data-speed': speed, 'data-angle':angle, 'data-time':1});
  div.css({position: 'absolute', top: event.pageY, left: event.pageX});
  div.rotate(180-angle);
  $('body').append(div);
});

setInterval(function() {
  $('.tear').each(function() {
    var angle = $(this).attr('data-angle');
    var time = $(this).attr('data-time');
    var newTime = (time + interval)/1000;
    var x = speed * Math.cos(angle);
    var y = speed*time - gravity*Math.pow(time,2);  
  });
},interval);

style.scss

@import "compass/css3";
$water-color: rgba(0,167,255,0.6);
$glass-color: rgba(255,255,255,0.4);

body {
  background: #BEE;
}
.container {
  width: 100%;
}
.glass {
  width: 100px;
  height: 150px;
  background: linear-gradient(to top, $water-color 0%, $water-color 80%, $glass-color 80%, $glass-color 100%);
  display: block;
  border-radius: 5px;
  margin: 120px auto 0 auto;
}
.floor {
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, lightgreen 0%, darkgreen 20%) darkgreen;
  display: block;
}
//droplet from http://enjoycss.com/gallery/shapes/hw
.tear {
  @include box-sizing(content-box);
  width: 2em;
  height: 2em;
  border: none;
  @include border-radius(80% 0 55% 50% / 55% 0 80% 50%);
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  @include background($water-color);
  @include transform(rotateZ(-45deg)   );
  display:block
}

VYBbOZ.markdown

Projectile Physics using jQuery

A fun experiment trying to simulate water drops splashing.

A Pen by Cristián Berríos on CodePen.

License.