Some JavaScript waves from habitify.co
A Pen by Jordan Halvorsen on CodePen.
Last active
January 28, 2017 00:49
-
-
Save thehalvo/e38fd66a80a88bfaed4e4873f1188116 to your computer and use it in GitHub Desktop.
JavaScript Waves
This file contains hidden or 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 id="wave-wrap"> | |
| <canvas id="wave_1" ></canvas> | |
| <canvas id="wave_2" ></canvas> | |
| </div> | |
| <footer id="footer"> | |
| </footer> |
This file contains hidden or 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
| function wave_1( background, canvas_id, max_height, wave_compression ){ | |
| var WIDTH = $( window ).width(); | |
| var height = 100; | |
| var background = background; | |
| function sketchProc(processing) { | |
| processing.draw = function () { | |
| processing.background(0, 0, 0 ,0); | |
| var now = + new Date; | |
| var dt = now - lastUpdate; | |
| lastUpdate = now; | |
| update(dt); | |
| draw(); | |
| }; | |
| processing.setup = function () { | |
| processing.size(WIDTH, height); | |
| processing.frameRate(60); | |
| }; | |
| } | |
| var canvas = document.getElementById( canvas_id ); | |
| // attaching the sketchProc function to the canvas | |
| var lastUpdate =+ new Date; | |
| var pjs = new Processing(canvas, sketchProc); | |
| // Resolution of simulation | |
| var NUM_POINTS = 200; | |
| // Width of simulation | |
| var Y_OFFSET = 55; | |
| var ITERATIONS = 12; | |
| // Make points to go on the wave | |
| function makeWavePoints(numPoints) { | |
| var t = []; | |
| for (var n = 0; n < numPoints + 3; n++) { | |
| // This represents a point on the wave | |
| var newPoint = { | |
| x: n / numPoints * WIDTH, | |
| y: Y_OFFSET, | |
| } | |
| t.push(newPoint); | |
| } | |
| return t | |
| } | |
| // A phase difference to apply to each sine | |
| var offset = 0; | |
| var NUM_BACKGROUND_WAVES = 7; | |
| var BACKGROUND_WAVE_MAX_HEIGHT = max_height; | |
| var BACKGROUND_WAVE_COMPRESSION = wave_compression; | |
| // Amounts by which a particular sine is offset | |
| var sineOffsets = []; | |
| // Amounts by which a particular sine is amplified | |
| var sineAmplitudes = []; | |
| // Amounts by which a particular sine is stretched | |
| var sineStretches = []; | |
| // Amounts by which a particular sine's offset is multiplied | |
| var offsetStretches = []; | |
| // Set each sine's values to a reasonable random value | |
| for (var i = -0; i < NUM_BACKGROUND_WAVES; i++) { | |
| var sineOffset = -Math.PI + 2 * Math.PI * Math.random(); | |
| sineOffsets.push(sineOffset); | |
| var sineAmplitude = Math.random() * BACKGROUND_WAVE_MAX_HEIGHT; | |
| sineAmplitudes.push(sineAmplitude); | |
| var sineStretch = Math.random() * BACKGROUND_WAVE_COMPRESSION; | |
| sineStretches.push(sineStretch) | |
| var offsetStretch = Math.random() * BACKGROUND_WAVE_COMPRESSION; | |
| offsetStretches.push(offsetStretch); | |
| } | |
| // This function sums together the sines generated above, | |
| // given an input value x | |
| function overlapSines(x) { | |
| var result = 0; | |
| for (var i = 0;i < NUM_BACKGROUND_WAVES; i++) { | |
| result = result | |
| + sineOffsets[i] | |
| + sineAmplitudes[i] | |
| * Math.sin(x * sineStretches[i] + offset * offsetStretches[i]); | |
| } | |
| return result; | |
| } | |
| var wavePoints = makeWavePoints(NUM_POINTS); | |
| // Callback when updating | |
| function update(dt) { | |
| offset = offset + 1; | |
| } | |
| // Callback for drawing | |
| function draw() { | |
| var canvas = document.getElementById( canvas_id ); | |
| var context = canvas.getContext('2d'); | |
| var firstPoint = wavePoints[0]; | |
| var lastPoint = wavePoints[wavePoints.length - 1]; | |
| context.beginPath(); | |
| context.moveTo(firstPoint.x, firstPoint.y + overlapSines(firstPoint.x)); | |
| for (var n = 0; n < wavePoints.length;n++) { | |
| var p = wavePoints[n]; | |
| if (n > 0) { | |
| var leftPoint = wavePoints[n-1]; | |
| context.lineTo(p.x, p.y + overlapSines(p.x)); | |
| } | |
| } | |
| var canvasHeight = $( "#" + canvas_id ).height(); | |
| context.lineTo(lastPoint.x, canvasHeight); | |
| context.lineTo(0, canvasHeight); | |
| context.lineTo(0, firstPoint.y + overlapSines(firstPoint.x)); | |
| context.closePath(); | |
| context.lineWidth = 0; | |
| context.strokeStyle = background; | |
| context.fillStyle = background; | |
| context.fill(); | |
| context.stroke(); | |
| } | |
| } | |
| wave_1( '#2A5DFF', 'wave_1', 10, 1/22 ); | |
| wave_1( '#339DFF', 'wave_2', 10, 1/20 ); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <script src="https://d3vv6lp55qjaqc.cloudfront.net/items/283W302a0p2a2W2d1C2f/processing.js"></script> |
This file contains hidden or 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
| *{box-sizing: border-box}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;vertical-align: middle}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} | |
| body { | |
| font-family: sans-serif; | |
| background: #ffffff; | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| #footer { | |
| background: #339dff; | |
| color: #fff; | |
| padding: 50px 0; | |
| text-align: center; | |
| } | |
| #wave-wrap { | |
| position: relative; | |
| } | |
| #wave_1 { | |
| width: 100%; | |
| } | |
| #wave_2 { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 2; | |
| outline: none; | |
| width: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment