var canvas = document.getElementById("scratch"); // canvas dimensions var width = parseInt(canvas.style.width); var height = parseInt(canvas.style.height); // retina var dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.getContext("2d").scale(dpr, dpr); // simulation var sim = new VerletJS(width, height, canvas); sim.friction = 1; // entities var segment = sim.lineSegments([new Vec2(20, 10), new Vec2(40, 10), new Vec2(60, 10), new Vec2(80, 10), new Vec2(100, 10)], 0.02); var pin = segment.pin(0); var pin = segment.pin(4); var tire1 = sim.tire(new Vec2(200, 50), 50, 30, 0.3, 0.9); var tire2 = sim.tire(new Vec2(400, 50), 70, 7, 0.1, 0.2); var tire3 = sim.tire(new Vec2(600, 50), 70, 3, 1, 1); // animation loop var loop = function () { sim.frame(16); sim.draw(); requestAnimFrame(loop); }; loop();
<canvas id="scratch" style="width: 800px; height: 250px; background: #000;"></canvas>