A Pen by lloydwheeler

Developer
Lloydwheeler
Size
2,180 Kb
Views
8,096
  1. A Pen by lloydwheeler Previews
  2. A Pen by lloydwheeler HTML Codes
  3. A Pen by lloydwheeler CSS Codes
  4. A Pen by lloydwheeler JS Codes

How do I make an a pen by lloydwheeler?

What is a a pen by lloydwheeler? How do you make a a pen by lloydwheeler? This script and codes were developed by Lloydwheeler on 26 January 2023, Thursday.

A Pen by lloydwheeler Previews
IQ Test

A Pen by lloydwheeler - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by lloydwheeler</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="particles"></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>

A Pen by lloydwheeler - Script Codes CSS Codes

body { margin: 0;
}
#particles { background: #19abff; width: 1900px; height: 920px;
}

A Pen by lloydwheeler - Script Codes JS Codes

var canvas = $('#particles').get(0);
canvas.width = 1920;
canvas.height = 920;
var ctx = canvas.getContext('2d');
var particles = [];
var mousePosition = { x: 950, y: 460
}
$('#particles').mousemove(function(e) { var position = { x: e.pageX, y: e.pageY } drawParticles(position);
});
function Particle(x,y) { this.pos = { x: x, y: y }; this.size = Math.random() * 100; this.luminosity = Math.random() *.5; this.z = this.size*0.05;
}
Particle.prototype.draw = function(ctx, positionDelta) { ctx.beginPath(); ctx.arc(this.pos.x - (positionDelta.x*this.z), this.pos.y - (positionDelta.y*this.z), this.size, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(255,255,255,' + this.luminosity + ')'; ctx.fill();
};
function initParticles() { for(var i = 0; i < 50; i++) { var particle = new Particle(canvas.width*Math.random(), canvas.height*Math.random()); particle.draw(ctx, {x:0, y:0}); particles.push(particle); }
};
initParticles();
function drawParticles(position) { canvas.width = canvas.width; var i = 0, numStars = this.particles.length; for(; i < numStars; i++) { this.particles[i].draw(ctx, positionDelta(mousePosition, position)); }
};
function positionDelta(before, after) { /* Returns the difference between two position vectors */ return {x: (after.x - before.x)/10, y: (after.y - before.y)/10};
};
A Pen by lloydwheeler - Script Codes
A Pen by lloydwheeler - Script Codes
Home Page Home
Developer Lloydwheeler
Username lloydwheeler
Uploaded January 26, 2023
Rating 4.5
Size 2,180 Kb
Views 8,096
Do you need developer help for A Pen by lloydwheeler?

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!

Lloydwheeler (lloydwheeler) Script Codes
Name
Page Editor Animation
Profile Flip
Weather Icon
Mix Blend Mode
IOS Style Back Button
Particle Emitter
Console Input
Device Switcher
SVG Loading Animation
Triangle Generator
Create amazing art & images 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!