Some JavaScript waves from habitify.co
A Pen by Jordan Halvorsen on CodePen.
<div id="wave-wrap"> | |
<canvas id="wave_1" ></canvas> | |
<canvas id="wave_2" ></canvas> | |
</div> | |
<footer id="footer"> | |
</footer> |
Some JavaScript waves from habitify.co
A Pen by Jordan Halvorsen on CodePen.
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 ); |
<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> |
*{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%; | |
} |