Slow Motion Shatter

Developer
Dave Alger
Size
3,326 Kb
Views
32,384
  1. Slow Motion Shatter Previews
  2. Slow Motion Shatter HTML Codes
  3. Slow Motion Shatter CSS Codes
  4. Slow Motion Shatter JS Codes

How do I make an slow motion shatter?

What is a slow motion shatter? How do you make a slow motion shatter? This script and codes were developed by Dave Alger on 11 August 2022, Thursday.

Slow Motion Shatter Previews
IQ Test

Slow Motion Shatter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slow Motion Shatter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="stage"></canvas> <script src='https://davealger.com/apps/ring/js/physics/physicsjs-full-0.6.0.min.js'></script>
<script src='https://davealger.com/apps/ring/js/physics/x/tween.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slow Motion Shatter - Script Codes CSS Codes

#stage
{	display: block;	background: #fff;	border-bottom: 10px solid #94CA6B; /* prevent canvas selection */	-moz-user-select:none;	-webkit-user-select:none;	-o-user-select:none;	-ms-user-select:none;	-khtml-user-select:none;	user-select:none;
}

Slow Motion Shatter - Script Codes JS Codes

/**
props to wellcafinated for the awesome engine --
https://github.com/wellcaffeinated/PhysicsJS
**/
Physics({ timestep: 2 },function(world){ var viewWidth = (window.innerWidth - 20); var viewHeight = (window.innerHeight - 20); var viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight) ,edgeBounce ,renderer; // create a renderer renderer = Physics.renderer('canvas', { el: 'stage' ,width: viewWidth ,height: viewHeight }); // add the renderer world.add(renderer); // render on each step world.on('step', function () { world.render(); }); // constrain objects to these bounds edgeBounce = Physics.behavior('edge-collision-detection', { aabb: viewportBounds ,restitution: 0.2 ,cof: 0.8 }); // resize events window.addEventListener('resize', function () { var viewWidth = (window.innerWidth - 20); var viewHeight = (window.innerHeight - 20); renderer.el.width = viewWidth; renderer.el.height = viewHeight; viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight); // update the boundaries edgeBounce.setAABB(viewportBounds); }, true); // create some bodies	var ring = Physics.body('circle', { x: -20 ,y: viewHeight - 120 ,vx: 2.5 ,mass: 8 ,radius: 25 ,restitution: 0.99 ,angularVelocity: 0 ,label: 'ring' ,treatment: 'dynamic' ,styles: { fillStyle: '#CC2529' ,angleIndicator: '#CC2529' } }); // squares var squares = []; for ( var i = 0, l = 24; i < l; ++i ){	var col = (i == 0 || i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 6 || i == 11 || i == 12 || i == 17 || i == 19 || i == 20 || i == 21 || i == 22 ) ? "#396AB1" : "#dadada"; squares.push( Physics.body('rectangle', { width: 30 ,height: 30 ,x: (32 * (i / 6 | 0) + viewWidth - 30 * 8) - 475 ,y: 30 * (i % 6) + viewHeight - 30 * 6 + 15 ,vx: 0 ,cof: 0.99 ,restitution: 0.99 ,label: 'box' ,styles: { fillStyle: col ,angleIndicator: col } })); }	for ( var i = 0, l = 24; i < l; ++i ) {	var col = ( i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 6 || i == 9 || i == 12 || i == 15 || i == 19 || i == 20 || i == 21 || i == 22 || i == 23) ? "#396AB1" : "#dadada"; squares.push( Physics.body('rectangle', { width: 30 ,height: 30 ,x: (32 * (i / 6 | 0) + viewWidth - 30 * 8) - 300 ,y: 30 * (i % 6) + viewHeight - 30 * 6 + 15 ,vx: 0 ,cof: 0.99 ,restitution: 0.99 ,label: 'box' ,styles: { fillStyle: col ,angleIndicator: col } })); }	for ( var i = 0, l = 24; i < l; ++i ) {	var col = (i == 0 || i == 1 || i == 2 || i == 3 || i == 4 || i == 11 || i == 18 || i == 17 || i == 19 || i == 20 || i == 21 || i == 22 ) ? "#396AB1" : "#dadada"; squares.push( Physics.body('rectangle', { width: 30 ,height: 30 ,x: (32 * (i / 6 | 0) + viewWidth - 30 * 8) - 125 ,y: 30 * (i % 6) + viewHeight - 30 * 6 + 15 ,vx: 0 ,cof: 0.99 ,restitution: 0.99 ,label: 'box' ,styles: { fillStyle: col ,angleIndicator: col } })); }	for ( var i = 0, l = 24; i < l; ++i ) {	var col = (i == 0 || i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 6 || i == 8 || i == 11 || i == 12 || i == 14 || i == 17 || i == 18 || i == 23 ) ? "#396AB1" : "#dadada"; squares.push( Physics.body('rectangle', { width: 30 ,height: 30 ,x: (32 * (i / 6 | 0) + viewWidth - 30 * 8) + 50 ,y: 30 * (i % 6) + viewHeight - 30 * 6 + 15 ,vx: 0 ,cof: 0.99 ,restitution: 0.99 ,label: 'box' ,styles: { fillStyle: col ,angleIndicator: col } })); } world.add( squares ); setTimeout(function(){ world.add( ring ); }, 2500); // setup bullet time function bulletTime( active ){ // warp is the world warp factor. 0.03 is slowing the world down var warp = active === false ? 1 : 0.03 ,tween ; tween = new TWEEN.Tween( { warp: world.warp() } ) .to( { warp: warp }, 600 ) .easing( TWEEN.Easing.Quadratic.Out ) .onUpdate( function () { // set the world warp on every tween step world.warp( this.warp ); } ) .start() ; } // query to find a collision of the bullet var query = Physics.query({ $or: [ { bodyA: { label: 'ring' }, bodyB: { label: 'box' } } ,{ bodyB: { label: 'ring' }, bodyA: { label: 'box' } } ] }); // enter bullet time on first collision world.on('collisions:detected', function( data, e ){ // find the first collision of the bullet with a box var found = Physics.util.find( data.collisions, query ); if ( found ){ // enter bullet time bulletTime(); // ... for a few seconds setTimeout(function(){ bulletTime(false); }, 2000); // stop checking world.off(e.topic, e.handler); } }); // activate bullet time on pokes world.on({ 'interact:poke': function( pos ){ // activate bullet time bulletTime(); } ,'interact:release': function(){ // de-activate bullet time bulletTime(false); } }); // add things to the world world.add([	Physics.behavior('interactive', { el: renderer.el }) ,Physics.behavior('constant-acceleration') ,Physics.behavior('body-impulse-response') ,Physics.behavior('body-collision-detection') ,Physics.behavior('sweep-prune') ,edgeBounce ]); // subscribe to ticker to advance the simulation Physics.util.ticker.on(function( time ) { TWEEN.update(); world.step( time ); }); // start the ticker Physics.util.ticker.start();
});
Slow Motion Shatter - Script Codes
Slow Motion Shatter - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded August 11, 2022
Rating 4.5
Size 3,326 Kb
Views 32,384
Do you need developer help for Slow Motion Shatter?

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!

Dave Alger (run-time) Script Codes
Name
Simple Yin Yang
The Ultimate Canvas Compression
ASCII Tree Logo
03 - CSS Variables
JavaScript water droplet effect
Easy to understand paginator
Download Speed Calculator
Editable Fire Text
JavaScript Fingerprint
Basic FAQ
Create amazing blog posts 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!