Squiggly lines
How do I make an squiggly lines?
Perlin noise thanks to @shiffman Using a p5.js noise function . What is a squiggly lines? How do you make a squiggly lines? This script and codes were developed by Gabi on 30 September 2022, Friday.
Squiggly lines - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Squiggly lines</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas">https://www.youtube.com/watch?v=jxGS3fKPKJA</canvas> <script src='js/feac0eae1a56efd57f04e1bf7.js'></script>
<script src='js/7e315d161a8ee073ded48ab5d.js'></script> <script src="js/index.js"></script>
</body>
</html>
Squiggly lines - Script Codes CSS Codes
body { background-color: #000; font-family: Arial, sans-serif;
}
canvas { display: block; margin: 0 auto; margin: calc(50vh - 300px) auto 0; background-color: #000;
}
Squiggly lines - Script Codes JS Codes
/*
p5 noise
https://codepen.io/enxaneta/pen/7e315d161a8ee073ded48ab5d1669290
*/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var c = {}
var cw = canvas.width = 600;
c.x = cw / 2;
var ch = canvas.height = 600;
c.y = ch / 2;
ctx.lineJoin = "round";
ctx.strokeStyle = "#fff";
ctx.fillStyle = "rgba(0,0,0,1)";
var rad = Math.PI / 180;
var x, y;
var amplitude = 5;
var frequency = .02;
var phi = 0;
var increment = 0.05;
var lines = [];
function SquigglyLine(y) { this.y = y; this.xoff = Math.random() * 10000; this.Xoff = this.xoff; this.phi = Math.random() * 10000; this.draw = function(i) { ctx.beginPath(); this.xoff = this.Xoff; // reset xoff; for (var x = -2; x < cw + 2; x++) { if (x > cw / 3 && x < 2 * cw / 3) { var k = map(x, cw / 3, 2 * cw / 3, 0, 180); } else { k = 0; } var y = -Math.abs(Math.sin((x + noise(this.xoff) * 100) * frequency + this.phi) * (amplitude + Math.sin(k * rad) * 50)) + this.y; ctx.lineTo(x, y); this.xoff += increment; } ctx.lineTo(cw + 2, ch + 2); ctx.lineTo(-2, ch + 2); ctx.closePath(); ctx.fill(); ctx.stroke(); }
}
for (var y = 60; y < ch; y += 16) { var line = new SquigglyLine(y); lines.push(line);
}
function Draw() { requestId = window.requestAnimationFrame(Draw); ctx.fillRect(0, 0, cw, ch); noiseDetail(2, .5); for (var i = 0; i < lines.length; i++) { lines[i].phi += 1 / 30; lines[i].draw(i); }
}
requestId = window.requestAnimationFrame(Draw);
function map(n, a, b, _a, _b) { var d = b - a; var _d = _b - _a; var u = _d / d; return _a + (n - a) * u;
}
Developer | Gabi |
Username | enxaneta |
Uploaded | September 30, 2022 |
Rating | 4.5 |
Size | 4,753 Kb |
Views | 74,888 |
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!
Name | Size |
Fat worm | 2,695 Kb |
Circle decay | 2,638 Kb |
Intersecting Lines | 3,407 Kb |
Cube | 3,814 Kb |
Circular trail | 2,363 Kb |
Pastel dots net | 2,415 Kb |
SVG gauge | 3,841 Kb |
Flexbox playground | 5,418 Kb |
GRID table of contents | 2,377 Kb |
CSS only star rating | 1,860 Kb |
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!
Name | Username | Size |
Wikipedia Viewer | Thalpha | 4,426 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!