Skip to content

Instantly share code, notes, and snippets.

@revdancatt

revdancatt/waves.html

Created December 1, 2017 10:13
Show Gist options
  • Save revdancatt/d1503c3016fa603772a6bd3a73383e70 to your computer and use it in GitHub Desktop.
Save revdancatt/d1503c3016fa603772a6bd3a73383e70 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
waves.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sine Waves</title>
</head>
<body>
<canvas id="Aaart" width="1000" height="1000"></canvas>
<script>
'use strict';
function _toConsumableArray(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
} else {
return Array.from(arr);
}
}
var canvas = document.getElementById('Aaart');
var ctx = canvas.getContext('2d');
var numOfLines = 60;
var spacing = canvas.height / numOfLines;
var startOffset = spacing / 2;
var third = (canvas.width - spacing) / 4;
var yRange = [].concat(_toConsumableArray(Array(numOfLines).keys()));
ctx.lineWidth = 6;
var startTime = new Date().getTime();
var counter = 0;
var hue1 = 180;
var hue2 = 60;
setInterval(function() {
// if (counter > 600) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var diff = new Date().getTime() - startTime;
ctx.strokeStyle = 'hsl(' + hue1 + ', 100%, 50%)';
yRange.forEach(function(y) {
var firstYShift = Math.sin(y / numOfLines * Math.PI * 4) * (Math.sin(diff / 1000) * 31);
var secondYShift = Math.sin(y / numOfLines * Math.PI * 3) * (Math.sin(diff / 873) * 43);
var thirdYShift = Math.sin(y / numOfLines * Math.PI * 2) * (Math.sin(diff / 738) * 37);
var firstXShift = Math.sin(y / numOfLines * Math.PI * 2) * (Math.sin(diff / 1213) * 91);
var secondXShift = Math.sin(y / numOfLines * Math.PI * 1) * (Math.sin(diff / 1400) * 101);
var thirdXShift = Math.sin(y / numOfLines * Math.PI * 4) * (Math.sin(diff / 971) * 55);
ctx.beginPath();
ctx.moveTo(startOffset, y * spacing + startOffset);
ctx.lineTo(startOffset + third + firstXShift, y * spacing + startOffset - firstYShift);
ctx.lineTo(startOffset + third * 2 + secondXShift, y * spacing + startOffset + secondYShift);
ctx.lineTo(startOffset + third * 3 + thirdXShift, y * spacing + startOffset + thirdYShift);
ctx.lineTo(canvas.width - startOffset, y * spacing + startOffset);
ctx.stroke();
});
ctx.strokeStyle = 'hsl(' + hue2 + ', 100%, 50%)';
diff += counter + 60;
yRange.forEach(function(y) {
var firstYShift = Math.sin(y / numOfLines * Math.PI * 4) * (Math.sin(diff / 1000) * 31);
var secondYShift = Math.sin(y / numOfLines * Math.PI * 3) * (Math.sin(diff / 873) * 43);
var thirdYShift = Math.sin(y / numOfLines * Math.PI * 2) * (Math.sin(diff / 738) * 37);
var firstXShift = Math.sin(y / numOfLines * Math.PI * 2) * (Math.sin(diff / 1213) * 91);
var secondXShift = Math.sin(y / numOfLines * Math.PI * 1) * (Math.sin(diff / 1400) * 101);
var thirdXShift = Math.sin(y / numOfLines * Math.PI * 4) * (Math.sin(diff / 971) * 55);
ctx.beginPath();
ctx.moveTo(startOffset, y * spacing + startOffset);
ctx.lineTo(startOffset + third + firstXShift, y * spacing + startOffset - firstYShift);
ctx.lineTo(startOffset + third * 2 + secondXShift, y * spacing + startOffset + secondYShift);
ctx.lineTo(startOffset + third * 3 + thirdXShift, y * spacing + startOffset + thirdYShift);
ctx.lineTo(canvas.width - startOffset, y * spacing + startOffset);
ctx.stroke();
});
hue1 += 0.947;
hue2 += 0.823;
counter += 1;
}, 66);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment