window.onload = () =>{ document.getElementById("loading").style.display = 'none'; document.getElementById("back").addEventListener('click', () =>{ document.getElementById("back").style.display = 'none' document.getElementById("c1").style.display = 'none' document.getElementById("c2").style.display = 'none' document.getElementById("c3").style.display = 'none' document.getElementById("c4").style.display = 'none' document.getElementById("c5").style.display = 'none' document.getElementById("c6").style.display = 'none' document.getElementById('body').style.overflow = 'auto' }) document.getElementById("image1").addEventListener('click', () =>{ fireWorks() }) document.getElementById("image2").addEventListener('click', () =>{ fingerFinder(); }) document.getElementById("image3").addEventListener('click', () =>{ alert("Hold"); star() }) document.getElementById("image4").addEventListener('click', () =>{ fish() }) document.getElementById("image5").addEventListener('click', () =>{ web() }) document.getElementById("image6").addEventListener('click', () =>{ circle() }) function fireWorks(){ // Get the canvas element and its context const canvas = document.getElementById('c1'); const c = canvas.getContext('2d'); canvas.style.display = 'block' document.getElementById("back").style.display = 'block' document.getElementById('body').style.overflow = 'hidden' // Set canvas size to match the window size canvas.width = innerWidth; canvas.height = innerHeight; // Initialize mouse position const mouse = { x: innerWidth / 2, y: innerHeight / 2 }; // Array of colors const colors = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF7F66']; // Define the number of particles and their speed let particle = 100; const speed = 8; // Event listener for mouse click to create particles canvas.addEventListener('click', (event) => { // Update mouse position mouse.x = event.clientX; mouse.y = event.clientY; // Create particles around mouse position for (let i = 0; i < particle; i++) { let angel = (Math.PI * 2) / particle; let vx = Math.cos(angel * i) * Math.random() * speed; let vy = Math.sin(angel * i) * Math.random() * speed; // Add particle object to objects array objects.push(new Object(mouse.x, mouse.y, 5, `hsl(${Math.random() * 360}, 50%, 50%)`, vx, vy, gravity)); } }); // Constants for physics simulation const gravity = 0.05; const backForce = 0.99; // Event listener for window resize to adjust canvas size addEventListener('resize', () => { canvas.width = innerWidth; canvas.height = innerHeight; init(); }); // Objects class to define particles class Object { constructor(x, y, radius, color, vx, vy, velocity) { // Initialize particle properties this.x = canvas.width / 2; this.y = 810; this.radius = radius; this.color = color; this.vx = vx; this.vy = vy; this.velocity = velocity; this.alpha = 1; this.timePassed = 0; this.explodeTime = 50; this.up = 5; this.diraction = 0; this.dist = 0; this.mouseX = mouse.x; this.mouseY = mouse.y; this.travel = 0; this.upSin = Math.sin(this.diraction) * this.up; this.upCos = Math.cos(this.diraction) * this.up; this.exploded = true; this.checkDiraction(); this.createdbysword = true; } // Method to calculate direction towards mouse checkDiraction() { let dy = mouse.y - this.y; let dx = mouse.x - this.x; this.diraction = Math.atan2(dx, dy); this.upSin = Math.sin(this.diraction) * this.up; this.upCos = Math.cos(this.diraction) * this.up; } // Method to draw the particle draw() { c.save(); c.globalAlpha = this.alpha; c.beginPath(); c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); c.fillStyle = this.color; c.fill(); c.closePath(); c.restore(); } // Method to update particle position and behavior update() { this.draw(); // Move particle towards mouse until reaching mouse's Y position if (this.y > this.mouseY && this.exploded) { this.y += this.upCos; this.x += this.upSin; } else { this.explode(); } } // Method to handle particle explosion explode() { this.alpha -= 0.005; this.x += this.vx; this.y += this.vy; this.velocity *= backForce; this.vy += this.velocity; this.exploded = false; } } // Array to hold particle objects let objects; // Function to initialize objects array function init() { objects = []; } // Animation loop function function createdbysword() { // Request animation frame requestAnimationFrame(createdbysword); // Clear canvas c.fillStyle = 'rgba(20, 20, 20, 0.1)'; c.fillRect(0, 0, canvas.width, canvas.height); // Update and draw each particle for (let i = 0; i < objects.length; i++) { objects[i].update(); // Remove particle from array if its alpha is less than or equal to 0 if (objects[i].alpha > 0) {} else { objects.splice(i, 1); } } } // Initialize objects array and start animation loop init(); createdbysword(); } function fingerFinder(){ const canvas = document.getElementById('c2'); const ctx = canvas.getContext('2d') ; canvas.style.display = 'block' document.getElementById("back").style.display = 'block' document.getElementById('body').style.overflow = 'hidden' canvas.height = window.innerHeight; canvas.width = window.innerWidth; let mouse = { x: canvas.width/2, y: canvas.height/2 } addEventListener("touchmove", click) addEventListener("touchstart", click) function click(event){ mouse.x = event.touches[0].clientX; mouse.y = event.touches[0].clientY; } class Particle{ constructor(){ this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.r = 1.5; this.color = `hsl(${Math.floor(Math.random() * 360)}, 50% ,50%)` this.vx = (Math.random() * 1 -0.5) * 5 this.vy = (Math.random() * 1 -0.5) * 5 this.time = 0 this.velocity = 2; this.diraction = 0; this.upSin; this.upCos; this.check = false; this.checkDiraction() } update(){ this.draw() if(this.time <= 0){ this.x += this.upSin ; this.y += this.upCos ; } else{ this.x += this.vx; this.y += this.vy; } this.time -= deltatime ; this.checkDiraction() } draw(){ ctx.beginPath() ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2) ctx.fillStyle = this.color; ctx.fill() } checkDiraction() { let dy = mouse.y - this.y; let dx = mouse.x - this.x; let dist = Math.hypot(dy, dx) this.diraction = Math.atan2(dx, dy) this.upSin = Math.sin(this.diraction) * this.velocity; this.upCos = Math.cos(this.diraction) * this.velocity; if(dist < 1){ /* this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height;*/ this.time = 3000; } } } let partile = [] function init(){ for(let i = 0; i < 400; i++){ partile.push(new Particle()) } } let deltatime = 0 let lastime = 0 function animate(timestamps){ deltatime = timestamps - lastime lastime = timestamps ; ctx.fillStyle = "rgba(0,0,0,0.1)" ctx.fillRect(0,0, canvas.width, canvas.height ) partile.forEach(e =>{ e.update() }) requestAnimationFrame(animate) if(document.getElementById('c2').style.display == 'none'){ partile = []; } } init() animate(0) } function star(){ const canvas = document.getElementById('c3') let c = canvas.getContext('2d') ; let deg = 0.01; canvas.style.display = 'block' document.getElementById("back").style.display = 'block' document.getElementById('body').style.overflow = 'hidden' canvas.width = 810 canvas.height = 810 const colors = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF7F66'] // Event Listeners let down =false; window.addEventListener("touchstart", createdbysword); window.addEventListener("touchend", touchend); function createdbysword (){ down = true ; } function touchend(){ down = false } // Objects class Object { constructor(x, y, radius, color) { this.x = x this.y = y this.radius = radius this.color = colors[Math.floor(Math.random() * colors.length )] } draw() { c.beginPath() c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false) c.shadowColor = this.color c.shadowBlur = 10 c.fillStyle = this.color c.fill() c.closePath() } update() { this.draw() } } // Implementation let objects function init() { objects = [] for (let i = 0; i < 400; i++) { let width = canvas.width ; let height = canvas.height ; let x = (Math.random() * width ) - canvas.width / 2 ; let y =( Math.random() * height ) - canvas.height / 2 ; let radious = Math.random()* 2 ; objects.push(new Object(x , y, radious, "blue")); } } let alpha = 1 // Animation Loop function animate() { requestAnimationFrame(animate) c.fillStyle = `rgba(0,0,0,${alpha})` c.fillRect(0, 0, canvas.width, canvas.height) if(canvas.style.display == 'none'){ objects = [] } c.save() c.translate(810 / 2, 810/2) c.rotate(deg) objects.forEach(object => { object.update() }) c.restore() deg += 0.005 if(down && alpha >= 0.1){ alpha -= 0.01; if(deg <= 0.05){ deg += 0.001; } } if(!down && alpha <= 1){ alpha += 0.01; if(deg >= 0.005){ deg -= 0.001 } } } init() animate() } function fish(){ const canvas = document.getElementById('c4') const c = canvas.getContext('2d') canvas.style.display = 'block' document.getElementById("back").style.display = 'block' document.getElementById('body').style.overflow = 'hidden' canvas.width = innerWidth canvas.height = innerHeight const mouse = { x: innerWidth / 2, y: innerHeight / 2 } const colors = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF7F66'] function randomPos(min, max){ return Math.random() * (max - min +1) + min } // Event Listeners window.addEventListener("touchmove", function (event){ mouse.x = event.touches[0].clientX; mouse.y = event.touches[0].clientY; //console.log(arrCircle.length) }) //created by sword addEventListener('resize', () => { canvas.width = innerWidth canvas.height = innerHeight init() }) // Objects class Object { constructor(x, y, radius, color) { this.x = x this.y = y this.radius = radius this.color = color this.redian = Math.random() * Math.PI *2 this.speed = Math.random() * (0.03 - 0.01) + 0.01; this.pos = randomPos(50, 100) this.createdbysword = 0 this.lasty = 0; this.update = () => { this.createdbysword = this.x this.lasty = this.y this.redian += this.speed; this.x = mouse.x + Math.cos(this.redian) * this.pos; this.y = mouse.y + Math.sin(this.redian ) * this.pos; this.draw() } } draw() { c.beginPath() c.strokeStyle = this.color c.lineWidth = this.radius c.moveTo(this.createdbysword, this.lasty) c.lineTo(this.x, this.y) c.stroke() c.closePath() } } // Implementation // createdbysword let objects function init() { objects = [] for (let i = 0; i < 300; i++) { let ran = Math.random() * 2 + 1 ; let col = colors[Math.floor(Math.random() * colors.length )] objects.push(new Object(200, 200, ran, col)) } } // Animation Loop function animate() { if(canvas.style.display == 'none'){ objects = [] } requestAnimationFrame(animate) c.fillStyle = "rgba(255,255,255,0.1)" c.fillRect(0, 0, canvas.width, canvas.height) objects.forEach(object => { object.update() }) } init() animate() } function web(){ const canvas = document.getElementById("c5"); const ctx = canvas.getContext('2d'); canvas.height = window.innerHeight;//height canvas.width = window.innerWidth;// width canvas.style.display = 'block' document.getElementById("back").style.display = 'block' document.getElementById('body').style.overflow = 'hidden' // finger move tracker let mouse ={ x: 50, y: 100 } //creating Particle on finger move class Particle{ constructor(eft){ this.effect = eft; this.r = Math.random() * 4 + 2;/// Particle random size this.x = mouse.x // finger postion x this.y = mouse.y // finger postion y this.vx = (Math.random() - 0.5) * 7 // random x velocity this.vy = (Math.random() - 0.5) * 7 // random y velocity this.style = `hsl(${Math.random() * 360}, 50%, 50%)`// random color this.opacity = 1;// alpha value of Particle } draw(c){ // function for draw particle c.save() c.beginPath() c.globalAlpha = this.opacity ; c.fillStyle = this.style c.arc(this.x, this.y, this.r, 0, Math.PI * 2) c.fill() c.restore() } update(){ this.opacity -= 0.03 // use for decrese alpha value this.x += this.vx; // moveing Particle on x axis this.y += this.vy; // moving Particle on y axis if(this.x < this.r){ /// function for checking if Particle is going outside of canvas this.x = this.r; this.vx *= -1; }else if(this.x > canvas.width - this.r){ this.x = canvas.width - this.r this.vx *= -1; } if(this.y < this.r){ this.y = this.r; this.vy *= -1; }else if(this.y > canvas.height - this.r){ this.y = canvas.height - this.r this.vy *= -1; } } } //created by sword class Effect{ constructor(canvas){ this.canvas = canvas; this.height = this.canvas.height; this.width = this.canvas.width; this.particleHolder = [] // Particle holder this.particleCount = 3;// Particle every finger movement } createParticle(){ // creating Particle on finger movement for(let i = 0; i < this.particleCount ;i++){ this.particleHolder.push(new Particle(this)); } } handleParticle(value){ // repearting Particle update and draw function in every frame so Particle can animate this.connect(value); for(let i = 0; i < this.particleHolder.length ; i++){ this.particleHolder[i].draw(value) this.particleHolder[i].update() ; if(this.particleHolder[i].opacity < 0.1){ this.particleHolder.splice(i, 1) } } } connect(c){ // adding line to one Particle to another particle const maxDist = 100; for(let a = 0; a < this.particleHolder.length; a++){ for(let b = a; b < this.particleHolder.length ; b++){ let dy = this.particleHolder[a].y - this.particleHolder[b].y; let dx = this.particleHolder[a].x - this.particleHolder[b].x; let dist = Math.hypot(dx, dy); if(dist < maxDist ){ c.save() let opacity = 1 - (dist/maxDist) c.globalAlpha = opacity c.beginPath(); c.strokeStyle = this.particleHolder[a].style c.moveTo(this.particleHolder[a].x, this.particleHolder[a].y) c.lineTo(this.particleHolder[b].x, this.particleHolder[b].y) ctx.stroke(); c.restore() } } } } } let touchStarted = false; let effect = new Effect(canvas); let histry = []; histry.push(effect.particleCount) let speed = 10; let vx = 3; let vy = 3; function createdBySword(){ // repearting animation loop ctx.clearRect(0,0,canvas.width, canvas.height ) effect.handleParticle(ctx) // ctx.fillText(effect.particleHolder.length , 100,100) if(!touchStarted){ mouseShape() } requestAnimationFrame(createdBySword) } createdBySword() function mouseShape(){ if(mouse.x == 50 && mouse.y == 100){ vx = speed; vy = 0 } if(mouse.x == 350 && mouse.y == 100){ vx = 0; vy = speed; } if(mouse.x == 350 && mouse.y == 700){ vx = -speed; vy = 0 } if(mouse.x == 50 && mouse.y == 700){ vx = 0; vy = -speed; } mouse.x += vx; mouse.y += vy; effect.createParticle() } function handleTouch(event) { //giving touch position mouse.x = event.touches[0].clientX; mouse.y = event.touches[0].clientY; touchStarted = true; effect.createParticle() } window.addEventListener("touchstart", handleTouch); window.addEventListener("touchmove", handleTouch); if(canvas.height < 810){ alert("restart the code") } } function circle(){ const canvas = document.getElementById("c6"); canvas.style.display = 'block' document.getElementById("back").style.display = 'block' document.getElementById('body').style.overflow = 'hidden' // Function to resize canvas to match window size function resizeCanvas() { canvas.height = window.innerHeight ; canvas.width = window.innerWidth ; } // Initial resize resizeCanvas(); let c = canvas.getContext('2d'); let point = { x: undefined, y: undefined }; let isTouchActive = false; // Flag to track touch/mouse activity let colorList = [ "#ffaa33", "#99ffaa", "#00ffaa", "#4411aa", "#ff1100" ]; function Circle(x, y, r) { this.x = x; this.y = y; this.r = r; this.color = colorList[Math.floor(Math.random() * colorList.length)]; this.draw = function () { c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.strokeStyle = this.color; c.stroke(); }; this.update = function () { c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2); c.strokeStyle = this.color; c.stroke(); this.r++; }; this.draw(); } let all = []; let r; function generate() { r = 0; all.push(new Circle(point.x, point.y, r)); } function animate() { requestAnimationFrame(animate); c.fillStyle = 'rgba(0,0,0,0.1)'; c.fillRect(0, 0, canvas.width, canvas.height); if (isTouchActive) { generate(); } for (let i = 0; i < all.length; i++) { all[i].update(); if (all[i].r > 100) { all.splice(i, 1); } } } function handleTouch(event) { isTouchActive = true; point.x = event.touches[0].clientX; point.y = event.touches[0].clientY; } function handleMouse(event) { event.preventDefault(); isTouchActive = true; point.x = event.clientX; point.y = event.clientY; } function handleEnd() { isTouchActive = false; point.x = undefined; point.y = undefined; } window.addEventListener("touchstart", handleTouch); window.addEventListener("touchmove", handleTouch); window.addEventListener("touchend", handleEnd); window.addEventListener("mousedown", handleMouse); window.addEventListener("mousemove", handleMouse); window.addEventListener("mouseup", handleEnd); // Event listener to resize canvas on window resize window.addEventListener("resize", resizeCanvas); animate(); } }

Effect Gallery 😖