Lissajous

_.md

[ Launch: Lissajous ] 6378631 by slembcke

config.json

{"description":"Lissajous","endpoint":"","display":"canvas","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/hWOPsxV.png"}

inlet.js

var context = tributary.ctx;

context.fillStyle = "black";
context.globalCompositeOperation = "xor";

function circle(x, y, r){
  context.beginPath();
  context.arc(x, y, r, 0, 2.0*Math.PI, false);
  context.fill();
}

tributary.run = function(unused, t){
  var size = 300;
  var offset = 100;
  var radius = 20;
  
  var max = size + offset + radius;
  context.clearRect(0, 0, max, max);
  
  function liss(count, rate, phase, c_rep, s_rep, c_scr, s_scr, length){
    for(var i=0; i<count; i++){
      var alpha = i/count;
      var a = phase + t*rate + length*alpha;
      var x = 0.5*Math.cos(c_rep*a + c_scr*t) + 0.5;
      var y = 0.5*Math.sin(s_rep*a + s_scr*t) + 0.5;
      
      var r_coef = 1 - Math.pow(1 - 2*alpha, 2);
      circle(x*size + offset, y*size + offset, radius*r_coef);
    }
  }
  
  liss(10, 1.0, 0, 2, 3, 0, 0, 0.5);
  liss(10, 1.0, 2.0, 2, 3, 0, 0, 0.5);
  
  liss(15, 0.8, 3.5, 4, 3, 0.5, -0.25, 0.5);
};