Bouncing Ball Animation

Developer
Bramus
Size
5,013 Kb
Views
50,600
  1. Bouncing Ball Animation Previews
  2. Bouncing Ball Animation HTML Codes
  3. Bouncing Ball Animation CSS Codes
  4. Bouncing Ball Animation JS Codes

How do I make an bouncing ball animation?

Explanation of a bouncing ball for use in one the courses I teach.Visualized using Choc — http://www.fullstack.io/choc/. What is a bouncing ball animation? How do you make a bouncing ball animation? This script and codes were developed by Bramus on 23 July 2022, Saturday.

Bouncing Ball Animation Previews
IQ Test

Bouncing Ball Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncing Ball Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Bouncing Ball Animation</h1>
<p style="font-size: smaller">Built by <a href="http://www.bram.us/">Bramus!</a> using <a href="http://www.fullstack.io/choc/">Choc</a>.<br />Basic Choc setup taken from the <a href="http://jsfiddle.net/eigenjoy/YJSmZ/light/">Choc Bouncing Ball Example</a> <em>(not the same bouncing ball ;-))</em>.</p>
<!-- all HTML below is the same as the Choc Bouncing Ball Example -->
<link href='http://www.fullstack.io/choc/components/normalize-css/normalize.css' rel='stylesheet'>
<link href='http://www.fullstack.io/choc/components/codemirror/lib/codemirror.css' rel='stylesheet'>
<link href='http://www.fullstack.io/choc/components/components-foundation/css/foundation.min.css' rel='stylesheet'>
<link href='http://www.fullstack.io/choc/components/jquery-ui/themes/ui-lightness/jquery-ui.min.css' rel='stylesheet'>
<link href='http://www.fullstack.io/choc/styles/choc.css' rel='stylesheet'>
<link href='http://www.fullstack.io/choc/styles/choc-editor.css' rel='stylesheet'>
<script src='http://www.fullstack.io/choc/components/jquery/jquery.min.js'></script>
<script src='http://www.fullstack.io/choc/components/spin.js/dist/spin.min.js'></script>
<script src='http://www.fullstack.io/choc/components/components-foundation/js/foundation.min.js'></script>
<script src='http://www.fullstack.io/choc/components/codemirror/lib/codemirror.js'></script>
<script src='http://www.fullstack.io/choc/components/codemirror/mode/javascript/javascript.js'></script>
<script src='http://www.fullstack.io/choc/components/codemirror-interactive-numbers/dist/codemirror-interactive-numbers.browser.js'></script>
<script src='http://www.fullstack.io/choc/scripts/vendor/custom.modernizr.js'></script>
<script src='http://www.fullstack.io/choc/scripts/vendor/jquery-ui-1.10.3.custom.js'></script>
<script src='http://www.fullstack.io/choc/scripts/vendor/jquery.ui.touch-punch.min.js'></script>
<script src='http://www.fullstack.io/choc/scripts/vendor/two.js'></script>
<script src='http://www.fullstack.io/choc/components/choc/dist/choc.browser.js'></script>
<script src='http://www.fullstack.io/choc/scripts/choc/two-annotations.js'></script>
<div class='choc-wrapper'> <div class='canvas-container'> <div id='frameCanvas'></div> <div id='fader'></div> <div id='previewCanvas'></div> </div> <div class='canvas-editor' id='choc-editor-for-bouncing-ball'></div>
</div>
<div id='messages'></div> <script src="js/index.js"></script>
</body>
</html>

Bouncing Ball Animation - Script Codes CSS Codes

.choc-wrapper { padding: 2em;
}
.canvas-container { width: 60% !important;
}
.canvas-editor { margin-right: 60% !important;
}
#choc-editor-for-bouncing-ball .controls-container .slider-container { width: 70% !important;
}

Bouncing Ball Animation - Script Codes JS Codes

(function() { $(document).ready(function() { var choc, code, editor, framePad, geval, maxAnimationFrames, previewPad, twoOptions; choc = window.choc; geval = eval; code = "var animating = true,\n draw, ball, fillColor,\n \n // Height/diameter of our ball\n curPosX = ballHeight = 10,\n\n // Starting position of the ball\n startPosY = curPosY = -ballHeight,\n\n // X and Y acceleration of our ball \n accY = -4,\n accX = 10,\n\n // Y speed of our ball\n speedY = 0,\n\n // Damping to use. Set to 1 to have no damping\n damping = 0.7,\n\n // Ground level. Using 400 here because \"0,0\" is top,left - not bottom,left\n bottom = -400;\n\ndraw = function() {\n\n // Draw a line on the ground/baseline\n pad.makeLine(0, -bottom, 800, -bottom);\n\n if (animating) {\n // Increment speed with the acceleration.\n speedY += accY;\n\n // Upate Y position with speed. Speed will therefore increment exponentially\n curPosY += speedY;\n\n // Update X position in a linear fashion, to show the effect over time.\n curPosX += accX;\n }\n\n // If the ball is below the ground level, force it on the ground level\n // Also invert the speed so that the ball goes into the opposite direction it was going.\n // Finally take damping into account.\n if (curPosY < bottom + ballHeight/2) { \n\n // Draw a faulty ball\n var faulty = pad.makeEllipse(curPosX, -curPosY - ballHeight/2, ballHeight, ballHeight);\n faulty.fill = 'red';\n\n // Correct the position\n var diff = curPosY - bottom + ballHeight/2;\n curPosY = Math.max(bottom, bottom - diff) + ballHeight/2;\n fillColor = \"orange\"; // color to orange so that we know it was refitted\n\n // Inver the speed and take damping into account\n speedY = -speedY * damping;\n \n // if the speed is too low, stop animating\n if (Math.abs(speedY) < 3) {\n animating = false;\n }\n\n } else {\n\n fillColor = \"green\";\n\n }\n\n // Draw the ball\n ball = pad.makeEllipse(curPosX, -curPosY - ballHeight/2, ballHeight, ballHeight);\n ball.fill = fillColor;\n}\n"; twoOptions = { width: 800, height: 500, type: Two.Types.canvas }; framePad = new Two(twoOptions).appendTo(document.getElementById('frameCanvas')); previewPad = new Two(twoOptions).appendTo(document.getElementById('previewCanvas')); $("#fader").width(twoOptions.width).height(twoOptions.height); maxAnimationFrames = 100; editor = new choc.AnimationEditor({ $: $, id: "#choc-editor-for-bouncing-ball", code: code, beforeGeneratePreview: function() { return previewPad.clear(); }, afterGeneratePreview: function() { return previewPad.update(); }, animate: "draw", play: function() { var draw, updateFn; draw = geval("draw"); framePad.frameCount = 0; editor.start(); previewPad.clear(); updateFn = function(frameCount, timeDelta) { if (frameCount > maxAnimationFrames) { return editor.onPause(); } else { editor.onFrame(frameCount, timeDelta); return _.defer(function() { framePad.clear(); return draw(); }); } }; framePad.unbind(Two.Events.update); framePad.bind('update', updateFn); return framePad.play(); }, pause: function() { framePad.pause(); return framePad.unbind(Two.Events.update); }, maxAnimationFrames: maxAnimationFrames, locals: { pad: [framePad, previewPad] } }); return editor.start(); });
}).call(this);
Bouncing Ball Animation - Script Codes
Bouncing Ball Animation - Script Codes
Home Page Home
Developer Bramus
Username bramus
Uploaded July 23, 2022
Rating 3
Size 5,013 Kb
Views 50,600
Do you need developer help for Bouncing Ball Animation?

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!

Bramus (bramus) Script Codes
Name
Scroll Animations
CSS Glitch
Canvas multiline fillText
Pythagoras
Simple Flexbox Grid System
Scrolling Horizontal Isotope
Skrollr basic implementation, alternative
Photosphere Demo
Simplest CSS Slideshow
Skrollr basic implementation
Create amazing art & images 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!