|
|
| 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();
| |
| - |
| |
| - | }
| |
| | }); | | }); |
| | | | |
"
