Strings

Developer
Sabin Tudor
Size
3,345 Kb
Views
6,072
  1. Strings Previews
  2. Strings HTML Codes
  3. Strings CSS Codes
  4. Strings JS Codes

How do I make an strings?

Example of canvas and JavaScript consisting of invisible points. Within a certain distance, any two or more points will be connected by a new path. The path will be given the color properties of the primary point.. What is a strings? How do you make a strings? This script and codes were developed by Sabin Tudor on 03 January 2023, Tuesday.

Strings Previews
IQ Test

Strings - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Strings</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; background:#1b1b21; }
html { overflow: hidden }
h1 { position: absolute;	top: 0; left: 0; width: 100%; margin: 0;	padding: 10px; font: 12px normal 'arial'; color: lightblue; text-shadow: 0 35px 10px rgba(0,0,0,.75); text-align: left;
}
h1 a { text-decoration: none; color: white;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Strings - Script Codes CSS Codes

body { margin: 0; background:#1b1b21; }
html { overflow: hidden }
h1 { position: absolute;	top: 0; left: 0; width: 100%; margin: 0;	padding: 10px; font: 12px normal 'arial'; color: lightblue; text-shadow: 0 35px 10px rgba(0,0,0,.75); text-align: left;
}
h1 a { text-decoration: none; color: white;
}

Strings - Script Codes JS Codes

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var padding = 20;
var points = [];
var count = 100;
var distance = 100;
/* Find requestAnimationFrame if possible */
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( c ) { window.setTimeout( c, 16.6 ); };
})();
/* Add our points to the point collection */
while ( count-- ) points.push( new point() );
/* Define the properties and behavior of a point */
function point () { /* For preserving 'this' for this.update */ var self = this; self.pos = { x: Math.random() * ( W - padding * 2 ) + padding, y: Math.random() * ( H - padding * 2 ) + padding, update: function () { if ( self.pos.x < padding || self.pos.x > W - padding ) self.vel.x *= -1; if ( self.pos.y < padding || self.pos.y > H - padding ) self.vel.y *= -1; self.pos.x += self.vel.x; self.pos.y += self.vel.y; } }; self.vel = { x: 2 * ( Math.random() < .5 ? -1 : 1 ), y: 2 * ( Math.random() < .5 ? -1 : 1 ) }; self.clr = { r: Math.round( Math.random() * 255 ), g: Math.round( Math.random() * 255 ), b: Math.round( Math.random() * 255 ) };
}
/* Our drawing function, gets called up to 60fps */
function draw () { /* Paint canvas single color */ ctx.fillStyle = "transparent"; ctx.clearRect(0, 0, W, H);
// ctx.fillRect( 0, 0, W, H ); /* Draw our strings */ ctx.lineWidth = 1; /* Cycle over every point */ points.forEach(function(p){ /* Compare each point to current point */ points.forEach(function(q){ /* Find distance between two points */ var xd = p.pos.x - q.pos.x; var yd = p.pos.y - q.pos.y; var dist = Math.sqrt( xd*xd + yd*yd ); /* If under threshold, draw connecting line */ if ( dist < distance ) { /* Line intensity based on proximity */ var alpha = 1 - dist / distance; /* Draw shadow */ ctx.strokeStyle = "rgba(0,0,0," + ( alpha * .2 ) + ")"; ctx.beginPath(); ctx.moveTo( p.pos.x, p.pos.y * 1.2 ); ctx.lineTo( q.pos.x, q.pos.y * 1.2 ); ctx.stroke(); /* Draw string */ ctx.strokeStyle = "rgba(%r,%g,%b,%a)".replace(/%([a-z])/g, function( m, v ) { return v === "a" ? alpha : p.clr[ v ] ; }); ctx.beginPath(); ctx.moveTo( p.pos.x, p.pos.y ); ctx.lineTo( q.pos.x, q.pos.y ); ctx.stroke(); } }); /* Update location of point for next frame */ p.pos.update(); }); /* Queue up the next frame */ requestAnimFrame( draw );
}
/* Invoke animation */
requestAnimFrame( draw );
Strings - Script Codes
Strings - Script Codes
Home Page Home
Developer Sabin Tudor
Username NyX
Uploaded January 03, 2023
Rating 3
Size 3,345 Kb
Views 6,072
Do you need developer help for Strings?

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!

Sabin Tudor (NyX) Script Codes
Name
Bits particle
SCSS test
Round Calendar
Hypnoring thing 2.5D
Infiniti circlez
Meet Squiggly - a SVG goo guy
Signalz
A Pen by Sabin Tudor
SVG low-poly background anim
Infinity glowline CSS circles
Create amazing marketing copy 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!