Click on the picture above to add an object.

A silly contraption using a JavaScript physics engine


The experiment you're seeing above may be completely pointless, but it's an interesting 15-minutes coding exercise resulting in something fun to watch for 15 seconds.

If you're still reading this, you must have decided this ratio is acceptable, so let's analyze the code.

We're using the great Matter.js physics engine. While the code below is pretty much self-explanatory, you can read about the basic setup if you want more details. Lines [1-20] are just the standard boilerplate for Matter.js.
[26-45] the main animation functions that spins the rectangles [21-26] and moves the shelves up [28-32] or down [33-36] if it reached the top.

[29-30] determine the direction of the spin (clockwise vs counterclockwise). It would have been simpler to do just if (i < rectangles.length / 2), but that won't work if you increase the number of rows of spinning rectangles (try changing 4 to 6 in [65]).
[47-55] add a new circle or square (50% chance each) if the screen is clicked.
[57-91] create the world:
[57-64] the horizontal shelves
[65-74] the spinning rectangles
[79-83] the tile that allows the objects to slide onto the shelves
[84-86] the tall vertical wall
[87-89] the slanted tile that pushes the objects off the shelf




<html>
<body>
<script src = 'matter.min.js'> </script> 
<script>
let Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;
let engine = Engine.create();
let render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    wireframes: false
  }
});
let world = engine.world;
Engine.run(engine);
Render.run(render);
 
const width = 50,
  height = 10,
  gap = 100;
 
function animate() {
  let direction;
  for (let i = 0; i < rectangles.length; i++) {
    if (Math.floor(i / 20) % 2) direction = -1;
    else direction = 1;
    Body.rotate(rectangles[i], direction * .05)
  };
 
  for (let i = 0; i < shelves.length; i++) {
    Body.translate(shelves[i], {
      x: 0,
      y: -1
    });
    if (shelves[i].position.y < 0) Body.translate(shelves[i], {
      x: 0,
      y: 600
    });
  }
  window.requestAnimationFrame(animate);
}
 
let canvas = document.getElementById('myCanvas');
canvas.onclick = function() {
  let object;
  if (Math.random() > .5)
    object = Bodies.circle(200, 0, 20)
  else
    object = Bodies.rectangle(200, 0, 30, 30);
  World.add(engine.world, object);
}
 
const rectangles = [];
let shelves = [];
for (let i = 0; i < 4; i++) {
  rectangle = Bodies.rectangle(50, i * 150, width, height, {
    isStatic: true
  });
  shelves.push(rectangle);
}
for (let rows = 2; rows < 4; rows++)
  for (let i = 2; i < 12; i++) {
    let rectangle = Bodies.rectangle(i * width + gap * (rows % 2), rows * gap, width, height, {
      isStatic: true
    });
    let rectangle2 = Bodies.rectangle(i * width + gap * (rows % 2), rows * gap, height, width, {
      isStatic: true
    });
    rectangles.push(rectangle, rectangle2);
  }
 
World.add(world, shelves);
World.add(engine.world, rectangles);
 
World.add(engine.world, [
  Bodies.rectangle(125, 520, 100, 10, {
    isStatic: true,
    angle: -Math.PI * 0.14
  }),
  Bodies.rectangle(20, 300, 10, 600, {
    isStatic: true
  }),
  Bodies.rectangle(65, 100, 100, 10, {
    isStatic: true,
    angle: -Math.PI * 0.14
  }),
]);
 
window.requestAnimationFrame(animate);
 
</script></body></html>



Check out these programming tutorials:

JavaScript:

Optical illusion (18 lines)

Spinning squares - visual effect (25 lines)

Oldschool fire effect (20 lines)

Fireworks (60 lines)

Animated fractal (32 lines)

Physics engine for beginners

Physics engine - interactive sandbox

Starfield (21 lines)

Yin Yang with a twist (4 circles and 20 lines)

Tile map editor (70 lines)

Sine scroller (30 lines)

Interactive animated sprites

Your first program in JavaScript: you need 5 minutes and a notepad


Fractals in Excel

Python in Blender 3d:

Domino effect (10 lines)


Wrecking ball effect (14 lines)

3d fractal in Blender Python