Newton's Cradle

The classic Newton's Cradle experiment replicated with the Matter.js physics engine.More Matter.js examples on CodePen: What is a newton's cradle How do you make a newton's cradle? This script and codes were developed by Liabru on 04 November 2021, Thursday.

How do I make an newton's cradle?
  1. Newton's Cradle Previews
  2. Newton's Cradle HTML Codes
  3. Newton's Cradle CSS Codes
  4. Newton's Cradle JS Codes
Newton's Cradle Previews

Newton's Cradle HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Newton's Cradle</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- 

Matter.js - Newton's Cradle Example
http://brm.io/matter-js/

-->
  <script src='http://cdn.rawgit.com/liabru/matter-js/d727e8601e689a3aeffd386d6ede3a16243563da/build/matter.js'></script>
<script src='http://cdn.rawgit.com/liabru/matter-tools/0735205dcfc3b07381ea00c1b852e3e1ec7179b4/build/matter-tools.demo.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Newton's Cradle CSS Codes

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Newton's Cradle JS Codes

// Matter.js - http://brm.io/matter-js/

var Example = Example || {};

Example.newtonsCradle = function() {
    var Engine = Matter.Engine,
        Render = Matter.Render,
        Runner = Matter.Runner,
        Body = Matter.Body,
        Composites = Matter.Composites,
        MouseConstraint = Matter.MouseConstraint,
        Mouse = Matter.Mouse,
        World = Matter.World;

    // create engine
    var engine = Engine.create(),
        world = engine.world;

    // create renderer
    var render = Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: Math.min(document.documentElement.clientWidth, 800),
            height: Math.min(document.documentElement.clientHeight, 600),
            wireframes: false
        }
    });

    Render.run(render);

    // create runner
    var runner = Runner.create();
    Runner.run(runner, engine);

    // add bodies
    var cradle = Composites.newtonsCradle(280, 100, 5, 30, 200);
    World.add(world, cradle);
    Body.translate(cradle.bodies[0], { x: -180, y: -100 });
    
    cradle = Composites.newtonsCradle(280, 380, 7, 20, 140);
    World.add(world, cradle);
    Body.translate(cradle.bodies[0], { x: -140, y: -100 });

    // add mouse control
    var mouse = Mouse.create(render.canvas),
        mouseConstraint = MouseConstraint.create(engine, {
            mouse: mouse,
            constraint: {
                stiffness: 0.2,
                render: {
                    visible: false
                }
            }
        });

    World.add(world, mouseConstraint);

    // keep the mouse in sync with rendering
    render.mouse = mouse;

    // fit the render viewport to the scene
    Render.lookAt(render, {
        min: { x: 0, y: 50 },
        max: { x: 800, y: 600 }
    });

    // context for MatterTools.Demo
    return {
        engine: engine,
        runner: runner,
        render: render,
        canvas: render.canvas,
        stop: function() {
            Matter.Render.stop(render);
            Matter.Runner.stop(runner);
        }
    };
};

// create demo interface
// not required to use Matter.js

MatterTools.Demo.create({
  toolbar: {
    title: 'matter-js',
    url: 'https://github.com/liabru/matter-js',
    reset: true,
    source: true,
    fullscreen: true,
    exampleSelect: true
  },
  preventZoom: true,
  resetOnOrientation: true,
  examples: [
    {
      name: 'Newton\'s Cradle',
      id: 'newtonsCradle',
      init: Example.newtonsCradle,
      sourceLink: 'https://github.com/liabru/matter-js/blob/master/examples/newtonsCradle.js'
    }
  ]
});
Do you want hide your ip address?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.