The Rope

Size
2,886 Kb
Views
28,336

How do I make an the rope?

Simple ropephysics rendered with Raphael.JS, also works on iOS. What is a the rope? How do you make a the rope? This script and codes were developed by Christian Östman on 11 September 2022, Sunday.

The Rope Previews

The Rope - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Rope</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<meta name = "viewport" content = "width = device-width" inital-scale=".6">
<body>
<div id="card"> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The Rope - Script Codes CSS Codes

body
{ background-color:#666666;
}

The Rope - Script Codes JS Codes

var GRAVITY = {x:0,y:12};
var FRICTION = {x:0.94,y:0.91};
var NUM_JOINTS = 12;
var DISTANCE = 1.2;
var WEIGHT = 6;
var target = {x:220,y:0}
//Arrays
var px = new Array();
var py = new Array();
var oldx = new Array();
var oldy = new Array();
var ax = new Array();
var ay = new Array();
// rendering
var paper;
var path;
var rect;
var card;
window.onmousemove = function(event)
{ target.x = event.clientX; target.y = event.clientY;
} window.ontouchmove = function(event) { target.x = event.touches[0].pageX; target.y = event.touches[0].pageY; event.preventDefault(); }
window.onload = function() { createRope();
// Creates canvas 320 × 200 at 10, 50
paper = Raphael(0, 0, 1000, 800); var pathStr = "M10 10"; path = paper.path(pathStr); path.attr({stroke: "#000000", "stroke-width": 3, "stroke-linecap": "round"}), setInterval(render,1000/60) rect = paper.rect(5, 5, 40, 40, 3); rect.attr({fill:"#ffd614"}); card = $("#card"); } function collideRope()
{	for (var i = 0; i < NUM_JOINTS; i++)	{	if(py[i] > 250)	//set border limit	py[i] = 250;	}
}
function render()
{	updateRope();	//handels with both the gravity and weight force	//	collideRope();	//handels collisions with the ground	//attach first point to the mouse x and y position	px[0] = target.x;	py[0] = target.y; var pathStr = "M" + target.x + " " + target.y; for(var j = 0; j <=NUM_JOINTS; j++) { pathStr += "L" + px[j]; pathStr += " " + py[j]; } path.attr("path",pathStr);
} function updateRope()	{ // FORCE	for (var i = 1; i <= NUM_JOINTS; i++) {	py[i] += (GRAVITY.y * 1/36);	px[i] += (GRAVITY.x * 1/36);	} // FRICTION	for (var i = 0; i <= NUM_JOINTS; i++) {	var previousx = px[i];	var previousy = py[i];	px[i] += (px[i] - oldx[i]) * FRICTION.x;	py[i] += (py[i] - oldy[i]) * FRICTION.y;	oldx[i] = previousx;	oldy[i] = previousy;	}	py[NUM_JOINTS] += (WEIGHT * 1/36); // TENSION var jointDistance = DISTANCE / NUM_JOINTS;	for (var i = 1; i <= NUM_JOINTS; i++) {	var dx = (px[i] - px[i - 1]) / 100;	var dy = (py[i] - py[i - 1]) / 100;	var d = Math.sqrt((dx * dx) + (dy * dy));	var force = d - jointDistance;	ax[i] = (dx / d) * 0.5 * 100 * force;	ay[i] = (dy / d) * 0.5 * 100 * force;	px[i] -= ax[i];	py[i] -= ay[i];	px[i - 1] += ax[i];	py[i - 1] += ay[i];	} var dx = px[NUM_JOINTS] - px[NUM_JOINTS-1]; var dy = py[NUM_JOINTS] - py[NUM_JOINTS-1]; rect.attr({x:px[NUM_JOINTS] - 25,y:py[NUM_JOINTS],transform:"r" +-(Math.atan2(dx,dy)*(180/Math.PI)) })	//position equals last join card.css({left:px[NUM_JOINTS] - 100,top:py[NUM_JOINTS]})	}
function createRope()
{	for (var i = 0; i <= NUM_JOINTS; i++)	{	px[i] = 0;	py[i] = 0;	oldx[i] = 0;	oldy[i] = 0;	ax[i] = 0;	ay[i] = 0;	}
}
The Rope - Script Codes
The Rope - Script Codes
Home Page Home
Developer Christian Östman
Username chribbe
Uploaded September 11, 2022
Rating 3.5
Size 2,886 Kb
Views 28,336
Do you need developer help for The Rope?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian Östman (chribbe) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!