Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Cloth Simulation
ID	6493555810238464
Created	9 years ago, 1455377065838
Updated	9 years ago, 1455457620618
Code	/* * Simple cloth-like simulation using verlet integration. * * Click on the cloth to move it around. * * You can change the variables below. Please note that the simulation takes place in * a Y-up coordinate system. * * Throughout the code, variables named x and y refer to position * in the simulation space. (Except after explicit conversion.) * * Variables named i and j refer to the index of the point. Or the * coordinates in the 2D array. * * To clarify concerns about this being a copy or adaption of a different entry here * it is not. The code is my original creation, although the technique isn't anything * new. Just Google for Verlet cloth simulation, and you'll find plenty of links to * research information. * Feel free to compare it to other entries, and you'll see that the code is nothing * alike the others. / // Render configuration var unitScale = 250; // In pixels/meter var canvasPaddingX = 100; // In pixels var canvasPaddingY = 100; // In pixels var targetFrameRate = 60; // In frames/second // Simulation configuration var clothWidth = 12; // In cloth points var clothHeight = 16; // In cloth points var pointSize = 0.075; // In meters var massFactor = 0.75; // In kg/m^2 var gravityX = 0.0; // In Newton or kgmeters/second^2 var gravityY = -9.8; // In Newton or kgmeters/second^2 var simulationTime = 1.0 / targetFrameRate; // In seconds // Used internally for calculations var pointMass = (pointSize pointSize) * massFactor; // In kg // Class for storing point data var Point = function (x, y, isStatic) { this.x = this.prevX = x; this.y = this.prevY = y; this.isStatic = isStatic; }; // Class for storing a constraint var Constraint = function (pointRef1, pointRef2, goalDistance) { this.point1 = pointRef1; this.point2 = pointRef2; this.dist = goalDistance; }; // Arrays of point data. Point (i, j) is stored at point[j * clothWidth + i]. var points = []; var constraints = []; // Temporary point for dragging nodes var mousePoint = null; // Forward declare some function variables var load, simulate, draw; var simulatePositions, simulateConstraints; var updateMouseNode; var drawPoints, drawConstraints; var initPointData, initConstraintData; // Utilities to convert from simulation to world space and back var simToWorldSpace = function (x, y, outObj) { outObj.x = canvasPaddingX + x * unitScale; outObj.y = height - canvasPaddingY - y * unitScale; }; var worldToSimSpace = function (x, y, outObj) { outObj.x = (x - canvasPaddingX) / unitScale; outObj.y = (height - canvasPaddingY - y) / unitScale; }; load = function () { initPointData(); initConstraintData(); frameRate(targetFrameRate); }; draw = function() { background(0, 0, 0); updateMouseNode(); simulate(); drawConstraints(); //drawPoints(); }; simulate = function () { simulateConstraints(); simulatePositions(); }; simulateConstraints = function () { for (var idx = 0; idx < constraints.length; idx++) { var c = constraints[idx]; var deltaX = c.point1.x - c.point2.x; var deltaY = c.point1.y - c.point2.y; var sqrDist = deltaX * deltaX + deltaY * deltaY; if (sqrDist > c.dist * c.dist) { var dist = sqrt(sqrDist); var deltaDist = dist - c.dist; var distRatio = deltaDist / dist * 0.50; var oldPoint1X = c.point1.x; var oldPoint1Y = c.point1.y; c.point1.x = c.point1.x * (1.0 - distRatio) + c.point2.x * distRatio; c.point1.y = c.point1.y * (1.0 - distRatio) + c.point2.y * distRatio; c.point2.x = c.point2.x * (1.0 - distRatio) + oldPoint1X * distRatio; c.point2.y = c.point2.y * (1.0 - distRatio) + oldPoint1Y * distRatio; } } }; simulatePositions = function () { // Update positions for (var idx = 0; idx < points.length; idx++) { var point = points[idx]; if (point.isStatic) { point.x = point.prevX; point.y = point.prevY; continue; } var prevX = point.x; var prevY = point.y; point.x = 2 * point.x - point.prevX + gravityX * simulationTime * pointMass; point.y = 2 * point.y - point.prevY + gravityY * simulationTime * pointMass; point.prevX = prevX; point.prevY = prevY; } }; updateMouseNode = function () { if (!mouseIsPressed) { // No longer clicking, remove mouse point and constraint if (mousePoint) { mousePoint = null; constraints.pop(); } return; } var mousePos = { x: 0.0, y: 0.0 }; worldToSimSpace(mouseX, mouseY, mousePos); // New click, set up mouse point and constraint if (!mousePoint) { // Find nearest point var nearestIdx = -1; var nearestSqrDist = 0; for (var idx = 0; idx < points.length; idx++) { var point = points[idx]; var deltaX = point.x - mousePos.x; var deltaY = point.y - mousePos.y; var sqrDist = deltaX * deltaX + deltaY * deltaY; if ((idx === 0) \|\| (sqrDist < nearestSqrDist)) { nearestIdx = idx; nearestSqrDist = sqrDist; } } mousePoint = new Point(mousePos.x, mousePos.y, true); constraints.push(new Constraint(mousePoint, points[nearestIdx], 0)); } else { mousePoint.x = mousePoint.xPrev = mousePos.x; mousePoint.y = mousePoint.yPrev = mousePos.y; } }; drawPoints = function () { var renderPos = { x: 0, y: 0 }; if (mousePoint) { simToWorldSpace(mousePoint.x, mousePoint.y, renderPos); stroke(64, 192, 64); strokeWeight(7); point(renderPos.x, renderPos.y); } stroke(64, 64, 192); strokeWeight(4); for (var idx = 0; idx < points.length; idx++) { simToWorldSpace(points[idx].x, points[idx].y, renderPos); point(renderPos.x, renderPos.y); } }; drawConstraints = function () { var renderPos1 = { x: 0, y: 0 }; var renderPos2 = { x: 0, y: 0 }; stroke(192, 64, 64); strokeWeight(2); for (var idx = 0; idx < constraints.length; idx++) { var c = constraints[idx]; simToWorldSpace(c.point1.x, c.point1.y, renderPos1); simToWorldSpace(c.point2.x, c.point2.y, renderPos2); line(renderPos1.x, renderPos1.y, renderPos2.x, renderPos2.y); } }; initPointData = function () { // Loops over each point rows first, then columns // and each point to the point arrays. for (var j = 0; j < clothHeight; j++) { for (var i = 0; i < clothWidth; i++) { points.push(new Point(pointSize * i, pointSize * j, false)); } } // Set the top row to be static for (var idx = (clothHeight - 1) * clothWidth; idx < clothHeight * clothWidth; idx++) { points[idx].isStatic = true; } }; initConstraintData = function () { // Sets up constraints between two points var dist = pointSize; for (var j = 0; j < clothHeight; j++) { for (var i = 0; i < clothWidth; i++) { // Horizontal constraint if (i > 0) { constraints.push(new Constraint(points[j * clothWidth + (i - 1)], points[j * clothWidth + i], dist)); } // Vertical constraint if (j > 0) { constraints.push(new Constraint(points[(j - 1) * clothWidth + i], points[j * clothWidth + i], dist)); } } } }; load();
Folds	41,45,48,52,69,72,73,76,78,82,84,90,92,95,97,115,116,133,135,171,173,188,189,200,202,215,216,231
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJi7rLvECww
Votes	266
Spin-Offs	13
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Aidiakapi
Author Name	Aidiakapi
Author ID	kaid_607779491293615281646846
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739458591019
Updated	8 months ago, 1744845418704
Source Deleted	unknown