The Dark Loop

Developer
Gianluca Guarini
Size
4,130 Kb
Views
14,168
  1. The Dark Loop Previews
  2. The Dark Loop HTML Codes
  3. The Dark Loop CSS Codes
  4. The Dark Loop JS Codes

How do I make an the dark loop?

A small piece of art. What is a the dark loop? How do you make a the dark loop? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

The Dark Loop Previews
IQ Test

The Dark Loop - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Dark Loop</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas width="666" height="666" id="bg"></canvas>
<aside>	<h1>The Dark Loop</h1>	<h2>by @gianlucaguarini</h2>
</aside>
<canvas width="666" height="666" id="fg"></canvas>
<canvas width="666" height="666" id="bg-balls"></canvas> <script src="js/index.js"></script>
</body>
</html>

The Dark Loop - Script Codes CSS Codes

html, body { background: #111; font-family: Georgia; font-weight: normal; font-style: oblique; width: 100%; height: 100%; overflow: hidden; position: relative; margin: 0;
}
canvas { position: absolute; top: 50%; left: 50%; margin: -333px 0 0 -333px;
}
aside { position: absolute; color: #fff; text-align: right; bottom: 5px; right: 25px;
}
h1 { font-weight: normal; font-size: 20px; line-height: 10px;
}
h2 { color: #666; font-weight: normal; font-size: 13px;
}

The Dark Loop - Script Codes JS Codes

// window.Math shortcuts
Object.getOwnPropertyNames(window.Math).forEach(function(method) {	window[method] = Math[method];
});
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
// vars
var bgCanvas = document.getElementById('bg'),	bgBallsCanvas = document.getElementById('bg-balls'),	fgCanvas = document.getElementById('fg'),	bgCtx = bgCanvas.getContext('2d'),	bgBallsCtx = bgBallsCanvas.getContext('2d'),	fgCtx = fgCanvas.getContext('2d'),	CANVAS_WIDTH = 666,	CANVAS_HEIGHT = 666,	BG_LINES_COUNT = 15,	BG_LINES_LENGTH = 1500,	BG_BALLS_COUNT = 50,	BG_BALLS_GRAY = 100,	FG_LINES_COUNT = 4,	FG_LINES_QUEUE_LENGTH = 66,	FG_LINES_COLORS = [{	h: 30,	s: 50,	l: 50	}, {	h: 0,	s: 50,	l: 50	}, {	h: 220,	s: 50,	l: 50	}, {	h: 150,	s: 50,	l: 50	}],	TWOPI = 2 * PI,	// classes	Ball = function(x, y, size, speed, color) {	this.x = x;	this.y = y;	this.size = size;	this.speed = speed;	this.color = color;	this.draw = function(time) {	this.speed = random() * this.size;	this.x += (random() - 0.5) * this.speed;	this.y += (random() - 0.5) * this.speed;	if (this.x > CANVAS_WIDTH || this.x < 0)	this.x *= -1;	if (this.y > CANVAS_HEIGHT || this.y < 0)	this.y *= -1;	bgBallsCtx.fillStyle = 'rgba(' + this.color.r + ',' + this.color.g + ',' + this.color.b + ',' + this.color.a + ')';	bgBallsCtx.beginPath();	bgBallsCtx.arc(this.x, this.y, this.size, 0, TWOPI);	bgBallsCtx.fill();	};	},	Line = function(x, y, color, ease, size, offset) {	var _this = this,	tmpOffset = clone(offset);	this.x = x;	this.y = y;	this.color = color;	this.size = size;	this.queue = [];	this.ease = ease;	this.offset = offset;	this.draw = function(time) {	var newParticle = {	x: this.x + this.offset.x,	y: this.y + this.offset.y,	size: this.size,	color: clone(this.color)	};	if (this.queue.length > FG_LINES_QUEUE_LENGTH)	this.queue.splice(0, 1);	if (this.offset.x + 10 > tmpOffset.x)	tmpOffset.x = (random() * CANVAS_WIDTH / 2) - CANVAS_WIDTH / 2;	if (this.offset.y + 10 > tmpOffset.y)	tmpOffset.y = (random() * CANVAS_HEIGHT / 2) - CANVAS_HEIGHT / 2;	this.offset.x += (tmpOffset.x - this.offset.x) / this.ease;	this.offset.y += (tmpOffset.y - this.offset.y) / this.ease;	this.queue.forEach(function(particle, i) {	var next = _this.queue[i + 1];	if (particle.color.l - 0.5 > 0)	particle.color.l -= 0.5;	if (particle.color.s - 0.8 > 0)	particle.color.s -= 0.8;	particle.size += 0.2;	particle.color.h += 1;	if (next) {	fgCtx.beginPath();	fgCtx.strokeStyle = 'hsl(' + particle.color.h + ',' + particle.color.s + '%,' + particle.color.l + '%)';	fgCtx.lineWidth = particle.size;	fgCtx.moveTo(particle.x, particle.y);	fgCtx.lineTo(next.x, next.y);	fgCtx.stroke();	} else {	lastParticle = particle;	}	});	this.queue.push(newParticle);	};	},	// helpers	clone = function(obj) {	if (null === obj || "object" !== typeof obj) return obj;	var copy = obj.constructor();	for (var attr in obj) {	if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];	}	return copy;	},	toRadians = function(angle) {	return angle * PI / 180;	},	shuffle = function(o) {	for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);	return o;	},	// app	App = {	time: 0,	emitter: {	x: CANVAS_WIDTH / 2,	y: CANVAS_HEIGHT / 2,	step: 8,	angle: toRadians(0)	},	ballsArr: [],	linesArr: [],	init: function() {	this.drawBgLines();	this.createBalls();	this.createLines();	//fgCtx.globalCompositeOperation = 'lighter';	fgCtx.shadowColor = 'rgba(0,0,0,0.3)';	fgCtx.lineCap = 'square';	fgCtx.shadowBlur = 3;	this.animate();	},	animate: function() {	window.requestAnimFrame(this.animate.bind(this));	this.draw();	},	draw: function() {	bgBallsCtx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);	this.ballsArr.forEach(function(ball) {	ball.draw(App.time);	});	fgCtx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);	this.linesArr.forEach(function(line) {	line.x = App.emitter.x;	line.y = App.emitter.y;	line.draw(App.time);	});	App.emitter.x += sin(App.emitter.angle) * App.emitter.step;	App.emitter.y += cos(App.emitter.angle) * App.emitter.step;	App.emitter.angle += this.time;	this.time++;	/*if (this.time%30===0)	this.linesArr = shuffle(this.linesArr);*/	},	createLines: function() {	var i = FG_LINES_COUNT;	while (i--) {	this.linesArr.push(	new Line(	0,	0,	FG_LINES_COLORS[i],	5,	1, {	x: 0,	y: 0	}	)	);	}	},	createBalls: function() {	var i = BG_BALLS_COUNT;	while (i--) {	this.ballsArr.push(	new Ball(	random() * CANVAS_WIDTH,	random() * CANVAS_HEIGHT,	random() * 5,	random(), {	r: BG_BALLS_GRAY,	g: BG_BALLS_GRAY,	b: BG_BALLS_GRAY,	a: random()	}	)	);	}	},	drawBgLines: function() {	var i = BG_LINES_COUNT,	position = {	x: 0,	y: 0	},	gray,	angle,	j;	while (i--) {	j = BG_LINES_LENGTH;	position.x = position.y = CANVAS_WIDTH / 2;	angle = toRadians(random() * 360);	gray = ~~ (random() * 30) + 10;	gray = gray < 10 ? 15 : gray;	bgCtx.fillStyle = 'rgb(' + gray + ', ' + gray + ',' + gray + ')';	while (j--) {	bgCtx.beginPath();	bgCtx.arc(position.x, position.y, j / BG_LINES_LENGTH * 2, 0, TWOPI);	position.x += cos(angle) + random() - 0.5;	position.y += sin(angle) + random() - 0.5;	angle += j / ((random() * BG_LINES_LENGTH * 100) - BG_LINES_LENGTH / 2);	bgCtx.fill();	}	}	}	};
App.init();
The Dark Loop - Script Codes
The Dark Loop - Script Codes
Home Page Home
Developer Gianluca Guarini
Username GianlucaGuarini
Uploaded November 04, 2022
Rating 3.5
Size 4,130 Kb
Views 14,168
Do you need developer help for The Dark Loop?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes
Name
The 3D Worrying Cubes
Drunk on Google Maps
A Pen by Gianluca Guarini
3D Box-shadow
Site under construction
The Fly
Appletv
Find your mouse cursor
Riot and es6
Full screen menu
Create amazing love letters 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!