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 - Diffuse | 3,283 Kb |
Simple Lighting Model | 3,365 Kb |
Basic Threejs Scene | 2,188 Kb |
Framebuffer - Texture Render | 2,402 Kb |
Pixijs.v3 Shader Example | 3,213 Kb |
Buggy Smoke | 3,213 Kb |
Pixijs.v3 Rendering Texture | 2,632 Kb |
Framebuffer - Final | 2,491 Kb |
Pixijs.v3 Basic Shader | 2,269 Kb |
ACM Drawing Practice | 1,802 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 |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Planet Awesome | Bartuc | 3,554 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 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!