A Rip In Time

a-rip-in-time.markdown

A Rip In Time

Computers are really good at making things look aligned and polished. Trying some new techniques to get rid of that and make things look a bit more organic and chaotic.

A Pen by Jesse on CodePen.

License.

index.html

<div class="scene">
	<canvas></canvas>

</div>

script.babel

let c,
	ctx,
	w,
	h,
	count,
	lines,
	tick;

function rand( min, max ) {
	return Math.random() * ( max - min ) + min;
};

class Line {
	constructor( opt ) {
		Object.assign( this, opt )
		this.rx = this.x;
	}
	step() {
		this.rx = this.x + Math.cos( ( tick + this.offset ) / this.div ) * this.range;
	}
	draw() {
		ctx.fillStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, ' + this.alpha + ')';
		ctx.fillRect( ( this.rx - this.w / 2 ) + rand( -2, 2 ), ~~( this.y - this.h / 2 ), this.w + rand( -2, 2 ), ~~this.h );
	}
}

function init() {
	c = document.querySelector( 'canvas' );
	ctx = c.getContext( '2d' );
	w = 1300;
	h = 300;
	count =450;
	lines = [];
	tick = 0;
	reset();
	loop();
}

function reset() {
	c.width = w;
	c.height = h;
	lines.length = 0;	
	for( let i = 0; i < count; i++ ) {
		lines.push( new Line({
			x: w / 2,
			y: -50 + count - i,
			w: ( count - i ) * 1,
			h: 1,
			range: i / 8 + rand( 0, ( count + i ) / 10 ),
			div: 24,
			offset: i + rand( 0, 10 ),
			hue: 100,
			saturation: 100,
			lightness: 0,
			alpha: ( ( count - i * 0.92 ) / count ) * 0.9
		}));
	}
}

// speed
function step() {
	let i = count;
	while( i-- ) { lines[ i ].step(); }
	tick += rand( 0, 1 ) > 0.002 ? 1 : rand( 5, 10 );
}

function draw() {
	ctx.fillStyle = 'hsla(' + ( 260 + tick + rand( 0, 90 ) ) + ', ' + rand( 5, 100 ) + '%, ' + rand( 45, 55 ) + '%, 0.1)';
	ctx.fillRect( 2, rand( 0, 190 ), w, h );
	let i = count;
	while( i-- ) { lines[ i ].draw(); }
	if( rand( 0, 1 ) > 0.5 ) {
		ctx.save();
		if( rand( 0, 2 ) > 0.5 ) {
			ctx.globalCompositeOperation = 'source-ou';
		} else {
			ctx.globalCompositeOperation = 'lighter';
			ctx.globalAlpha = 0.2;
		}
		ctx.translate( w / 2 + rand( -10.1, 10.1 ), h / 2 + rand( -0.1, 0.1 ) );
		ctx.scale( rand( 1, 1.1 ), rand( 0.98, 1.02 ) );
		ctx.rotate(rand( 0.005, 0.005 ) );
		ctx.translate( -w / 2 + rand( -0.1, 0.1 ), -h / 2 + rand( -0.1, 0.1 ) );
		ctx.drawImage( c, 5, 0 );
		ctx.restore();
	}
}

function loop() {
	requestAnimationFrame( loop );
	step();
	draw();
}




init();

style.scss

html,
body {
	height: 100%;	
}

body {
	background: #000;
	overflow: hidden;
}

.scene {
	border-radius: 0%;
	bottom: 0;
	height: 300px;
	left: 0;
	margin: auto;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	width: 1300px;
	z-index: 20;
	&:after {
		background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/836/snow-static2.gif);
		bottom: 0;
		content: '';
		left: 0;
		opacity: 0.15;
		position: absolute;
		right: 0;
		top: 0;
	}
}

canvas {
	display: block;
}