Wavy Road with Dashes

Developer
Jono Brandel
Size
2,679 Kb
Views
8,096
  1. Wavy Road with Dashes Previews
  2. Wavy Road with Dashes HTML Codes
  3. Wavy Road with Dashes CSS Codes
  4. Wavy Road with Dashes JS Codes

How do I make an wavy road with dashes?

How to animate a freeway from the vantage point of a bird in Two.js. What is a wavy road with dashes? How do you make a wavy road with dashes? This script and codes were developed by Jono Brandel on 09 November 2022, Wednesday.

Wavy Road with Dashes Previews
IQ Test

Wavy Road with Dashes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wavy Road with Dashes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://jonobr1.github.com/two.js/third-party/two.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wavy Road with Dashes - Script Codes CSS Codes

body { background: yellowgreen;
}

Wavy Road with Dashes - Script Codes JS Codes

// Asked by @jrf0110
// https://github.com/jonobr1/two.js/issues/120
var two = new Two({ type: Two.Types.canvas, fullscreen: true, autostart: true
}).appendTo(document.body);
/** * Create the road, this is the reference for the dashed lines */
var amount = 32;
var points = [];
for (var i = 0; i < amount; i++) { var pct = i / (amount - 1); var theta = Math.PI * 2 * pct; var x = two.width / 20 * Math.cos(theta); var y = pct * two.height * 2 - two.height * 0.5; points.push(new Two.Anchor(x, y));
}
var sidewalk = two.makeCurve(points, true);
sidewalk.translation.set(two.width / 2, two.height/ 2);
sidewalk.noFill().stroke = '#ccc';
sidewalk.linewidth = two.width / 4;
var road = two.makeCurve(points, true);
road.translation.set(two.width / 2, two.height / 2);
road.noFill().stroke = '#666';
road.linewidth = two.width / 6;
/** * Create an array of lines that will be our dashed line. */
var dashes = [];
for (var j = 0; j < 10; j++) { var gutter = - 10; var length = two.height / (amount + gutter); var dash = two.makeLine(0, - length, 0, length); dash.noFill().stroke = '#fff'; dash.linewidth = 3; dash.pct = j / (10 - 1); dash.translation.copy(points[j]).addSelf(road.translation); dashes.push(dash);
}
// Cached variables to use within the animation loop.
var a = new Two.Vector(), b = new Two.Vector();
var velocity = 0.0125;
two.bind('update', function(frameCount, timeDelta) { if (!timeDelta) { return; } for (var i = 0; i < amount; i++) { // Animate the road. var v = points[i]; var pct = i / (amount - 1) var offset = pct * Math.PI * 2; var theta = offset + frameCount / 20; v.x = two.width / 20 * Math.cos(theta); var length = dashes.length; if (i > length - 1) { continue; } // Animate the dashes. var dash = dashes[i]; // Assign the calculation of the vector on the road to `a` road.getPointAt(dash.pct, a); // Get an arbitrary vector right behind `a` in order to get the // angle for the rotation of the dash. road.getPointAt(dash.pct - 0.01, b); dash.translation.copy(a).addSelf(road.translation); dash.rotation = Two.Utils.angleBetween(a, b) + Math.PI / 2; dash.pct = mod(dash.pct + velocity, 1); }
});
// Add some mouse interaction
window.addEventListener('mousemove', function(e) { var pct = (e.clientY / window.innerHeight - 0.5) * 2; velocity = pct * 0.03;
}, false);
window.addEventListener('toushmove', function(e) { var touch = e.changedTouches[1]; if (!touch) { return; } var pct = (e.pageY / window.innerHeight - 0.5) * 2; velocity = pct * 0.03;
});
function mod(v, l) { while (v < 0) { v += l; } return v % l;
}
Wavy Road with Dashes - Script Codes
Wavy Road with Dashes - Script Codes
Home Page Home
Developer Jono Brandel
Username jonobr1
Uploaded November 09, 2022
Rating 4
Size 2,679 Kb
Views 8,096
Do you need developer help for Wavy Road with Dashes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jono Brandel (jonobr1) Script Codes
Name
A Pen by Jono Brandel
Physics Springs with Two.js
Dispensary
USA
Two.js Rainbow
9 Squares r6
Starfield
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!