A Pen by Khangeldy
How do I make an a pen by khangeldy?
What is a a pen by khangeldy? How do you make a a pen by khangeldy? This script and codes were developed by Khangeldy on 09 November 2022, Wednesday.
A Pen by Khangeldy - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Khangeldy</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <canvas id="tutorial" width="500" height="500"></canvas> <script src="js/index.js"></script>
</body>
</html>
A Pen by Khangeldy - Script Codes JS Codes
var canvas = document.getElementById('tutorial'), context = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, area = w * h, particleNum = 300, ANIMATION, particleStartX = w / 2, particleStartY = h / 2;
var particles = [];
// Particle constructor
function Particle(i) { this.id = i; this.hue = rand(50,0, 1); this.active = false;
}
Particle.prototype.build = function(parX, parY) { // window center this.x = parX; this.y = parY; // random this.r = rand(7, 2, 1); this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = .01; this.opacity = Math.random() + .5; this.active = true; context.beginPath(); context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); context.fillStyle ="hsla(" + this.hue + ",100%,50%,1)"; context.fill();
};
Particle.prototype.draw = function() { this.active = true; this.x += this.vx; this.y += this.vy; this.vy += this.gravity; this.hue -= 0.5; this.r = Math.abs(this.r - 0.05); context.beginPath(); context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); context.fillStyle = "hsla(" + this.hue + ", 100%, 50%, 1)"; context.fill(); if(this.r <= 0.5) { this.active = false; }
}
// draw scene
function drawScene() { context.fillStyle = 'black'; context.fillRect(0,0,w,h); for(var i = 0; i < particles.length; i++) { if(particles[i].active === true) { particles[i].draw(); } else { particles[i].build(particleStartX, particleStartY); } } ANIMATION = requestAnimationFrame(drawScene);
}
function initCanvas() { var s = getComputedStyle(canvas); if(particles.length) { particles = []; cancelAnimationFrame(ANIMATION); ANIMATION; console.log(ANIMATION); } w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; for(var i = 0; i < particleNum; i++) { particles.push(new Particle(i)); } drawScene(); console.log(ANIMATION);
}
(function init() { initCanvas(); window.addEventListener('resize', initCanvas, false); document.addEventListener('mousemove', function(e) { if(e.pageY <= 10 || e.pageY > window.innerHeight || e.pageX <= 10 || e.pageX > window.innerWidth ) { console.log('out'); particleStartY = h / 2; particleStartX = w / 2; } else { particleStartX = e.pageX; particleStartY = e.pageY; } });
})();
// Helper Functions
function rand(max, min, _int) { var max = (max === 0 || max) ? max: 1, min = min || 0, gen = min + (max -min) * Math.random(); return (_int) ? Math.round(gen) : gen;
}
Developer | Khangeldy |
Username | Khangeldy |
Uploaded | November 09, 2022 |
Rating | 3 |
Size | 2,352 Kb |
Views | 12,144 |
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!
Name | Size |
Ryu Hadouken | 1,981 Kb |
Loader | 1,559 Kb |
Water shader implement in three.js | 4,300 Kb |
Detect Facebook app in mobile devices | 1,819 Kb |
Trello canvas | 2,539 Kb |
Shadertoy in three.js | 4,402 Kb |
Canvas landing | 3,061 Kb |
Google map | 1,849 Kb |
Freecodecamp 1 | 0 Kb |
Tutorial greensock sprite animation | 1,854 Kb |
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!
Name | Username | Size |
React Vote Component | Souporserious | 5,465 Kb |
Page Transitions in Backbone | Mikefowler | 3,691 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Whyutils | LeYvan | 3,752 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!