Overcome your weaknesses through the HTML5 Coding Assessment Test! Surpass your rivals starting next school term!

or

SPEC 審査結果発表!

Branching

Follow

2010-06-20 02:29:55

License: MIT License

Fork: 0

Fav: 12

View: 1411

Play
Stop
Reload

Smart Phone

Readme
JavaScript 94 lines
HTML 2 lines
CSS 20 lines

Branching

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    
    container, canvas, context,
    
    branches, mouseX, mouseY,
    
    Branch = function(x, y, max_life) {
      
      this.life = 0;
      this.max_life = max_life;
      this.speed = Math.random() + 2;
      this.x = x;
      this.y = y;
      this.rw = Math.random() * 360;
      
    };

init();
setInterval(loop, 1000/60);

function init() {
  
  container = document.getElementById('container');
  
  canvas = document.createElement("canvas");
  canvas.width = SCREEN_WIDTH;
  canvas.height = SCREEN_HEIGHT;
  container.appendChild(canvas);
  
  context = canvas.getContext("2d");
  context.fillStyle = "rgb(0, 0, 0, 0.1)";
  context.fillRect (0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  
  branches = [];
  branches.push( new Branch( SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, 1000 ) );
  
  window.addEventListener('mousedown', onWindowMouseDown, false);
}

function onWindowMouseDown(event) {
  
  event.preventDefault();
  
  mouseX = event.clientX;
  mouseY = event.clientY;
  
  branches.push(new Branch(mouseX, mouseY, 1000));
}

function loop() {
  
  var s = -2, pi2 = Math.PI * 2;
  
  context.drawImage( canvas, -s, -s, SCREEN_WIDTH + 2 * s, SCREEN_HEIGHT + 2 * s );
  
  context.fillStyle = "rgba(0, 25, 25, 0.05)";
  context.fillRect (0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  
  context.fillStyle = "#ff8";
  context.beginPath();
  
  for (var i = 0; i < branches.length; i++) {
    
    var branch = branches[i],
        speed = branch.speed,
        life = branch.life += 1,
        max_life = branch.max_life,
        rw = branch.rw += Math.random() - 0.5,
        x = branch.x += Math.cos(rw) * speed,
        y = branch.y += Math.sin(rw) * speed;
    
    context.moveTo(x, y);
    context.arc(x, y, 5, 0, pi2, true); 
    
    if (life > max_life || x < 0 || y < 0 || x > SCREEN_WIDTH || y > SCREEN_HEIGHT) {
      
      branches.splice(i,1);
      
    }
    
    if (Math.random() > 0.9 && branches.length < 1000) {
      
      branches.push(new Branch(x, y, max_life / 10));
      
    }
  }
  
  context.fill();
  context.closePath();

}

Branching

var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, container, canvas, context, branches, mouseX, mouseY, Branch = function(x, y, max_life) { this.life = 0; this.max_life = max_life; this.speed = Math.random() + 2; this.x = x; this.y = y; this.rw = Math.random() * 360; }; init(); setInterval(loop, 1000/60); function init() { container = document.getElementById('container'); canvas = document.createElement("canvas"); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; container.appendChild(canvas); context = canvas.getContext("2d"); context.fillStyle = "rgb(0, 0, 0, 0.1)"; context.fillRect (0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); branches = []; branches.push( new Branch( SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, 1000 ) ); window.addEventListener('mousedown', onWindowMouseDown, false); } function onWindowMouseDown(event) { event.preventDefault(); mouseX = event.clientX; mouseY = event.clientY; branches.push(new Branch(mouseX, mouseY, 1000)); } function loop() { var s = -2, pi2 = Math.PI * 2; context.drawImage( canvas, -s, -s, SCREEN_WIDTH + 2 * s, SCREEN_HEIGHT + 2 * s ); context.fillStyle = "rgba(0, 25, 25, 0.05)"; context.fillRect (0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); context.fillStyle = "#ff8"; context.beginPath(); for (var i = 0; i < branches.length; i++) { var branch = branches[i], speed = branch.speed, life = branch.life += 1, max_life = branch.max_life, rw = branch.rw += Math.random() - 0.5, x = branch.x += Math.cos(rw) * speed, y = branch.y += Math.sin(rw) * speed; context.moveTo(x, y); context.arc(x, y, 5, 0, pi2, true); if (life > max_life || x < 0 || y < 0 || x > SCREEN_WIDTH || y > SCREEN_HEIGHT) { branches.splice(i,1); } if (Math.random() > 0.9 && branches.length < 1000) { branches.push(new Branch(x, y, max_life / 10)); } } context.fill(); context.closePath(); } <div id="container"></div> <div id="info">click anywhere</div>body { background-color: #000000; margin: 0px; overflow: hidden; } #info { position: absolute; top: 0px; width: 100%; color: #80a000; padding: 5px; font-family:Monospace; font-size:13px; text-align:center; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/nsHk/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/nsHk" title="Branching">Branching - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Tags

Favorite by

cuddlephish

fingaholic

nanlow

tkinjo

paq

clockmaker

9re