Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Last active Dec 17, 2015
Embed
What would you like to do?
wanna bounce
{"description":"wanna bounce","endpoint":"","display":"svg","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":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,"thumbnail":"http://i.imgur.com/rET4CdA.gif","ajax-caching":true}
var numOfStairs = 8;
var stairDim = {height: 50, width: 101};
var startPoint = {x: 279, y: 110};
var stairGrowth = 24;
var ballSize = {begin: 5, end: 19};
var colors = [{r: 255, g: 0, b: 0},//r
{r: 255, g: 128, b: 0},//o
{r: 255, g: 255, b: 0},//y
{r: 0, g: 255, b: 0},//g
{r: 0, g: 0, b: 255},//b
{r: 255, g: 0, b: 255}//v
];
var svg = d3.selectAll('svg');
var stairs = d3.range(numOfStairs);
//tributary.init(function(){
//draw stairs
svg.selectAll('rect')
.data(stairs)
.enter()
.append('rect')
.attr({
x: function(d,i){return startPoint.x - (i*(stairGrowth/2));},
y: function(d,i){return startPoint.y + (stairDim.height * i);},
height: stairDim.height,
width: function(d,i){return stairDim.width + (i*stairGrowth) },
fill: function(d,i){var stairColor = i * Math.floor(255/(numOfStairs-1)); return 'rgb(' + stairColor + ',' + stairColor + ',' + stairColor + ')';}
});
//});
//constant fall values
var fallScaleSpeed = d3.scale.linear().domain([0, numOfStairs])
.range([200, 500]);
var fallScaleSize = d3.scale.linear().domain([0, numOfStairs])
.range([ballSize.begin, ballSize.end]);
tributary.run = function(g, t){
// console.log(t.toString())
if (t ===0){
var positionOff= Math.floor(Math.random() * 100) - 50;
var color = colors[Math.floor(Math.random() * colors.length)];
var fallScaleColor = d3.scale.linear().domain([0, numOfStairs])
.range([colorStr(color, 150), colorStr(color, 0)]);
addCircle(positionOff, fallScaleSpeed, fallScaleColor,fallScaleSize);
}
}
function colorStr (color, offset){
return 'rgb(' + (color.r-offset < 0 ? 0 : color.r-offset) + ', ' +
(color.g-offset < 0 ? 0 : color.g-offset) + ',' +
(color.b-offset < 0 ? 0 : color.b-offset) + ')';
}
function addCircle(positionMod, fallScaleSpeed, fallScaleColor, fallScaleSize){
var bounceCircle = svg.append('circle')
.attr({
cx: startPoint.x + (stairDim.width/2) + positionMod,
cy: startPoint.y - 20,
r: ballSize.begin,
fill:fallScaleColor(0),
'fill-opacity': 1
});
var prev = bounceCircle.transition()
.duration(fallScaleSpeed(0))
.ease('exp')
.attr({
cx: startPoint.x + (stairDim.width/2) + positionMod,
cy: startPoint.y,
fill: fallScaleColor(0),
'fill-opacity': 1
});
for (var i = 1; i <= numOfStairs-1; i++){
prev = funcTrans(prev, i, fallScaleSpeed, fallScaleColor, positionMod);
}
prev.transition()
.duration(1000)
.ease('exp')
.attr({
cx: startPoint.x + (stairDim.width/2) + positionMod,
cy : tributary.sh,
'fill-opacity': 0
}).remove();
}
function funcTrans(prev, i, fallScaleSpeed, fallScaleColor, positionMod){
prev = prev.transition()
.duration(fallScaleSpeed(i))
.ease('exp')
.attr({
cx: startPoint.x + (stairDim.width/2) + positionMod,
cy: startPoint.y + (i * stairDim.height) - fallScaleSize(i),
r: fallScaleSize(i),
fill: fallScaleColor(i)
})
.transition()
.duration(60)
.ease('linear')
.attr({
cy: startPoint.y + (i * stairDim.height) - (i * 5) - 5
});
return prev;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.