Fun with Lines

Developer
Dave DeHaan
Size
2,897 Kb
Views
6,072
  1. Fun with Lines Previews
  2. Fun with Lines HTML Codes
  3. Fun with Lines CSS Codes
  4. Fun with Lines JS Codes

How do I make an fun with lines?

The center point will follow your mouse. Good fun!Clicking will stop/start the animation.. What is a fun with lines? How do you make a fun with lines? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.

Fun with Lines Previews
IQ Test

Fun with Lines - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fun with Lines</title> <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 { background: -webkit-linear-gradient(top, #2539AD, #1AD6FD) no-repeat #1AD6FD; margin: 0; padding: 0;
}
canvas { width: 100%; height: 500px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="canvas" width="500" height="500"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fun with Lines - Script Codes CSS Codes

body { background: -webkit-linear-gradient(top, #2539AD, #1AD6FD) no-repeat #1AD6FD; margin: 0; padding: 0;
}
canvas { width: 100%; height: 500px;
}

Fun with Lines - Script Codes JS Codes

var coolLines = { settings: { fps: 60, lines: { count: 300, minSpeed: 10, color: "rgba(255,255,200,.05)" }, interact: { radius: 50, speed: 60, }, }, dots: [], canvas: document.getElementById('canvas'), context: null, lineInterval: null, status: 'stopped', mousePos: {x:null, y:null}, init: function() { this.context = this.canvas.getContext('2d'); this.canvas.width = $('#canvas').width(); this.canvas.height = $('#canvas').height(); this.mousePos.x = this.canvas.width / 2; this.mousePos.y = this.canvas.height / 2; var i = 0; while (i < this.settings.lines.count) { this.dots.push({ 'y': Math.floor(Math.random() * this.canvas.height), 'x': Math.floor(Math.random() * this.canvas.width), 'yGoal': this.goalValue(this.canvas.height, this.canvas.height / 10), 'xGoal': this.goalValue(this.canvas.width, this.canvas.width / 10), 'speed': this.settings.lines.minSpeed }); i++; } this.addListener(); this.start(); }, start: function() { var cl = this; cl.lineInterval = setInterval(function() { cl.canvas.width = cl.canvas.width; cl.context.beginPath(); cl.context.moveTo(cl.dots[0].x, cl.dots[0].y); for (key in cl.dots) { cl.context.lineTo(cl.dots[key].x, cl.dots[key].y); moveSpeed = Math.floor(cl.dots[key].speed / 10); if (cl.dots[key].y < cl.dots[key].yGoal) { cl.dots[key].y += moveSpeed; } if (cl.dots[key].y > cl.dots[key].yGoal) { cl.dots[key].y -= moveSpeed; } if (cl.dots[key].y == cl.dots[key].yGoal) { cl.dots[key].yGoal = cl.goalValue(cl.canvas.height, cl.canvas.height / 10); } if (cl.dots[key].x < cl.dots[key].xGoal) { cl.dots[key].x += moveSpeed; } if (cl.dots[key].x > cl.dots[key].xGoal) { cl.dots[key].x -= moveSpeed; } if (cl.dots[key].x == cl.dots[key].xGoal) { cl.dots[key].xGoal = cl.goalValue(cl.canvas.width, cl.canvas.width / 10); } if (cl.dots[key].speed > cl.settings.lines.minSpeed) { cl.dots[key].speed--; } } cl.context.lineTo(cl.dots[0].x, cl.dots[0].y); cl.context.strokeStyle = cl.settings.lines.color; cl.context.beginPath(); cl.checkMouse(); cl.context.stroke(); }, 1000/cl.settings.fps); this.status = 'started'; }, stop: function() { clearInterval(this.lineInterval); this.status = 'stopped'; }, checkMouse: function() { for (key in this.dots) { this.context.moveTo(this.dots[key].x, this.dots[key].y); this.context.lineTo(this.mousePos.x, this.mousePos.y); } }, goalValue: function(maxValue, range) { if (Math.random() * 2 > 1) { return Math.floor(maxValue - range * Math.random()); } else { return Math.floor(range * Math.random()); } }, getMousePosition: function(event) { var rect = this.canvas.getBoundingClientRect(); this.mousePos.x = event.clientX - rect.left; this.mousePos.y = event.clientY - rect.top; }, addListener: function() { var cl = this; this.canvas.addEventListener('mousemove', function(event) { cl.getMousePosition(event); }); this.canvas.addEventListener('mousedown', function(event) { if (cl.status == 'started') cl.stop(); else cl.start(); }); }
};
coolLines.init();
Fun with Lines - Script Codes
Fun with Lines - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 3
Size 2,897 Kb
Views 6,072
Do you need developer help for Fun with 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!

Dave DeHaan (davedehaan) Script Codes
Name
Auto-generating complementary colors
HTML5 Logo Tracing
404 Glitch Effect
Asteroids
Dynamic Hero Image
Global Composite Operation Test
Merry Christmas.
Tween Bubbles.
A Pen by Dave DeHaan
Randomly generated canvas clouds
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!