Ball Demo
How do I make an ball demo?
What is a ball demo? How do you make a ball demo? This script and codes were developed by Omar Shehata on 13 August 2022, Saturday.
Ball Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ball Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas"/> <script src="js/index.js"></script>
</body>
</html>
Ball Demo - Script Codes CSS Codes
body { margin: 0px;
}
Ball Demo - Script Codes JS Codes
//Obtain the canvas element
var canvas = document.getElementById("myCanvas");
//Set the width and height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//The context is what we will be drawing to
var ctx = canvas.getContext("2d");
//The properties of the ball
var X = 0;
var Y = 0;
var radius = 10;
window.ondevicemotion = function(event) { //Event listener for acceloremeter // var accelerationX = event.accelerationIncludingGravity.x; // var accelerationY = event.accelerationIncludingGravity.y; // var accelerationZ = event.accelerationIncludingGravity.z; // X += accelerationX * 4; // Y -= accelerationY * 4;
}
var acc = 0;
function Draw(){ //Clear the screen ctx.clearRect(0,0,canvas.width,canvas.height) //Make sure the ball doesn't leave the screen if(X < radius) X = radius; if(Y < radius) Y = radius; if(X > canvas.width-radius/2) X = canvas.width-radius; if(Y > canvas.height-radius/2) Y = canvas.height-radius; Y+=acc; acc++; if(Y > canvas.height-radius/2) acc = -15; //Draw a 360 degree arc, also known as a circle ctx.beginPath(); ctx.arc(X,Y,radius,0,2*Math.PI);//at X and Y ctx.fillStyle = "#FF0000"; ctx.fill();
}
setInterval(Draw,10);//Draw function gets called every 10 milliseconds
Developer | Omar Shehata |
Username | omarshe7ta |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 2,055 Kb |
Views | 22,264 |
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 |
Smoke Shader Algorithm Demo | 14,358 Kb |
Initial Scene | 2,545 Kb |
Cube Sides | 2,390 Kb |
Pixijs.v3 Rendering Texture | 2,632 Kb |
Pixijs.v3 Shader Example | 3,213 Kb |
Simple Lighting Model | 3,365 Kb |
Pixijs.v3 Basic Shader | 2,269 Kb |
Smoke Shader - Setup | 2,339 Kb |
Smoke Shader Complete | 3,451 Kb |
WebMonkey Test | 8,206 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 |
3D Text in Sass | Bookcasey | 2,766 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Android Logo with HTML and CSS | Wifi | 2,000 Kb |
Tester1 | Sasquatchbrawley | 2,001 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!