Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tunnel of squares
#1
Ejemplo de entrada para Visualizar: Un concurso en línea Wingify-JSFoo.

Lea más sobre esto aquí: http://engineering.wingify.com/posts/jsfoo-run-up-event

html

Código:
<canvas id="c"></canvas>

css

Código:
body {
    background: #EEE;
}

js:

Código:
/*
Sample entry for Visualize: A Wingify-JSFoo online competition

Author: Kushagra Gour (@chinchang457)
*/

var PI_BY_180 = Math.PI / 180
    canvas = null,
    ctx = null,
    num_particles = 500,
    display_list = [],
    last_time = null,
    spring_constant = 0.2,
    damping_constant = 0.08,
    colors = ['#0066CC'],
    W = window.innerWidth,
    H = window.innerHeight,
    cx = W / 2,
    cy = H / 2,
    time = 1;



window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 1000 / 60);
    };
  })();


  function init(e) {
    var i, j, _i, _ref, _results;
    canvas = document.getElementById('c');
    ctx = canvas.getContext('2d');
    canvas.width = W;
    canvas.height = H;
    canvas.addEventListener('mousemove', onMouseMove);
    _results = [];
    for (i = _i = 10, _ref = W / 2; _i < _ref; i = _i += 10) {
      _results.push((function() {
        var _j, _results1;
        _results1 = [];
        for (j = _j = 0; _j < 10; j = ++_j) {
          _results1.push(display_list.push(new Particle(i)));
        }
        return _results1;
      })());
    }
    return _results;
  };

  function onMouseMove(e) {
    var mx, my;
    mx = e.offsetX || e.pageX;
    my = e.offsetY || e.pageY;
    return time = mx / W;
  };

  function animate() {
    animationLoop();
    return requestAnimFrame(animate);
  };

  function animationLoop() {
    var current_time, dt;
    if (!last_time) {
      last_time = (new Date).getTime();
    }
    current_time = (new Date).getTime();
    dt = (current_time - last_time) / 1000;
    last_time = current_time;
    window.fps = 1 / dt;
    draw();
    return update();
  };

  function draw() {
    var child, _i, _len, _results;
    ctx.fillStyle = "#111";
    ctx.fillRect(0, 0, W, H);
    _results = [];
    for (_i = 0, _len = display_list.length; _i < _len; _i++) {
      child = display_list[_i];
      if (typeof child.draw !== 'function') {
        continue;
      }
      ctx.save();
      if (!isNaN(child.x || isNaN(child.y))) {
        ctx.translate(child.x, child.y);
      }
      if (!isNaN(child.scale_x || isNaN(child.scale_y))) {
        ctx.scale(child.scale_x, child.scale_y);
      }
      if (!isNaN(child.alpha)) {
        ctx.globalAlpha = child.alpha;
      }
      child.draw();
      _results.push(ctx.restore());
    }
    return _results;
  };

  function update() {
    var child, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = display_list.length; _i < _len; _i++) {
      child = display_list[_i];
      if (typeof child.update === 'function') {
        _results.push(child.update());
      } else {
        _results.push(void 0);
      }
    }
    return _results;
  };

  Particle = (function() {
    function Particle(size) {
      this.size = size != null ? size : 1;
      this.theta = ~~(Math.random() * 360);
      this.speed_theta = 0.5 + Math.random() * this.size * 0.005;
      this.alpha = this.size / (W / 2);
      if (Math.random() > 0.5) {
        this.dir = 1;
      } else {
        this.dir = -1;
      }
      this.color = colors[0];
      this.scale_x = this.scale_y = 0.5;
    }

    Particle.prototype.draw = function() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.rect(0, 0, this.size * 0.04, this.size * 0.04);
      return ctx.fill();
    };

    Particle.prototype.update = function() {
      this.scale_x += this.dir * 0.06 * time;
      this.scale_y += this.dir * 0.06 * time;
      this.theta += this.speed_theta * time;
      this.x = cx + this.size * Math.cos(this.theta * PI_BY_180);
      this.y = cy + this.size * Math.sin(this.theta * PI_BY_180);
      if (this.scale_x > 1.5) {
        this.scale_x = 1.5;
        return this.dir = -1;
      } else if (this.scale_x < 0) {
        this.scale_x = 0;
        return this.dir = 1;
      }
    };

    Particle.prototype.reset = function() {
      this.dir *= -1;
      this.scale_x = this.scale_y = 0.5;
      return this.color = colors[~~(Math.random() * colors.length)];
    };

    Particle.prototype.reposition = function() {
      this.ox = this.x = ~~(Math.random() * W);
      return this.oy = this.y = 100 + ~~(Math.random() * 5);
    };

    return Particle;

  })();

  init();

  animate();

demo: http://cssdeck.com/labs/tunnel-of-squares
WWW




Usuarios navegando en este tema: 1 invitado(s)