Day 26 - Galactic Light Trails

day-26-galactic-light-trails.markdown

Day 26 - Galactic Light Trails

Stars and planets shine bright in the everlasting darkness of space. Send them into warp speed via a click and hold.

Was supposed to post yesterday as part of my one pen every two day challenge, but wasn't proud of any of my final products. Creating physics simulations is proving to be a bit harder than I initially thought, but no worries, churning away at the trig and physics books throughout the hours.

More to come.

A Pen by Christopher Lis on CodePen.

License.

index.html

<canvas></canvas>

<p>Hold mouse down to enter time warp</p>

<!-- Social -->
<div class="twitter social-icon">
  <a href="https://twitter.com/Christopher4Lis" target="_blank"></a>
  <i class="fa fa-twitter fa-lg"></i>
</div>

<div class="youtube social-icon">
  <a href="https://www.youtube.com/channel/UC9Yp2yz6-pwhQuPlIDV_mjA" target="_blank"></a>
  <i class="fa fa-youtube fa-lg"></i>
</div>

script.js

		var canvas = document.querySelector('canvas');
		var c = canvas.getContext('2d');

		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		var particleCount = 750;
		var mouse = {
			x: window.innerWidth / 2,
			y: window.innerHeight / 2 
		};

		window.addEventListener("mousemove", function(event) {
			mouse.x = event.clientX - canvas.width / 2;
			mouse.y = event.clientY - canvas.height / 2;
		});

		window.addEventListener("resize", function() {
			canvas.width = window.innerWidth;	
			canvas.height = window.innerHeight;

			lightParticles = [];
			initializeParticles();
		});


		function LightParticle(x, y, radius, color) {
			this.x = x;
			this.y = y;
			this.radius = radius;
			this.color = color;

			this.update = function() {

				this.draw();
			};

			this.draw = function() {
				c.save();
				c.beginPath();
				c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);	
				c.shadowColor = this.color;
				c.shadowBlur = 15;
				c.shadowOffsetX = 0;
				c.shadowOffsetY = 0;
				c.fillStyle = this.color;
				c.fill();
				c.closePath();
				c.restore();
			};
		}

		var lightParticles = [];

		var timer = 0;
		var opacity = 1;
		var speed = 0.0005;
		var colors = [
			"#0952BD",
			"#A5BFF0",
			"#118CD6",
			"#1AAEE8",
			"#F2E8C9"
		];

		var initializeParticles;

		(initializeParticles = function() {
			for (var i = 0; i < particleCount; i++) {

				var randomColorIndex = Math.floor(Math.random() * 6);
				var randomRadius = Math.random() * 2;

				// Ensure particles are spawned past screen width and height so
				// there will be no missing stars when rotating canvas
				var x = (Math.random() * (canvas.width + 200)) - (canvas.width + 200) / 2;
				var y = (Math.random() * (canvas.width + 200)) - (canvas.width + 200) / 2;
				lightParticles.push(new LightParticle(x, y, randomRadius, colors[randomColorIndex]));
			}
		})();

		function animate() {
			window.requestAnimationFrame(animate);

			c.save();
			if (isMouseDown === true) {

				// Ease into the new opacity
				var desiredOpacity = 0.01;
				opacity += (desiredOpacity - opacity) * 0.03;
				c.fillStyle = "rgba(18, 18, 18,"+ opacity +")";

				// Ease into the new speed
				var desiredSpeed = 0.012;
				speed += (desiredSpeed - speed) * 0.01;
				timer += speed;

			} else {

				// Ease back to the original opacity
				var originalOpacity = 1;
				opacity += (originalOpacity - opacity) * 0.01;
				c.fillStyle = "rgba(18, 18, 18, " + opacity + ")";

				// Ease back to the original speed
				var originalSpeed = 0.001;
				speed += (originalSpeed - speed) * 0.01;
				timer += speed;


			}

			c.fillRect(0, 0, canvas.width, canvas.height);
			c.translate(canvas.width / 2, canvas.height/2 );
			c.rotate(timer);

			for (var i = 0; i < lightParticles.length; i++) {
				lightParticles[i].update();
			}

			c.restore();

			
		}

		var isMouseDown = false;

		window.addEventListener("mousedown", function() {
			isMouseDown = true;	
		});
		

		window.addEventListener("mouseup", function() {
			isMouseDown = false;	
		});

		animate();

style.scss

body {
  background: #121212;
  margin: 0;
  overflow: hidden;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes chill {
    from {opacity: 1;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

p {
  position: absolute;
  top: 10px;
  left: 12px;
  color: white;
  opacity: 0;
  font-family: "Source Sans Pro";
  animation: fadeIn 2s ease-out, chill 2s 2s, fadeOut 2s 4s;
}



// Twitter
.twitter {
  &:hover {
    a {
      transform: rotate(-45deg) scale(1.05);
    }
    
    i {
      color: lighten(#00ACED, 10%);
    }
  }
  
  a {
    bottom: -40px;
    right: -75px;
    transform: rotate(-45deg);
  }
  
  i {
    bottom: 7px;
    right: 7px;
    color: #00ACED;
  }
}

.social-icon {
  a {
    position: absolute;
    background: white;
    color: white;
    box-shadow: -1px -1px 20px 0px rgba(0,0,0,0.30);
    display: inline-block;
    width: 150px;
    height: 80px;  
    transform-origin: 50% 50%;
    transition: .15s ease-out;
  }
  
  i {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    transition: .15s ease-out;
  }
}

// YouTube 

.youtube {
  &:hover {
    a {
      transform: rotate(45deg) scale(1.05);
    }
    
    i {
      color: lighten(#E62117, 10%);
    }
  }
  
  a {
    bottom: -40px;
    left: -75px;
    transform: rotate(45deg);
  }
  
  i {
    bottom: 7px;
    left: 7px;
    color: #E62117;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" rel="stylesheet" />