USA

Developer
Jono Brandel
Size
2,007 Kb
Views
14,168
  1. USA Previews
  2. USA HTML Codes
  3. USA JS Codes

How do I make an usa?

Spent the 9/11 teaching a Workshop on Two.js. Here's one thing we made! Based on this: https://dribbble.com/shots/1311931-USA. What is a usa? How do you make a usa? This script and codes were developed by Jono Brandel on 08 November 2022, Tuesday.

USA Previews
IQ Test

USA - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>USA</title> <script src="//jonobr1.github.io/two.js/third-party/two.js"></script>
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

USA - Script Codes JS Codes

var two = new Two({ type: Two.Types.canvas, fullscreen: true, autostart: true
}).appendTo(document.body);
var usa;
var asset = 'https://dl.dropboxusercontent.com/u/1595444/type-a-tone/tldr/workshop/USA-BW.svg';
two.load(asset, function(svg) { usa = svg; usa.center(); // usa.subdivide(); // usa.subdivide(); usa.translation.x = two.width / 2; usa.translation.y = two.height / 2; var u = usa.children[0]; u.miter = 0; u.stroke = 'rgb(255, 50, 50)'; _.each(u.vertices, function(anchor) { var origin = anchor.clone(); anchor.origin = origin; }); var s = usa.children[1]; s.miter = 0; s.stroke = 'rgb(34, 124, 170)'; _.each(s.vertices, function(anchor) { var origin = anchor.clone(); anchor.origin = origin; }); var a = usa.children[2]; a.miter = 0; a.stroke = '#333'; _.each(a.vertices, function(anchor) { var origin = anchor.clone(); anchor.origin = origin; }); two.bind('resize', function() { usa.translation.x = two.width / 2; usa.translation.y = two.height / 2; }); two.bind('update', function(frameCount) { usa.ending = frameCount / 250; if ((frameCount % 8) > 1) { return; } _.each(u.vertices, function(anchor, i) { var pct = i / u.vertices.length; anchor.x = anchor.origin.x + Math.sin(6 * pct + frameCount / 10) * 20; }); _.each(s.vertices, function(anchor, i) { // var pct = i / s.vertices.length; // anchor.x = anchor.origin.x + Math.cos(6 * pct + frameCount / 10) * 20; // anchor.y = anchor.origin.y + Math.sin(6 * pct + frameCount / 10) * 20; anchor.x = anchor.origin.x + Math.random() * 10; anchor.y = anchor.origin.y + Math.random() * 10; }); _.each(a.vertices, function(anchor, i) { var pct = i / a.vertices.length; anchor.y = anchor.origin.y + Math.sin(6 * pct + frameCount / 10) * 30; }); });
});
USA - Script Codes
USA - Script Codes
Home Page Home
Developer Jono Brandel
Username jonobr1
Uploaded November 08, 2022
Rating 3.5
Size 2,007 Kb
Views 14,168
Do you need developer help for USA?

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
Physics Springs with Two.js
Starfield
Dispensary
A Pen by Jono Brandel
9 Squares r6
Two.js Rainbow
Wavy Road with Dashes
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!