Moving lines

Developer
Erik Terwan
Size
2,880 Kb
Views
40,480
  1. Moving lines Previews
  2. Moving lines HTML Codes
  3. Moving lines CSS Codes
  4. Moving lines JS Codes

How do I make an moving lines?

Moire. What is a moving lines? How do you make a moving lines? This script and codes were developed by Erik Terwan on 04 July 2022, Monday.

Moving lines Previews
IQ Test

Moving lines - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving lines</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="main"></canvas> <script src="js/index.js"></script>
</body>
</html>

Moving lines - Script Codes CSS Codes

body
{ margin: 0; padding: 0; background: #000;
}
canvas#main
{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0;
}

Moving lines - Script Codes JS Codes

(function(body){ var canvas = document.getElementById('main'), ctx = canvas.getContext('2d'), t = 0, a = 500, c = 200, x = 0, y = 0, randX = 0, randY = 0, randX2 = 0, randY2 = 0, lifetime = 0, colorUp = false, lines = [], settings = { speed: 0.001, lineWidth : 1, linesEveryNumFrames: 3, minHue : 160, maxHue : 215, hueSpeed : 0.01 }; function setup() { w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, randX = randX2 = x = x2 = w / 2, randX = randY2 = y = y2 = h / 2, a = Math.min(w, h); t = 0; c = 200; lifetime = 0; colorUp = false; ctx.lineWidth = settings.lineWidth; ctx.globalCompositeOperation = "source-over"; var numOfLines = 8; for (var i = 0; i < numOfLines; i++) { var line = new Line(w, h, Math.random() * w, -50, Math.random() * w, h + 50, { switch1Interval: 400, switch1Delay: i * 20, switch2Interval: 400, switch2Delay: i * 20, switchSpeed: 0.005 }); lines.push(line); } draw(); } function draw() { ctx.globalCompositeOperation = "source-over"; if(lifetime %2 == 0){ //ctx.shadowBlur = 0; //ctx.shadowColor= "hsla(0, 0%, 0%, 0)"; ctx.fillStyle = "hsla(0,0%,0%,0.05)"; ctx.fillRect(0,0,w,h); } //ctx.shadowBlur = 8; //ctx.shadowColor= "hsl("+c+", 89%, 8%)"; ctx.strokeStyle = "hsl("+c+", 99%, 21%)"; ctx.globalCompositeOperation = "lighter"; for (var i = 0; i < lines.length; i++) { var line = lines[i]; line.draw(t / (i + 1), w, h); } if(colorUp){ c += settings.hueSpeed; } else{ c -= settings.hueSpeed; } if(c > settings.maxHue){ c = settings.maxHue; colorUp = false; } else if(c < settings.minHue){ c = settings.minHue; colorUp = true; } t += settings.speed; lifetime++; if (lifetime > 400) { lifetime = 0; } window.requestAnimationFrame(draw); } var Line = function(_w, _h, _x1, _y1, _x2, _y2, _settings){ this.w = _w; this.h = _h; this.x1 = _x1; this.y1 = _y1; this.x1Target = _x1; this.y1Target = _y1; this.x2 = _x2; this.y2 = _y2; this.x2Target = _x2; this.y2Target = _y2; this.a = 500; this.settings = _settings; this.lifetime = 0; var _this = this; this.draw = function(t, w, h) { var xa = (_this.a * Math.cos(t)); xa = xa / (1 + Math.pow( Math.sin(t), 2)); var ya = (_this.a * Math.sin(t) * Math.cos(t)); ya = ya / (1 + Math.pow(Math.cos(t), 2)); xa += w / 2; ya += h / 2; var switch1Speed = (_this.settings.switch1Interval + _this.settings.switch1Delay); var switch2Speed = (_this.settings.switch2Interval + _this.settings.switch2Delay); if(_this.lifetime %switch1Speed == 0){ _this.x1Target = (Math.random() * (w + 200)) - 100; //_this.y1Target = 50; } if((_this.lifetime - (switch2Speed / 2)) %switch2Speed == 0){ _this.x2Target = (Math.random() * (w + 200)) - 100; //_this.y2Target = _this.4 + 50; } var dx = _this.x1Target - _this.x1; if(Math.abs(dx) > 1) { _this.x1 += dx * _this.settings.switchSpeed; } var dy = _this.y1Target - _this.y1; if(Math.abs(dy) > 1) { _this.y1 += dy * _this.settings.switchSpeed; } var dx2 = _this.x2Target - _this.x2; if(Math.abs(dx2) > 1) { _this.x2 += dx2 * _this.settings.switchSpeed; } var dy2 = _this.y2Target - _this.y2; if(Math.abs(dy2) > 1) { _this.y2 += dy2 * _this.settings.switchSpeed; } ctx.beginPath(); ctx.bezierCurveTo(_this.x1,_this.y1,_this.x2,xa,ya, _this.y2); ctx.stroke(); ctx.closePath(); _this.lifetime++; } }; document.addEventListener('DOMContentLoaded', setup, false); //window.addEventListener('resize', setup, false);
})(document.body);
Moving lines - Script Codes
Moving lines - Script Codes
Home Page Home
Developer Erik Terwan
Username erikterwan
Uploaded July 04, 2022
Rating 3
Size 2,880 Kb
Views 40,480
Do you need developer help for Moving lines?

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!

Erik Terwan (erikterwan) Script Codes
Name
Retina canvas w. resize
Math.random at work
Interactive Math.random visualisation
Drawing lines
Connecting dots
Moving shape
Livestream Audio Visualizer v2
Livestream Audio Visualizer
Shape by attraction
ScrollTrigger stress test
Create amazing sales emails 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!