Organic lines of staring-atness

Developer
Matei Copot
Size
2,415 Kb
Views
42,504
  1. Organic lines of staring-atness Previews
  2. Organic lines of staring-atness HTML Codes
  3. Organic lines of staring-atness CSS Codes
  4. Organic lines of staring-atness JS Codes

How do I make an organic lines of staring-atness?

I'm really proud of this simple result, I also really enjoyed coding it right before school! Hope you enjoy it! The parameters are on line 5,6,7,8 if you want to fiddle around with it. What is a organic lines of staring-atness? How do you make a organic lines of staring-atness? This script and codes were developed by Matei Copot on 12 June 2022, Sunday.

Organic lines of staring-atness Previews
IQ Test

Organic lines of staring-atness - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>organic lines of staring-atness</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! */ canvas{ position:absolute; top:0; left:0; background-color:black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id=c></canvas> <script src="js/index.js"></script>
</body>
</html>

Organic lines of staring-atness - Script Codes CSS Codes

canvas{ position:absolute; top:0; left:0; background-color:black;
}

Organic lines of staring-atness - Script Codes JS Codes

var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), count = (w*h/3000)|0, speed = 4, range = 80, lineAlpha = .05, particles = [], huePart = 360/count;
for(var i = 0; i < count; ++i) particles.push(new Particle((huePart*i)|0));
function Particle(hue){ this.x = Math.random()*w; this.y = Math.random()*h; this.vx = (Math.random()-.5)*speed; this.vy = (Math.random()-.5)*speed; this.hue = hue;
}
Particle.prototype.update = function(){ this.x += this.vx; this.y += this.vy; if(this.x < 0 || this.x > w) this.vx *= -1; if(this.y < 0 || this.y > h) this.vy *= -1;
}
function checkDist(a, b, dist){ var x = a.x - b.x, y = a.y - b.y; return x*x + y*y <= dist*dist;
}
function anim(){ window.requestAnimationFrame(anim); ctx.fillStyle = 'rgba(0, 0, 0, .05)'; ctx.fillRect(0, 0, w, h); for(var i = 0; i < particles.length; ++i){ var p1 = particles[i]; p1.update(); for(var j = i+1; j < particles.length; ++j){ var p2 = particles[j]; if(checkDist(p1, p2, range)){ ctx.strokeStyle = 'hsla(hue, 80%, 50%, alp)' .replace('hue', ((p1.hue + p2.hue + 3)/2) % 360) .replace('alp', lineAlpha); ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); } } }
}
anim();
Organic lines of staring-atness - Script Codes
Organic lines of staring-atness - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded June 12, 2022
Rating 4.5
Size 2,415 Kb
Views 42,504
Do you need developer help for Organic lines of staring-atness?

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!

Matei Copot (towc) Script Codes
Name
Eiffel Tower
Experiment with basic 3d on 2d canvas
Neon hexagon-forming particles
Binary spiral
Hexagonical retro tiles
Plasma background
Progression of ideas through willpower and motivation
Neural Network visualization
Rainbow Firestorm recreation
Springing Particles
Create amazing Facebook ads 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!