Click for star burst

Developer
David Hartley
Size
2,868 Kb
Views
30,360
  1. Click for star burst Previews
  2. Click for star burst HTML Codes
  3. Click for star burst CSS Codes
  4. Click for star burst JS Codes

How do I make an click for star burst?

Star burst on click in canvas using pixi.js. What is a click for star burst? How do you make a click for star burst? This script and codes were developed by David Hartley on 18 November 2022, Friday.

Click for star burst Previews
IQ Test

Click for star burst - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Click for star burst</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ body { overflow: hidden; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167451/1797393.png) no-repeat center center fixed; background-size: cover; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="canvas">No HTML5 canvas support.</canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.0.0/pixi.js'></script> <script src="js/index.js"></script>
</body>
</html>

Click for star burst - Script Codes CSS Codes

body { overflow: hidden; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167451/1797393.png) no-repeat center center fixed; background-size: cover; text-align: center;
}

Click for star burst - Script Codes JS Codes

(function() { console.clear(); var stage = new PIXI.Stage(); var renderer = PIXI.autoDetectRecommendedRenderer(window.innerWidth, window.innerHeight, {view: document.getElementById("canvas"), transparent: true} ); var starTexture = PIXI.Texture.fromImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/167451/Feedbin-Icon-star.svg"); var colours = [ 0x3498db, // Blue 0x9b59b6, // Purple 0xf1c40f, // Yellow 0xd35400, // Orange 0xfA2323 // Red ]; var starPool = []; for (var i=0; i<20; i++) { var star = new PIXI.Sprite(starTexture); star.anchor.x = star.anchor.y = 0.5; star.visible = false; star.scaleDecay = 0; star.alphaDecay = 0; star.speed = 0; star.velocity = { x: 0, y: 0 }; starPool[i] = star; stage.addChild(star); } var starBurst = function(x, y) { var tint = colours[Math.floor(Math.random() * colours.length)]; for (var i=0; i<starPool.length; i++) { var star = starPool[i]; star.tint = tint; star.scale.x = star.scale.y = (Math.random() * 0.8) + 0.2; star.scaleDecay = (Math.random() * 0.05) + 0.05; star.alpha = (Math.random() * 0.2) + 0.8; star.alphaDecay = (Math.random() * 2) + 1; star.rotation = 2 * Math.random() * Math.PI; star.x = Math.cos(star.rotation) * 10 + x; star.y = Math.sin(star.rotation) * 10 + y; star.speed = (Math.random() * 30) + 20; star.velocity.x = star.speed * Math.cos(star.rotation); star.velocity.y = star.speed * Math.sin(star.rotation); star.visible = true; } }; var updateStars = function(delta) { for (var i=0; i<starPool.length; i++) { var star = starPool[i]; if (star.visible) { star.alpha -= star.alphaDecay * delta; star.scale.x -= star.scaleDecay * delta; star.scale.y -= star.scaleDecay * delta; star.x += star.velocity.x * delta; star.y += star.velocity.y * delta; if (star.alpha < 0 || star.scale.x < 0) { star.visible = false; } } } }; stage.mousedown = stage.touchstart = function(interactionData) { starBurst(interactionData.global.x, interactionData.global.y); }; var lastTime = null; var animate = function(timestamp) { if (lastTime === null) { lastTime = timestamp; } var delta = (timestamp - lastTime) / 1000; lastTime = timestamp; updateStars(delta); renderer.render(stage); requestAnimationFrame(animate); }; requestAnimationFrame(animate);
})();
Click for star burst - Script Codes
Click for star burst - Script Codes
Home Page Home
Developer David Hartley
Username davidhartley
Uploaded November 18, 2022
Rating 3
Size 2,868 Kb
Views 30,360
Do you need developer help for Click for star burst?

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!

David Hartley (davidhartley) Script Codes
Name
A Pen by David Hartley
PIXI.blendModes.ADD bug
Fire Emitter - remixed
Pixi.js Clouds Shader
PixiJS Shaders
SVG Retro Tile Pattern
Sunny
Generative Art
Paint Flick
Progress bars
Create amazing web content 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!