Fire JS Bin - Bakemono

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

mouseX = event.touches[0].pageX - (window.innerWidth - worldRect.width) * .5;
      mouseY = event.touches[0].pageY - (window.innerHeight - worldRect.height) * .5;
    }
  }
  
  function documentTouchEndHandler(event) {
    mouseIsDown = false;
    
    stopDragging();
  }
  
  function windowResizeHandler() {
    worldRect.width = window.innerWidth;
    worldRect.height = window.innerHeight;
    
    canvas.width = worldRect.width;
    canvas.height = worldRect.height;
    
    canvas.style.position = 'absolute';
    canvas.style.left = (window.innerWidth - canvas.width) * .5 + 'px';
    canvas.style.top = (window.innerHeight - canvas.height) * .5 + 'px';
  }
  
  // Convenience method called from many mouse event handles to update the current mouse position
  function updateMousePosition(event) {
    mouseX = event.clientX - (window.innerWidth - worldRect.width) * .5;
    mouseY = event.clientY - (window.innerHeight - worldRect.height) * .5;
  }
  
  function startDragging() {
    var closestDistance = 9999;
    var currentDistance = 9999;
    var closestIndex = -1;
    
    for( var i = 0, len = monsters.length; i < len; i++ ) {
      var monster = monsters[i];
      
      currentDistance = monster.distanceTo( { x: mouseX, y: mouseY } );
      
      if( currentDistance < closestDistance ) {
        closestDistance = currentDistance;
        closestIndex = i;
      }
    }
    
    if( monsters[closestIndex] ) {
      monsters[closestIndex].dragging = true;
    }
  }
  
  function stopDragging() {
    for (var i = 0, len = monsters.length; i < len; i++) {
      if( monsters[i].dragging == true ) {
        monsters[i].dragging = false;
        monsters[i].dropPosition = { x: mouseX, y: mouseY };
      }
    }
  }
  
  function createMonster( x, y ) {
    var monster = new Monster( !isMobile );
    
    monster.position.x = x;
    monster.position.y = y;
    
    monster.dropPosition.x = x;
    monster.dropPosition.y = y;
    
    monster.alh.x = x;
    monster.alh.y = y;
    
    monster.arh.x = x;
    monster.arh.y = y;
    
    monsters.push( monster );
  }
  
  function createFood( x, y ) {
    var food = new Food();
    
    food.position.x = x;
    food.position.y = y;
    
    nutritiens.push( food );
  }

/**
 * 
 */
function Point() {
  this.position = { x: 0, y: 0 };
}
Point.prototype.distanceTo = function(p) {
  var dx = p.x-this.position.x;
  var dy = p.y-this.position.y;
  return Math.sqrt(dx*dx + dy*dy);
};
Point.prototype.clonePosition = function() {
  return { x: this.position.x, y: this.position.y };
};

/**
 * 
 */
function Region() {
  this.left = 999999; 
  this.top = 999999; 
  this.right = 0; 
  this.bottom = 0;
}
Region.prototype.reset = function() {
  this.left = 999999; 
  this.top = 999999; 
  this.right = 0; 
  this.bottom = 0; 
};
Region.prototype.inflate = function( x, y ) {
  this.left = Math.min(this.left, x);
  this.top = Math.min(this.top, y);
  this.right = Math.max(this.right, x);
  this.bottom = Math.max(this.bottom, y);
};

/**
 * 
 */
function Monster( useParticles ) {
  this.position = { x: 0, y: 0 };
  this.dropPosition = { x: 0, y: 0 };
  
  this.radius = 60;
  
  this.rotation = { current: 0, target: 0 };
  
  this.bodyPoints = [];
  this.bodyParticles = [];
  
  this.dragging = false;
  this.blinking = false;
  
  this.lastBlink = 0;
  this.lastChew = 0;
  
  this.eyeExposure = { current: 0, target: 1 };
  this.mouthExposure = { current: 0, target: 1 };
  
  this.irisRadius = this.radius * 0.25;
  this.pupilHeight = this.irisRadius * 1.2;
  this.pupilWidth = 4;
  
  // Arm left/right hand positions
  this.alh = { x: 0, y: 0 };
  this.arh = { x: 0, y: 0 };
  
  this.createBodyPoints();
  
  // Only create the body particles if flagged
  if( useParticles ) {
    this.createBodyParticles();
  }
}
Monster.prototype = new Point();
Monster.prototype.createBodyPoints = function() {
  
  var q = 12;
  
  for( var i = 0; i < q; i++ ) {
    var p = new BodyPoint();
    
    var angle = (i / q ) * Math.PI * 2;
    var radius = this.radius + ( -2 + Math.random() * 4 );
    
    p.normal.x = Math.cos( angle ) * radius;
    p.normal.y = Math.sin( angle ) * radius;
    
    this.bodyPoints.push( p );
  }
  
};
Monster.prototype.createBodyParticles = function() {
  
  var q = 500;
  
  for( var i = 0; i < q; i++ ) {
    var p = new BodyParticle();
    
    var angle = (i / q ) * Math.PI * 2;
    
    p.normal.x = Math.cos( angle ) * this.radius;
    p.normal.y = Math.sin( angle ) * this.radius;
    
    this.bodyParticles.push( p );
  }
  
};

/**
 * 
 */
function BodyPoint() {
  this.position = { x: 0, y: 0 };
  this.normal = { x: 0, y: 0 };
}
BodyPoint.prototype = new Point();

/**
 * 
 */
function BodyParticle() {
  this.normal = { x: 0, y: 0 };
  this.size = 1;
  this.rotation = 0;
  this.rotationSpeed = -0.07+Math.random()*0.14;
  this.rotationRadius = Math.random()*6;
}
BodyParticle.prototype = new BodyPoint();

/**
 * 
 */
function Food() {
  this.position = { x: 0, y: 0 };
  this.size = 3 + Math.random()*2;
}
BodyParticle.prototype = new BodyPoint();

MonsterWorld.init();

html { color:#000; background:#222222; }
a { cursor:pointer; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
li { list-style:none; }
caption, th { text-align:left; }
q:before, q:after { content:''; }
abbr, acronym { border:0; font-variant:normal; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; outline-style:none; outline-width:0pt; }
legend { color:#000; }
a:focus, object, h1, h2, h3, h4, h5, h6 { -moz-outline-style:none; border:0px; }
strong { font-weight:bold; }

@font-face {
  font-family:Delicious; font-weight:bold; src:url('../../../assets/fonts/Delicious-Bold.otf');
}
body { overflow:hidden; font-family:Georgia, Helvetica, Arial, sans-serif; color:#333333; font-size:11px; }
a, a:hover { transition:all .08s linear; -o-transition:all .08s linear; -moz-transition:all .08s linear; -webkit-transition:all .08s linear; padding:1px; }
p.noCanvas { color:#999999; font-size:24px; text-align:center; margin-top:150px; }
#panel { position:absolute; margin:5px; padding:5px; z-index:99; background-color:#FFFECF; border:1px solid #e1e0af; }
#panel a { color:#333333; background-color:#FFFECF; text-decoration:underline; }
#panel a:hover { color:#FFFECF; background-color:#333333; }
#panel a.versionLink { padding:1px; text-decoration:underline; }
#panel a.versionLink.selected { color:#888888; text-decoration:none; }
#panel p { padding:0px 5px 5px 5px; line-height:1.6em; }
#panel h2 { font-size:20px; font-weight:bold; font-family:Delicious, Helvetica, sans-serif; padding:5px 5px 5px 5px; }
#chromeBadge { position:absolute; bottom:0; right:0; padding:4px; }
#sharing { background-color:#FFFECF; position:absolute; top:0; right:0; margin:5px; padding:7px 0 4px 10px; z-index:98; border:1px solid #e1e0af; }
#facebook_button { float:left; }
#retweet_button { float:left; }
#flattr_button { float:right; margin: 1px 10px 0 4px; }

body, html { background-color: #dddddd; }
canvas { }

Pop out