The Rope with Youtubevideo
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 - 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](http://shots.codepen.io/chribbe/pen/KkGrF-512.jpg)
Developer | Christian Östman |
Username | chribbe |
Uploaded | September 11, 2022 |
Rating | 4 |
Size | 3,242 Kb |
Views | 24,288 |
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!
Name | Size |
A Small Island | 6,555 Kb |
The Rope with Youtubevideo | 3,242 Kb |
Create JS Template | 2,018 Kb |
The Rope | 2,886 Kb |
Apartment life | 4,228 Kb |
Animated SVG Worm | 4,161 Kb |
Water Ripples - HtmlGL | 1,945 Kb |
The Fish | 1,919 Kb |
The Elevator Ball Pit | 9,247 Kb |
Workshop Start | 1,517 Kb |
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!
Name | Username | Size |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Loading... | Adamjacob | 2,384 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
404 Page | Saransh | 2,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!