The Bugs (html, css, javascript)
HTML
<canvas id="canvas" resize></canvas>
<div id="sena">♥</div>
CSS
*{
margin:0;
padding:0;
}
body{
cursor:none;
background: #f2f9fe;
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f2f9fe), color-stop(100%,#d6f0fd));
background: -webkit-radial-gradient(center, ellipse cover, #f2f9fe 0%,#d6f0fd 100%);
background: radial-gradient(ellipse at center, #f2f9fe 0%,#d6f0fd 100%);
}
canvas{
display:block;
}
#sena{
background: url("https://image.flaticon.com/icons/png/128/164/164826.png")no-repeat;
background-size: 100%;
position:absolute;
font-size:5px;
font-family:sans-serif;
font-weight:bold;
color:#221e26;
opacity:0.85;
left:40%;
top:30%;
text-shadow:0 5px 3px rgba(0,0,0,0.5);
animation:breeze 1s infinite ease;
}
@keyframes breeze{
0% { font-size:60px;}
50% { font-size:70px;}
100% { font-size:60px;}
}
JAVASCRIPT
paper.install(window);
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var left_hand = new Image();
left_hand.src = 'https://www.shareicon.net/data/128x128/2016/08/02/805637_bug_512x512.png';
var right_hand = new Image();
right_hand.src = 'https://www.shareicon.net/data/128x128/2016/08/02/805637_bug_512x512.png';
var sena;
var moneySign = document.getElementById('sena');
Hand = Raster;
Hand.prototype.velocity = new Point(0,0);
Hand.prototype.acceleration = new Point(0,0);
Hand.prototype.mass;
Hand.prototype.limit;
Hand.prototype.angle = 0;
Hand.prototype.applyPowerOfMoney = function(money_power){
var money_power = new Point(money_power.x/this.mass, money_power.y/this.mass);
this.acceleration = this.acceleration.add(money_power);
}
Hand.prototype.update = function(money,delta){
this.velocity = this.velocity.add(this.acceleration);
if(magnitude(this.velocity) > this.limit)
{
this.velocity = this.velocity.normalize();
this.velocity = this.velocity.multiply(this.limit);
}
this.position = this.position.add(this.velocity);
this.position = this.position.add(new Point(random(.2, 1), random(.2, 1)));
this.acceleration = this.acceleration.multiply(0);
this.image = this.position.x < money.x ? this.image = left_hand : this.image = right_hand;
var deltaX = this.position.x - money.x;
var deltaY = this.position.y - money.y;
var angleDegrees = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
angleDegrees = this.position.x < money.x ? angleDegrees - 180 : angleDegrees;
this.rotate(-this.angle);
this.angle = angleDegrees;
this.rotate(this.angle);
}
Money = Point;
Money.prototype.mass = 40;
Money.prototype.getItNow = function(hand){
var force = new Point(this.x,this.y);
force = force.subtract(hand.position);
var distance = magnitude(force);
distance = scale(distance,10,20);
force = force.normalize();
var strength = (2 * this.mass * hand.mass) / (distance * distance);
force = force.multiply(strength);
return force;
}
paper.setup(canvas);
var money = new Money(canvas.width*.5,canvas.height*.5);
document.onmousemove = function(e){
money.x = e.pageX;
money.y = e.pageY;
moneySign.style.top = money.y - 30 + 'px';
moneySign.style.left = money.x - 5 + 'px';
}
left_hand.onload = function(){
for(var i = 0; i < 50; i++){
var hand = new Hand(left_hand);
hand.position = new Point(Math.random()*canvas.width,Math.random()*canvas.height);
hand.scale(random(.3,.8));
hand.limit = random(5,6);
hand.mass = random(10,12);
}
view.onFrame = function(event) {
var hands = project.activeLayer.children;
for(var j = 0; j < hands.length; j++){
hands[j].update(money,event.delta);
var money_power = money.getItNow(hands[j]);
hands[j].applyPowerOfMoney(money_power);
}
}
}
random = function(a,b){
return Math.random() * (b - a) + a;
}
magnitude = function(vector){
return Math.sqrt(vector.x * vector.x + vector.y * vector.y);
}
scale = function(value,min,max){
if(value < min){
value = min;
}
if(value > max){
value = max;
}
return value;
}
}
