Fire JS Bin - Spacedebris - 2

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

z

Find

⟲

Replace

⊗ All Replace

var canvas;
var canvasWidth;
var canvasHeight;
var canvasLocation;
var mouseLocation;
var game;
var time;
var shapeNum = 0;
var rotate = 127;
var pressed = true;
var img = new Image();
var bulge = new Image();
bulge.src = '/assets/spacedebris/bulge.png';

function Shape() {
  col = shapeNum++;
  col = ((31 * shapeNum) % 255);
  this.color = 'rgb(' + col + ',' + col + ',' + col + ')';
  this.size = {
    x: 20,
    y: 20
  };
  this.type = 'box';
  this.location = {
    x: 0,
    y: 0
  };
  this.speed = {
    x: 0,
    y: 0
  };
  this.friction = {
    x: 0.01,
    y: 0.1
  };
  this.rotate = 1 + (Math.random() * 127);
  this.rotateD = Math.random() / 10;
}
Shape.prototype.size = {
  x: 10,
  y: 10
};
Shape.prototype.type = 'box';
Shape.prototype.location = {
  x: 0,
  y: 0
};
Shape.prototype.speed = {
  x: 0,
  y: 0
};
Shape.prototype.friction = {
  x: 0.06,
  y: 0.06
};
Shape.prototype.paint = function (ctx) {
  if (this.type == 'box') {
    ctx.save();
    ctx.fillStyle = this.color;
    ctx.translate(this.location.x, this.location.y);
    ctx.rotate(this.rotate);
    ctx.drawImage(bulge, 0, 0, this.size.x, this.size.y);
    ctx.restore();
  }
}
Shape.prototype.setLocation = function (x, y) {
  this.location.x = x;
  this.location.y = y;
}
Shape.prototype.accelerate = function (x, y) {
  this.speed.x += x;
  this.speed.y += y;
}
Shape.prototype.animate = function () {
  if (this.speed.x != 0 || this.speed.y != 0) {
    this.location.x += this.speed.x;
    this.location.y += this.speed.y;
    if (this.location.x > canvasWidth + 50) {
      this.location.x = 0;
    }
    if (this.location.x < -50) {
      this.location.x = canvasWidth;
    }
    if (this.location.y > canvasHeight) {
      this.location.y = -50;
    }
    if (this.location.y < -50) {
      this.location.y = canvasHeight;
    }
  }
  if (Math.abs(this.speed.x) > 0.5) {
    this.speed.x -= this.friction.x;
    if (this.speed.x < 0.5) this.speed.x = 0;
  }
  if (Math.abs(this.speed.y) > 0.5) {
    this.speed.y -= this.friction.y;
    if (this.speed.y < 0.5) this.speed.y = 0;
  }
  if (this.rotate < 1 || this.rotate > 359) {
    this.rotateD = -this.rotateD;
  }
  this.rotate += this.rotateD;
  this.size.x = (this.speed.x * this.speed.y + this.rotate) % 40;
  this.size.y = (this.speed.x * this.speed.y + this.rotate) % 200;
}

function Game() {
  this.color = 240;
  this.colorD = 2.5;
  var w = canvasWidth / 2;
  var h = canvasHeight / 2;
  var i = 0;
  for (y = 0; y < canvasHeight; y += 20) {
    for (x = 0; x < canvasWidth; x += 20) {
      this.boxes[i] = new Shape();
      this.boxes[i].setLocation(x, y);
      i++;
    }
  }
}
Game.prototype.boxes = new Array();
Game.prototype.color = 0;
Game.prototype.color2 = 240;
Game.prototype.colorD = 0;
Game.prototype.paint = function () {
  var ctx = canvas.getContext('2d');
  var c = Math.round(this.color);
  this.color2 = 512 - this.color;
  var width = Math.round((canvasWidth) * (this.color / 512.0) * Math.sin(this.color2 / 3.14 / 180));
  var height = Math.round((canvasHeight) * (this.color / 512.0));
  ctx.save();
  ctx.globalAlpha = 0.5;
  ctx.drawImage(img, -width, -height, canvasWidth + width + height, canvasHeight + height + width);
  ctx.globalAlpha = 1.5;
  ctx.rotate(1.0 * (this.color2 / 512.0));
  ctx.drawImage(img, -canvasWidth * 1.5, -canvasHeight * 1.5, canvasWidth * 4, canvasHeight * 4);
  ctx.restore();
  ctx.globalAlpha = 0.25;
  ctx.save();
  for (i = 0; i < this.boxes.length / 6; i++) {
    this.boxes[i].animate();
    this.boxes[i].paint(ctx);
  }
  for (i = this.boxes.length / 6; i < (this.boxes.length / 6 * 2); i++) {
    this.boxes[i].animate();
    this.boxes[i].animate();
    this.boxes[i].paint(ctx);
  }
  ctx.restore();
};
Game.prototype.init = function () {};
Game.prototype.animate = function () {
  var i = 0;
  for (y = 0; y < canvasHeight; y += 20) {
    for (x = 0; x < canvasWidth; x += 20) {
      var d = Math.random();
      if (d > 0.5) {
        d = -Math.random();
      } else {
        d = Math.random();
      }
      this.boxes[i].accelerate(d, Math.random() / 20.0);
      i++;
    }
  }
  if (pressed) {
    var i = 0;
    for (y = 0; y < canvasHeight; y += 20) {
      for (x = 0; x < canvasWidth; x += 20) {
        var xd;
        var yd;
        if (this.boxes[i].location.x > mouseLocation.x) {
          xd = (mouseLocation.x - this.boxes[i].location.x) / 20.0;
        } else {
          xd = (this.boxes[i].location.x - mouseLocation.x) / 20.0;
        }
        if (this.boxes[i].location.y > mouseLocation.y) {
          yd = (mouseLocation.y - this.boxes[i].location.y) / 20.0;
        } else {
          yd = (this.boxes[i].location.y - mouseLocation.y) / 20.0;
        }
        if (xd > 5) xd = 5;
        if (xd < -5) xd - 5;
        if (yd > 5) yd = 5;
        if (yd < -5) yd - 5;
        this.boxes[i].accelerate(xd, yd);
        i++;
      }
    }
  }
  this.color += this.colorD;
  if (this.color < 5 || this.color > 510) {
    this.colorD = -this.colorD;
  }
};

function findPosition(obj) {
  var left = 0;
  var top = 0;
  if (obj.offsetParent) {
    while (obj) {
      left += obj.offsetLeft;
      top += obj.offsetTop;
      obj = obj.offsetParent;
    }
  }
  return {
    x: left,
    y: top
  };
}

function toLocal(e) {
  var pos = {
    x: e.clientX,
    y: e.clientY
  };
  pos.x = pos.x - canvasLocation.x;
  pos.y = pos.y - canvasLocation.y;
  return pos;
}

function mouseDown(e) {
  mouseLocation = toLocal(e);
  pressed = true;
}

function mouseMove(e) {
  mouseLocation = toLocal(e);
}

function mouseUp(e) {
  pressed = false;
  mouseLocation = toLocal(e);
}
var last;

function animate() {
  game.animate();
  game.paint();
}

function start() {
  canvas = document.getElementById('canvas');
  canvasWidth = parseInt(canvas.getAttribute("width"));
  canvasHeight = parseInt(canvas.getAttribute("height"));
  canvasLocation = findPosition(canvas);
  game = new Game();
  game.init();
  canvas.addEventListener("mousedown", mouseDown, false);
  canvas.addEventListener("mouseup", mouseUp, false);
  lirppa();
  window.setInterval("animate();", 80);
  for (i = 0; i < 2000; i++) game.animate();
}

function lirppa() {
  var x = Math.round(Math.random() * canvasWidth);
  var y = Math.round(Math.random() * canvasHeight);
  mouseMove({
    clientX: canvasLocation.x + x,
    clientY: canvasLocation.y + y
  });
  mouseMove({
    clientX: canvasLocation.x + canvasWidth - x,
    clientY: canvasLocation.y + canvasHeight - y
  });
  setTimeout("lirppa();", 1000 + Math.round(Math.random() * 10000));
}
$(document).ready(function () {
  img.onload = function () {
    start();
  }
  img.src = '/assets/spacedebris/nasty2.png';
});

<html><head>
  <title>Spacedebris</title> 
   
  <script type="application/x-javascript" src="/js/vendor/json2.js"></script>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head><body> 
 
<p style="text-align:center; color: #000;"> 
<a href="http://www.xn--ehk-sla.fi/webme/">me</a> - <a href="/waves">waves</a> - <a href="http://www.xn--ehk-sla.fi/comics/">Crappy comic strip maker =)</a> - <a href="/draw">Draw something... with code</a> - <a href="/debris">Another take on this javascript</a> - <a href="http://www.xn--ehk-sla.fi:8080/shoutbox">Shoutbox written in Go</a> - <a href="/shoutbox.go">And its source</a> 
</p> 
 
<div id="game"><canvas id="canvas" width="640" height="480"></canvas> 
 
<br/> 
(c)  Roope Kangas 
<p> 
  <a href="http://www.chromeexperiments.com/detail/rotten/"><img border=0 src="/attach/badge.png" alt="See my Experiment on ChromeExperiments.com" /></a> 
</p> 
</div></body></html>