Crazy Ball

Developer
Ee Venn Soh
Size
2,767 Kb
Views
34,408
  1. Crazy Ball Previews
  2. Crazy Ball HTML Codes
  3. Crazy Ball CSS Codes
  4. Crazy Ball JS Codes

How do I make an crazy ball?

Canvas. What is a crazy ball? How do you make a crazy ball? This script and codes were developed by Ee Venn Soh on 07 September 2022, Wednesday.

Crazy Ball Previews
IQ Test

Crazy Ball - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crazy Ball</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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-color: #000; height: 100%; width: 100%;
}
canvas{ display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="myCanvas"></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>

Crazy Ball - Script Codes CSS Codes

body{ overflow: hidden; background-color: #000; height: 100%; width: 100%;
}
canvas{ display: block;
}

Crazy Ball - Script Codes JS Codes

$(document).ready(function() { var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); // dimension canvasWidth = canvas.width(); canvasHeight = canvas.height(); // mouse mouseX = 0; mouseY = 0; // responsive $(window).resize(resizeCanvas); function resizeCanvas() { canvas.prop("width", $(window).get(0).innerWidth); canvas.prop("height", $(window).get(0).innerHeight); canvasWidth = canvas.width(); canvasHeight = canvas.height(); } resizeCanvas(); // mousedown $(window).mousemove(function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(window).mousedown(function(e) { mouseX = e.pageX + canvasWidth; mouseY = e.pageY + canvasHeight; }); // settings var particles = []; var noParticles = 50; // particle class function Particle() { this.x = canvasWidth / 2; this.y = canvasHeight / 2; this.particleRadius = 10 * Math.random(); this.vX = this.vY = 0.01 + (0.05 * Math.random()); this.aX = this.aY = -0.1 + (0.2 * Math.random()); this.angle = 0; this.radius = 50 + (150 * Math.random()); this.offset = { x: 0, y: 0 }; this.orbit = this.particleRadius * 0.5 + (this.particleRadius * 0.5 * Math.random()); }; // setting particles for (var i = 0; i < noParticles; i++) { var p = new Particle(); particles.push(p); }; // animation function animate() { context.fillStyle = "rgba(0,0,0,0.2)"; context.fillRect(0, 0, canvasWidth, canvasHeight); // loop through every particles for (var i = 0; i < noParticles; i++) { var particle = particles[i]; var posX = particle.x; var posY = particle.y; // Rotation particle.offset.x += particle.vX; particle.offset.y += particle.vY; // follow mouse particle.x += (mouseX - particle.x) * particle.vX; particle.y += (mouseY - particle.y) * particle.vY; // add velocity particle.x += particle.vX; particle.y += particle.vX; // add acceleration if (Math.abs(particle.vX) < 0.05) { particle.vX += particle.aX; }; if (Math.abs(particle.vY) < 0.05) { particle.vY += particle.aY; }; particle.angle += 5; if (particle.angle > 360) { particle.angle = 0; }; // boundary if (particle.x - particle.particleRadius < 100) { // particle.x = particle.particleRadius; particle.vX *= -1; particle.aX *= -1; } else if (particle.x + particle.particleRadius > canvasWidth - 100) { // particle.x = canvasWidth-particle.particleRadius; particle.vX *= -1; particle.aX *= -1; }; if (particle.y - particle.particleRadius < 100) { // particle.y = particle.particleRadius; particle.vY *= -1; particle.aY *= -1; } else if (particle.y + particle.particleRadius > canvasHeight - 100) { // particle.y = canvasHeight-particle.particleRadius; particle.vY *= -1; particle.aY *= -1; }; // draw context.beginPath(); context.fillStyle = "hsl(" + particle.angle + ", 100%, 70%)"; context.arc(posX, posY, particle.particleRadius, 0, Math.PI * 2, true); context.fill(); }; setTimeout(animate, 1000 / 100); }; animate();
});
Crazy Ball - Script Codes
Crazy Ball - Script Codes
Home Page Home
Developer Ee Venn Soh
Username vennsoh
Uploaded September 07, 2022
Rating 3.5
Size 2,767 Kb
Views 34,408
Do you need developer help for Crazy Ball?

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!

Ee Venn Soh (vennsoh) Script Codes
Name
Smiley Egg
UI
CSS Pattern
Blackout
Folding
Polygon Dodecahedron in CSS
A Pen by Ee Venn Soh
Meteor Rain
Create amazing SEO 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!