Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited
Created October 30, 2023 02:25
Show Gist options
  • Save landsurveyorsunited/1a526edb084df97951a9a88feb41d10b to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/1a526edb084df97951a9a88feb41d10b to your computer and use it in GitHub Desktop.
Blending motions
<!--
Follow me on
Twitter: https://twitter.com/supahfunk
Dribbble: https://dribbble.com/supahfunk
Codepen: https://codepen.io/supah/
-->
<canvas id="bend" resize width="100%" height="100%"></canvas>
<span class="text">A to ZENITH</span>
var canvas = document.getElementById('bend');
paper.install(window);
paper.setup(canvas);
var h = window.innerHeight,
w = window.innerWidth,
horizon = h / 2,
pathCounts = 13,
pathPoints = 15,
strokeWidth = 2,
strokeColor = 'orange',
fillColor = 'rgba(108, 236, 229, .7)',
speed = 1.6,
offset = 7,
frequency = [0, -30, 50, -50, -35, 35, 0, -30, 50, -50, -35, 35, -30, 50, -50, -35, 35],
delay = 0.9,
mousePos = view.center / 2,
path = [];
initializePath();
function initializePath() {
h = window.innerHeight;
w = window.innerWidth;
horizon = h / 2;
//clear
paper.project.activeLayer.removeChildren();
for (i = 0; i < pathCounts; i++) {
path[i] = new paper.Path();
path[i].add(new paper.Point(-10, h));
path[i].add(new paper.Point(-10, horizon));
for (var p = 0; p < pathPoints - 1; p++) {
height =
path[i].add(new paper.Point(w / (pathPoints - 1) * p + p, horizon + frequency[p]));
}
path[i].add(new paper.Point(w + 10, horizon));
path[i].add(new paper.Point(w + 10, h));
path[i].strokeWidth = strokeWidth;
path[i].strokeColor = strokeColor;
if (i == 0) {
path[i].fillColor = 'rgba(255, 255, 255, 1)';
}
path[i].smooth();
}
}
// paper.view.draw();
view.onFrame = function(event) {
for (p = 0; p < pathCounts; p++) {
for (s = 0; s < pathPoints; s++) {
// skip first two points because they are the base of the path
var value = (s % 2) ? -1 : 1;
var segment = path[p].segments[2 + s];
segment.point.y = horizon + ((Math.sin((event.time + s * delay) * speed)) * (frequency[s] * value + (p * offset * value)));
}
}
}
window.onresize = function(event) {
initializePath();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #353539 , #212121);
height: 100vh;
}
#bend {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: transparent;
}
span {
position: absolute;
z-index: 1;
top: 30%;
left: 50%;
transform: translate(-50%, -65%);
color: orange;
font-family: 'Source Sans Pro', sans-serif;
font-size: 9vw;
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment