The Rope

Developer
Christian Östman
Size
2,886 Kb
Views
28,336
  1. The Rope Previews
  2. The Rope HTML Codes
  3. The Rope CSS Codes
  4. The Rope JS Codes

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
IQ Test

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
Name
The Elevator Ball Pit
Water Ripples - HtmlGL
A Small Island with sheep
A Small Island
Fire particles PIXI
Create JS Template
Animated SVG Worm
Random 3D Landscape - camping trip
Workshop Start
Animated SVG Snail 1
Create amazing sales emails 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!