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.
Created
April 24, 2017 18:25
-
-
Save JessePimenta/a7e4c23161d68b867c1b60045aea8c40 to your computer and use it in GitHub Desktop.
A Rip In Time
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="scene"> | |
| <canvas></canvas> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment