A silly contraption using a JavaScript physics engine

if (i < rectangles.length / 2)

< 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 >

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, 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 shelfCheck out these programming tutorials: