World Testing

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/cf.drawing.world/2/cf.drawing.world.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/cf.drawing.world/2/actors/cf.drawing.world.actors.SnotActor.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/cf.drawing.world/2/actors/cf.drawing.world.actors.ImageActor.js"></script>
<canvas id="c"></canvas>

CSS

#c {
  width: 100%;
  height: 100%;
}

JavaScript

_startedat = new Date();

	var waitImages = function(o)
	{
		var a = o.chain;
		var images = {};
		var c = 0;
		
		$.each(a,
			function()
			{
				var f_inc = function() 
				{ 						
					// Set timeout is required for IE11
					setTimeout(
						function()
						{
							c++; 
													
							if(c >= a.length && o.done) 
								o.done(images);
						}, 0
					);
				};
				
				images[this] = new Image();
				images[this].onload = f_inc;
				images[this].onerror = f_inc;
				images[this].src = this;
			}
		);
	};
  
waitImages({ chain: ['/img/logo.png'], done:
function(images) {
var img = images['/img/logo.png'];
var world = new cFront.Drawing.World(document.getElementById('c'), {
			autoRun: true,
			// Called by the world on every frame
			onDrawing:
				function(frame, t)
				{
					if(((new Date() - _startedat) / 1000) > 6)
					{
						if(world.getActorCount() == world.getExpiredActorCount())
							world.end();
					}
					// Add more drips using the frame number as a time-based randomish probability
					else if(frame % Math.round(10 + (Math.random() * 60)) == 0)
					{
          	console.log(img);
						world.addActor(new cFront.Drawing.ImageActor({
							x: Math.random() * this.width(),
							//size: Math.random() * 5,
              img: img
						}));
					}
				}
		});
}});