Converting an external init function into a polymer one - polymer

Question

I want to create a polymer out of this codrops tutorial
http://tympanus.net/codrops/2013/07/03/interactive-particles-slideshow/
I can create a basic component but the script particlesSlideshow.js does not fire.
I think this is because I need to move its code into the polymer init script but im not sure how to do this.
Here is the script in the file. Any ideas how to move this across to polymer. I suppose I want to know what goes in the init and what can stay in an external file.
var self = window;
;(function(self) {
var canvas,
context,
particles = [],
text = [],
nextText = [],
shape = {},
mouse = { x: -99999, y: -99999 },
currentTransition = 'circle',
left, right,
layout = 0,
type = ['circle', 'ovals', 'drop', 'ribbon'],
FPS = 60,
/*
* List words.
*/
words = [ 'circle', 'ovals', 'drop', 'ribbon' ],
/*
* List colors.
*/
colors = {
circle: [ '#e67e22', '#2c3e50' ],
ovals: [ '#c0392b', '#ff7e15' ],
drop: [ '#1d75cf', '#3a5945' ],
ribbon: [ '#702744', '#f98d00' ]
};
/*
* Init.
*/
function init() {
console.log(document.querySelector('.ip-slideshow').length);
console.log(shadow.querySelector('.ip-slideshow').length);
var slideshowContainer = document.querySelector('.ip-slideshow');
canvas = document.createElement('canvas');
canvas.width = innerWidth;
canvas.height = 500;
slideshowContainer.appendChild(canvas);
// Browser supports canvas?
if(!!(capable)) {
context = canvas.getContext('2d');
// Events
if('ontouchmove' in window) {
canvas.addEventListener('touchup', onTouchUp, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
else {
canvas.addEventListener('mousemove', onMouseMove, false);
}
// Arrows
handleClick('bind', 'left');
handleClick('bind', 'right');
window.onresize = onResize;
createParticles();
// Arrows elements
left = document.querySelector('.ip-nav-left');
right = document.querySelector('.ip-nav-right');
// Show right arrow
right.classList.add('ip-nav-show');
}
else {
console.error('Sorry, switch to a better browser to see this experiment.');
}
}
/*
* Checks if browser supports canvas element.
*/
function capable() {
return canvas.getContext && canvas.getContext('2d');
}
/*
* On resize window event.
*/
function onResize() {
canvas.width = window.innerWidth;
canvas.height = 500;
// Reset the text particles, and align again on the center of screen
nextText = [];
updateText();
}
function scrollX() {
return window.pageXOffset || window.document.documentElement.scrollLeft;
}
......
/*
* Request new frame by Paul Irish.
* 60 FPS.
*/
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / FPS);
};
})();
window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;
})(self);

Answer 1

If you change the script such that instead of
window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;
you did something like
self.initParticlesSlideshow = init;
Then you could invoke it in the domReady of an element like this:
Polymer('my-element', {
domReady: function() {
initParticlesSlideshow();
}
});
There are many other ways to do this, and a lot of other details; I'm just trying to get you started. =P