"

From 2014.igem.org

Revision as of 16:46, 18 August 2014 (view source) Arthurgiroux (Talk | contribs) ← Older edit		Revision as of 11:00, 21 August 2014 (view source) Arthurgiroux (Talk | contribs) Newer edit →
Line 52:		Line 52:
	});		});
		+	var SCREEN_WIDTH = 388;
		+	var SCREEN_HEIGHT = 220;
		+
		+	var MAX_SCREEN_WIDTH = 388;
		+	var MAX_SCREEN_HEIGHT = 220;
		+
		+	var MAX_IMG_WIDTH = 1129;
		+	var MAX_IMG_HEIGHT = 427;
		+
		+	var canvas;
		+	var context;
		+	var particle;
		+	var img;
		+
		+	var mouseX = (window.innerWidth - SCREEN_WIDTH);
		+	var mouseY = (window.innerHeight - SCREEN_HEIGHT);
		+
		+	init();
		+
		+	function init() {
		+
		+	canvas = document.getElementById('biopad');
		+
		+	img = document.getElementById('slide1');
		+
		+	if (canvas && canvas.getContext) {
		+	context = canvas.getContext('2d');
		+
		+	// Register event listeners
		+	canvas.addEventListener('mousemove', documentMouseMoveHandler, false);
		+	canvas.addEventListener('touchstart', canvasTouchStartHandler, false);
		+	canvas.addEventListener('touchmove', canvasTouchMoveHandler, false);
		+	window.addEventListener('resize', windowResizeHandler, false);
		+
		+	createParticles();
		+
		+	windowResizeHandler();
		+
		+	setInterval( loop, 1000 / 60 );
		+	}
		+	}
		+
		+	function createParticles() {
		+	particle = {
		+	position: { x: mouseX, y: mouseY },
		+	size: 5,
		+	speed: 0.05,
		+	targetSize: 3,
		+	fillColor: '#ffff66',
		+	};
		+
		+	}
		+
		+	function documentMouseMoveHandler(event) {
		+
		+	pos = canvas.getBoundingClientRect();
		+	mouseX = event.clientX - pos.left;
		+	mouseY = event.clientY - pos.top;
		+
		+	// fix mouse Y
		+	}
		+
		+
		+	function canvasTouchStartHandler(event) {
		+	if(event.touches.length == 1) {
		+
		+	pos = canvas.getBoundingClientRect();
		+	mouseX = event.touches[0].pageX - pos.left;
		+	mouseY = event.touches[0].pageY - pos.top;
		+
		+	event.preventDefault();
		+
		+	}
		+	}
		+
		+	function canvasTouchMoveHandler(event) {
		+	if(event.touches.length == 1) {
		+
		+	pos = canvas.getBoundingClientRect();
		+	event.preventDefault();
		+
		+	mouseX = event.touches[0].pageX - pos.left;
		+	mouseY = event.touches[0].pageY - pos.top;
		+	}
		+	}
		+
		+
		+	function windowResizeHandler() {
		+
		+	imgPos = img.getBoundingClientRect();
		+
		+	ratioW = imgPos.width / MAX_IMG_WIDTH;
		+	ratioH = imgPos.height / MAX_IMG_HEIGHT;
		+
		+	SCREEN_WIDTH = parseInt(MAX_SCREEN_WIDTH * ratioW);
		+	SCREEN_HEIGHT = parseInt(MAX_SCREEN_HEIGHT * ratioH);
		+
		+	canvas.width = SCREEN_WIDTH;
		+	canvas.height = SCREEN_HEIGHT;
		+
		+
		+	canvas.style.position = 'absolute';
		+	canvas.style.left = parseInt((imgPos.right - canvas.width) - 48 * ratioW) + 'px';
		+	canvas.style.top = parseInt(90 * ratioH) + 'px';
		+	}
		+
		+	function loop() {
		+
		+	// Fade out the lines slowly by drawing a rectangle over the entire canvas
		+	context.fillStyle = 'rgba(203,225,229,0.2)';
		+	//context.fillStyle = 'rgba(0,0,0,0.05)';
		+	context.fillRect(0, 0, context.canvas.width, context.canvas.height);
		+
		+	var lp = { x: particle.position.x, y: particle.position.y };
		+
		+	// Apply position
		+	particle.position.x = mouseX;
		+	particle.position.y = mouseY;
		+
		+	// Limit to screen bounds
		+	particle.position.x = Math.max( Math.min( particle.position.x, SCREEN_WIDTH ), 0 );
		+	particle.position.y = Math.max( Math.min( particle.position.y, SCREEN_HEIGHT ), 0 );
		+
		+
		+	context.beginPath();
		+	context.fillStyle = particle.fillColor;
		+	context.strokeStyle = particle.fillColor;
		+	context.lineWidth = particle.size;
		+	context.moveTo(lp.x, lp.y);
		+	context.lineTo(particle.position.x, particle.position.y);
		+	context.stroke();
		+	context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
		+	context.fill();
		+
		+	}
	});		});

---

Revision as of 11:00, 21 August 2014