boating scene 03

_.md

[ Launch: boating scene 02 ] 5791298 by ptvans
[ Launch: boating scene 02 ] 5790298 by ptvans
[ Launch: boating scene 02 ] 5790225 by enjalot
[ Launch: sin waves ] 5790206 by ptvans

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"boating scene 03","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"scene.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg3 = d3.select("svg");

//loop types pingpong or period
tributary.loop_type = "period";
tributary.duration = 1204;
var bounceY = 10;
var bounceX = 100;
var shirtY = -bounceY
var glasses = 4;
var wavef = 2.5;

tributary.run = function(g,t) {
  
  svg3.select("#text")
    .attr("stroke-width", Math.sin(t * Math.PI * 1.8) + 3 )
  
  svg3.select("#wake")
    .attr("opacity", t)
  
  svg3.select("#wave3")
    .attr("transform", "translate(" + [t * -bounceX * wavef, t * bounceY] + ")")
  
  svg3.select("#wave2")
    .attr("transform", "translate(" + [t * -bounceX * wavef, t * bounceY] + ") ")
  
  svg3.select("#wave1")
      .attr("transform", "translate(" + [t * -bounceX * wavef, t * bounceY] + ")")
  
  svg3.select("#dad")
      .attr("transform", "translate(" + [0, t * bounceY] + ")")
  
  svg3.select("#boat")
      .attr("transform", "rotate(" + [-t * glasses, 569, 222] + ") translate(" + [ 0 , t * 2 * -bounceY] + ")")

  
}

scene.svg