verlet 1

by Mladen Mihajlovic

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {



var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var points = [];
var constraints = [];

var numPoints = 10;
var pointRadius = 5;
var pointMass = 1;
var pointFriction = 0.99;
var constraintLength = 50;
var constraintStiffness = 0.5;

var gravity = 0.01;

var mouseX = 0;
var mouseY = 0;
var mouseDown = false;

var mousePoint = null;

function init() {
  for (var i = 0; i < numPoints; i++) {
    var point = {
      x: canvas.width / 2,
      y: canvas.height / 2 + i * constraintLength,
      vx: 0,
      vy: 0,
      mass: pointMass
    };
    points.push(point);
  }

  for (var i = 0; i < numPoints - 1; i++) {
    var constraint = {
      p1: points[i],
      p2: points[i + 1],
      length: constraintLength,
      stiffness: constraintStiffness
    };
    constraints.push(constraint);
  }

  canvas.addEventListener('mousemove', function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  canvas.addEventListener('mousedown', function(e) {
    mouseDown = true;
    mousePoint = points[0];
  });

  canvas.addEventListener('mouseup', function(e) {
    mouseDown = false;
    mousePoint = null;
  });
}

function update() {
  if (mouseDown) {
    mousePoint.x = mouseX;
    mousePoint.y = mouseY;
  }

  for (var i = 0; i < points.length; i++) {
    var point = points[i];
    point.vy += gravity;
    point.x += point.vx;
    point.y += point.vy;
    point.vx *= pointFriction;
    point.vy *= pointFriction;
  }

  for (var i = 0; i < constraints.length; i++) {
    var constraint = constraints[i];
    var dx = constraint.p2.x - constraint.p1.x;
    var dy = constraint.p2.y - constraint.p1.y;
    var dist = Math.sqrt(dx * dx + dy * dy);
    var diff = (constraint.length - dist) / dist;
    var px = dx * diff * 0.5;
    var py...