The Rope with Youtubevideo

Developer
Christian Östman
Size
3,242 Kb
Views
24,288
  1. The Rope with Youtubevideo Previews
  2. The Rope with Youtubevideo HTML Codes
  3. The Rope with Youtubevideo CSS Codes
  4. The Rope with Youtubevideo JS Codes

How do I make an the rope with youtubevideo?

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

The Rope with Youtubevideo Previews
IQ Test

The Rope with Youtubevideo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Rope with Youtubevideo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<meta name = "viewport" content = "width = device-width" inital-scale=".6">
<body> <div class="card shadow"> </div>
<div class="card"> <iframe width="200 height="200" src="https://www.youtube.com/embed/q6T8B9dRtbE" frameborder="0" allowfullscreen></iframe>
</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 with Youtubevideo - Script Codes CSS Codes

body
{ background-color:#666666;
}
.card
{ z-index:10; left:0px; position:absolute; background-color:#000000; margin:0px; -webkit-transform-origin:50% 0%; /* Safari and Chrome */
}
.shadow
{ z-index:10; left:0px; position:absolute; width:200px; height:150px; background-color:#555; margin:20px;
}

The Rope with Youtubevideo - 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 shadow;
var card;
var mouseDown = false;;
window.onmousemove = function(event)
{ if(mouseDown) { target.x = event.clientX; target.y = event.clientY; }
}
window.onmousedown = function(event) { mouseDown = true; target.x = event.clientX; target.y = event.clientY; } window.onmouseup = function(event) { mouseDown = false; } 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); shadow = paper.path(pathStr);
shadow.translate(10,0) path.attr({stroke: "#000000", "stroke-width": 3, "stroke-linecap": "round"}), setInterval(render,1000/60) 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); shadow.attr({path:pathStr,"stroke-width":5,stroke: "#555", fill: "none"}); shadow.toBack();
} 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-2]; var dy = py[NUM_JOINTS] - py[NUM_JOINTS-2]; card.css({left:px[NUM_JOINTS] - 100,top:py[NUM_JOINTS]}) card.css({ '-webkit-transform': 'rotate(' + -(Math.atan2(dx,dy)*(180/Math.PI)) + 'deg)'});	}
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 with Youtubevideo - Script Codes
The Rope with Youtubevideo - Script Codes
Home Page Home
Developer Christian Östman
Username chribbe
Uploaded September 11, 2022
Rating 4
Size 3,242 Kb
Views 24,288
Do you need developer help for The Rope with Youtubevideo?

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
Fire particles PIXI
The pigs
Create JS Template
Animated SVG Worm
Random 3D Landscape - camping trip
A Small Island with sheep
The Rope
Animated SVG Snail 1
The Fish
A Small Island
Create amazing Facebook ads 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!