var Engine = Matter.Engine,

    Render = Matter.Render,

    World = Matter.World,

    Bodies = Matter.Bodies,

    Body = Matter.Body,

    Constraint = Matter.Constraint,

    Mouse = Matter.Mouse,

    MouseConstraint = Matter.MouseConstraint;

​

function setup() {

}

function draw(){

}

​

// Create engine and world

var engine = Engine.create(),

    world = engine.world;

​

engine.positionIterations =  25 // default 6

engine.velocityIterations =   25 // default 4

​

// Create renderer

var render = Render.create({

    element: document.body,

    engine: engine,

    options: {

        width: 600,

        height: 600,

        wireframes: false,

        showAngleIndicator: true,

        showCollisions: true,

        showVelocity: true

    }

});

// Add walls

var ground = Bodies.rectangle(400, 610, 810, 60, 

                              { isStatic: true,

                              }),

    leftWall = Bodies.rectangle(-10, 300, 60, 600, { isStatic: true }),

    rightWall = Bodies.rectangle(610, 300, 60, 600, { isStatic: true }),

    ceiling = Bodies.rectangle(400, -10, 800, 60, { isStatic: true });

​

World.add(world, [ground, leftWall, rightWall, ceiling]);

​

// Create rectangles

​

var masses = [];

​

for (var i = 0 ; i < 5; i ++) {

  masses.push(Bodies.rectangle(350,100, 50, 50, { mass : i**i }))

}

​

var bigMass = Bodies.rectangle(350,100, 50, 50, { mass : 2.1 }),

    rectangleA = Bodies.rectangle(300,        200, 220, 10),

    rectangleB = Bodies.rectangle(300,        250, 220, 10),

    rectangleC = Bodies.rectangle(300,        300, 220, 10);

​

​

var linkAtoB = Constraint.create({

    bodyA: rectangleA,

    pointA: { x: 110, y: 5 },

    bodyB: rectangleB,

    pointB: { x: 110, y: -5 },

    stiffness: 0.5,

    length: 0,

});

​

var linkBtoC = Constraint.create({

    bodyA: rectangleB,

    pointA: { x: -110, y: 5 },

    bodyB: rectangleC,

    pointB: { x: -110, y: -5 },

    stiffness: 0.5,

    length: 0,

});

​

​

// Adjusting spring AD to connect specific points on rectangleA and rectangleB

var springAD = Constraint.create({

    bodyA: rectangleA,

    pointA: { x: -60, y: 5 }, // Left middle point of rectangleA

    bodyB: rectangleB,

    pointB: { x: -80, y: -5 }, // Right middle point of rectangleB

    length: 100,

    stiffness: 0.1

});

​

// Adjusting spring CF to connect specific points on rectangleB and rectangleC

var springCF = Constraint.create({

    bodyA: rectangleB,

    pointA: { x: 80, y: 5 }, // Left middle point of rectangleB

    bodyB: rectangleC,

    pointB: { x: 60, y: -5 }, // Right middle point of rectangleC

    length: 100,

    stiffness: 0.1

});

​

​

​

// Function to create N linked rectangles

function createLinkedRectangles(N) {

    var rectangles = [];

    var links = [];

    var springs = [];

​

    var startY = 150; // Starting Y coordinate

    var posX = 350;

    var gap = 50; // Gap between rectangles

    var rectangleWidth = 220;

    var half_width = rectangleWidth /2 ;

    var rectangleHeight = 10;

    // flat side

    var spring_attach1 = half_width*.5

    // diagonal side

    var spring_attach2 = half_width*.7

    var spring_length = 80;

​

    // Create N rectangles

    for (var i = 0; i < N; i++) {

        var rectangle = Bodies.rectangle(posX, startY + i * gap, rectangleWidth, rectangleHeight);

        rectangles.push(rectangle);

    }

​

    // Create links and springs between rectangles

    for (var i = 0; i < N - 1; i++) {

        var link = Constraint.create({

            bodyA: rectangles[i],

            pointA: { x: (i % 2 === 0 ? half_width : -half_width), y: rectangleHeight/2 },

            bodyB: rectangles[i + 1],

            pointB: { x: (i % 2 === 0 ? half_width : -half_width), y: -rectangleHeight/2 },

            stiffness: 0.3,

            length: 0,

        });

        links.push(link);

​

        if (i < N - 1) { // Avoid creating a spring beyond the last pair

            var spring = Constraint.create({

                bodyA: rectangles[i],

                pointA: { x: (i % 2 === 0 ? -spring_attach2 : spring_attach1), y: rectangleHeight/2 },

                bodyB: rectangles[i + 1],

                pointB: { x: (i % 2 === 0 ? -spring_attach1 : spring_attach2), y: -rectangleHeight/2 },

                length: spring_length,

                stiffness: 0.05 * (1+ ((1+i)/ N))

            });

            springs.push(spring);

            console.log(i, spring.stiffness)

        }

    }

​

    return {

        rectangles: rectangles,

        links: links,

        springs: springs

    };

}

​

// Example usage for N rectangles

var N = 6; // Specify the number of rectangles you want

var linkedRectangles = createLinkedRectangles(N);

​

// Add bodies and constraints to the world

World.add(world, [...masses, 

                  rectangleA, 

                  rectangleB, 

                  rectangleC, 

                  linkAtoB,

                  linkBtoC,

                  springAD, 

                  springCF,

                  ...linkedRectangles.rectangles,

                  ...linkedRectangles.springs,

                  ...linkedRectangles.links,

                 ]);

​

// Add Mouse Control to make the object draggable

var mouse = Mouse.create(render.canvas),

    mouseConstraint = MouseConstraint.create(engine, {

        mouse: mouse,

        constraint: {

            stiffness: 0.2,

            render: {

                visible: true

            }

        }

    });

​

World.add(world, mouseConstraint);

​

​

​

​

// Keep the mouse in sync with rendering

render.mouse = mouse;

​

// Run the engine and renderer

Matter.Runner.run(engine)

Render.run(render);

​

​

var slider = document.getElementById('springADLength');

    slider.oninput = function() {

    springAD.length = parseInt(this.value) 

    springCF.length = parseInt(this.value) 

    }

​

​

​