EffectHub.com: your best source for gaming

Recommendation

More Effects...

if(window.CP && window.CP.PenTimer) window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;

var SVG = Snap('#svg');
var container = $('.container');
var sizes = {};
sizes.container = {width: 0, height: 0};

var colors = {
	stick: {
		dark : '#4C3E26',
		base : '#755F3B',
		light: '#836A41',
		inside: '#937B55'
	},
	leaf: {
		light: '#46611F',
		base: '#3A5019',
		dark: '#324516'
	}
}

var stickStep = 30;
var drawRight = 0;
var stickThickness = 20;

onResize();

var randomness = [];
var specials = [];
var drawing = [];
var drawPath = SVG.path().attr({
  	fill: "none",
  	stroke: "#ff0000",
  	strokeWidth: 0,
	strokeDasharray: '5 5'
});

var stick = SVG.group();
var stickBack;
var stickFront;
var stickEnd;
var stickBase = stick.path().attr({
  	fill: colors.stick.base,
  	stroke: "#000000",
  	strokeWidth: 0
});

var autoStickSpeed = 30;
var autoStick = [];
var autoStickMarginWidth = sizes.container.width > 1000 ? 300 : 100;
var autoStickMarginHeight = 100;
var count = Math.round((sizes.container.width - (autoStickMarginWidth * 2)) / stickStep)

for(var i = 0; i <count; i++)
{
	if(i == 0) autoStick.push([autoStickMarginWidth , sizes.container.height/2])
	else
	{
		var newY = autoStick[i-1][1] + (Math.random() * 40) - 20;
		if(newY < autoStickMarginHeight) newY = autoStickMarginHeight;
		else if(newY > sizes.container.height - autoStickMarginHeight) newY = sizes.container.height - autoStickMarginHeight
		autoStick.push([autoStickMarginWidth + (i*stickStep),  newY] )
	}
}

drawAutoStick(true)

function startDrawing(e)
{
	drawing = [[e.offsetX, e.offsetY]];
	randomness = [[0, 0, 0, 0]];
	specials = [null];
	if(!e.auto)
	{
		container.on('mousemove', draw);
		container.on('mouseup', stopDrawing);
	}
}

function stopDrawing(e)
{
	container.off('mousemove');
	//container.off('mousedown');
	container.off('mouseup');
}

function drawLine()
{
	var lineStr = '';
	for(var i = 0; i < drawing.length; i++)
	{
		lineStr += drawing[i].join(',') + ' ';
	}
	drawPath.attr('d',"M" + lineStr)
}

function getStickEnd(i, yOffset)
{
	var newString = ''
	var curve = i > 0 ? stickThickness : -stickThickness;
	newString += 'Q' + getStickPathPoint(drawing[i][0] + curve, drawing[i][1], 0, 0, 0) + ' ';
	newString += '' + getStickPathPoint(drawing[i][0], drawing[i][1], yOffset, randomness[i][0], randomness[i][1]).join(',') + ' ';
	return newString;
}

function getStickPathPoint(x, y, yOffset, xRandom, yRandom)
{
	var x = x + (xRandom * 20);
	var y = y + yOffset + (yRandom * 10);
	
	return [x, y];
}

function getLineColor(offset, range)
{
	var range = ((range * 2) / 3) / 2;
	
	if(offset > range || Math.random() < 0.02) return colors.stick.dark;
	if(offset < -range || Math.random() < 0.1) return colors.stick.light;
	return colors.stick.base;
}

function createTwigPaths(x, y)
{
	var paths = [];
	
	var xDirection = (Math.random()  - 0.5) * 20;
	var yDirection = (Math.random()  - 0.5) * 20;
	
	for(var i = 0; i <= 2 + Math.round(Math.random() * 3); i++)
	{
		paths.push([
			x + (i * xDirection + (Math.random() * 10)),
			y + (i * yDirection + (Math.random() * 10))
		]);	
	}
	
	return paths;
}

function createLeafPaths(x, y)
{
	var centerPath = [];
	
	var xDirection = (Math.random()  - 0.5) * 30;
	var yDirection = (Math.random()  - 0.5) * 100;
	
	for(var i = 0; i < 3; i++)
	{
		centerPath.push([
			x + (i * xDirection + (Math.random() * 50)),
			y + (i * yDirection + (Math.random() * 10))
		]);	
	}
	
	return centerPath;
}

function drawSpecials(which, where)
{
	var specialsHolder = where.group();
	
	for(var i = 0; i < specials.length - 1; i++)
	{
		if(specials[i] && which.indexOf(specials[i].type) > -1)
		{
			var data = specials[i].data;
			var type = specials[i].type;
			
			if(data.length > 1)
			{	
				switch(type)
				{
					case 'twig_back':
					case 'twig_front':

console.log(type, data)
							var twigPath = 'M';

for(var j = 0; j < data.length; j++)
							{
								var newX = data[j][0] + ((Math.random() * 4) - 2);
								var newY = data[j][1] + ((Math.random() * 4) - 2);
								twigPath += newX + ',' + newY + ' ';
							}
							specialsHolder.path(twigPath)
								.attr({
									fill: 'none',
									stroke: colors.stick.dark,
									strokeWidth: 6 + Math.random() * 4,
									'stroke-linecap': Math.random() > 0.5 ? "round" : 'square',
								})
								.transform( 't1,5');
							specialsHolder.path(twigPath)
								.attr({
									fill: 'none',
									stroke: Math.random() > 0.5 ? colors.stick.base : colors.stick.light,
									strokeWidth: 6 + Math.random() * 4,
									'stroke-linecap': "round"

})
						
						break;
					case 'knot':
						specialsHolder.ellipse(data[0], data[1], 10, 8)
							.attr({
								fill: colors.stick.inside
							})
						specialsHolder.path('M' + (data[0] - 12) + ',' + data[1] + ' Q' + data[0] + ',' + (data[1] - 8) + ' ' + (data[0] + 12) + ',' + data[1] )
							.attr({
								fill: 'none',
								stroke: colors.stick.dark,
								strokeWidth: 4
							})
						break;
					case 'leaf_front':
					case 'leaf_back':
	
						var leafWidth = 20 + (Math.random() * 30);
						var leafPath = 'M';

for(var j = 0; j < data.length; j++)
						{
							var newX = data[j][0] + ((Math.random() * 4) - 2);
							var newY = data[j][1] + ((Math.random() * 4) - 2);
							leafPath += (j%2 != 0 ? 'Q' : '') +  (j%2 != 0 ? newX + leafWidth : newX) + ',' + newY + ' ';
						}
						specialsHolder.path(leafPath + ' Z')
							.attr({
								fill: colors.leaf.base,
							})
						
						var leafPath = 'M';

for(var j = 0; j < data.length; j++)
						{
							var newX = data[j][0] + ((Math.random() * 4) - 2);
							var newY = data[j][1] + ((Math.random() * 4) - 2);
							leafPath += (j%2 != 0 ? 'Q' : '') +  (j%2 != 0 ? newX - leafWidth : newX) + ',' + newY + ' ';
						}
						specialsHolder.path(leafPath + ' Z')
							.attr({
								fill: colors.leaf.light,
							})
						
						var leafPath = 'M';

for(var j = 0; j < data.length; j++)
						{
							var newX = data[j][0] + ((Math.random() * 4) - 2);
							var newY = data[j][1] + ((Math.random() * 4) - 2);
							leafPath += (j%2 != 0 ? 'Q' : '') +  newX + ',' + newY + ' ';
						}
						specialsHolder.path(leafPath)
							.attr({
								fill: 'none',
								stroke: colors.leaf.dark,
								strokeWidth: 4
							})
						break;
				}
			}
		}
	}
}

// ON RESIZE

$(window).resize(onResize);

function onResize()
{
	sizes.container.width = container.width();
	sizes.container.height = container.height();
	
	SVG.attr({
		width: sizes.container.width,
		height: sizes.container.height
	})	
}

CSS

HTML

Recommendation

Join Effecthub.com