Viewing Program

Program Data

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

Title	Cut the rope with rope physics.
ID	6345828438376448
Created	11 years ago, 1394130942229
Updated	10 years ago, 1421622276319
Code	/** * A rope is made of multiple points connected via lines and each point only need * interact with the point directly before or ahead of it. One point being fixed at a * certain location means that all points will eventually all end up at at the x * location of the fixed point. * * Known bugs: * - A while after the cutting the rope, the rope may start freaking out and * expanding all across the screen. (Fixed I think) * - When cutting the rope when the rope isn't moving left or right, the dropping * animation isn't all that great. (Fixed I think) * - Rotation on the candy is crap. * * Controls: * - Hold shift and move your mouse to move the pin point * - Cut the rope by clicking near a part of the rope */ var externals; var ROPE_MAX_DISTANCE = 8; frameRate(60); imageMode(CENTER); var levels = []; var currentLevel = 0; var images = []; var canvas = ""; var keys = []; var keyPressed = function() { keys[keyCode] = true; if(keyCode === RIGHT) { levels[currentLevel].rope.points[levels[currentLevel].rope.points.length - 1].xVel = 100; } else if(keyCode === LEFT) { levels[currentLevel].rope.points[levels[currentLevel].rope.points.length - 1].xVel = -100; } }; var keyReleased = function() { keys[keyCode] = false; }; var drawImage = function(object, x, y, w, h, opacity) { if(object === undefined) { return; } if(object.content === undefined) { return; } var content = object.content; content.globalAlpha = opacity === undefined? 1.0 : opacity; content.drawImage(object.image, x, y, w, h); content.globalAlpha = 1.0; }; var Level = function(rope, omX, omY, airCushions) { this.rope = rope; this.omX = omX; this.omY = omY; this.handX = -250; this.handOut = false; this.drawRope = false; this.handCount = 0; this.airCushions = airCushions; this.ropeAlpha = 0.0; this.candyAlpha = 0.0; this.levelOver = false; this.levelOverCount = 0; this.drawLevel = function() { var lastNode = this.rope.points[this.rope.points.length - 1]; if(dist(lastNode.x, lastNode.y, 200, this.omY) >= 80) { drawImage(images[2], this.omX - 25, this.omY - 25, 50, 50); } else if(dist(lastNode.x, lastNode.y, 200, this.omY) >= 20) { drawImage(images[3], this.omX - 29, this.omY - 25, 56, 52); } else { drawImage(images[3], this.omX - 29, this.omY - 25, 56, 52); this.candyAlpha = 0; this.levelOver = true; } for(var index in this.airCushions) { this.airCushions[index].draw(); } if(this.drawRope) { this.rope.applyPhysics(); this.rope.draw(); if(this.ropeAlpha < 1.0 && this.candyAlpha < 1.0 && !this.levelOver) { this.ropeAlpha = min(this.ropeAlpha + 0.075, 1.0); this.candyAlpha = min(this.candyAlpha + 0.075, 1.0); } if(this.levelOver) { this.ropeAlpha = max(this.ropeAlpha - 0.075, 0.0); //this.candyAlpha = max(this.candyAlpha - 0.075, 0.0); } } if(this.levelOver) { this.levelOverCount++; } if(!this.handOut) { this.handX += 5; if(this.handX === rope.x - 210) { this.handOut = true; this.drawRope = true; } } else { this.handCount++; if(this.handX >= -250 && this.handCount >= 30) { this.handX -= 5; } } drawImage(images[5], this.handX, this.rope.y + this.rope.length ROPE_MAX_DISTANCE - 75, 250, 165); }; }; var solveConstraints = function(p1, p2) { var diff_x = p1.x - p2.x, diff_y = p1.y - p2.y, dist = sqrt(diff_x * diff_x + diff_y * diff_y), diff = (ROPE_MAX_DISTANCE - dist) / dist; var scalar_1 = ((1 / p1.mass) / ((1 / p1.mass) + (1 / p2.mass))); var scalar_2 = 1 - scalar_1; if(!p1.pinned) { p1.x += diff_x * scalar_1 * diff * (1 / 30); p1.y += diff_y * scalar_1 * diff * (1 / 30); } if(!p2.pinned) { p2.x -= diff_x * scalar_2 * diff * (1 / 30); p2.y -= diff_y * scalar_2 * diff * (1 / 30); } }; var Point = function(x, y, mass, pinned) { this.x = x; this.y = y; this.prevX = x; this.prevY = y; this.xVel = 0; this.yVel = 0; this.mass = mass; this.pinned = pinned; this.connected = true; this.visible = true; }; var AirCushion = function(x, y, direction) { this.x = x; this.y = y; this.direction = direction; this.draw = function() { pushMatrix(); { translate(x, y); rotate(direction * 90 + 90); translate(-x, -y); rect(this.x - 35, this.y - 35, 70, 70); drawImage(images[6], this.x - 25, this.y - 25, 50, 50); } popMatrix(); if(mouseIsPressed) { if(dist(mouseX, mouseY, this.x, this.y) <= 30) { var rope = levels[currentLevel].rope; var lastNode = rope.points[rope.points.length - 1]; switch(this.direction) { case 0: if(abs(lastNode.y - this.y) <= 30 && lastNode.x - this.x <= 100) { lastNode.xVel = 80; } break; case 1: if(abs(lastNode.x - this.x) <= 30 && lastNode.y - this.y <= 100) { lastNode.yVel = 80; } break; case 2: if(abs(lastNode.y - this.y) <= 30 && this.x - lastNode.x <= 100) { lastNode.xVel = -80; } break; case 3: if(abs(lastNode.x - this.x) <= 30 && this.y - lastNode.y <= 100) { lastNode.yVel = -80; } break; default: break; } } } }; }; var Rope = function(x, y, length) { this.x = x; this.y = y; this.length = length; this.startX = x; this.startY = y; this.points = []; for(var i = 0; i < length; i++) { var node = new Point(x + i * 0, y + i * ROPE_MAX_DISTANCE, 3, i === 0); this.points.push(node); } var node = new Point(x, y + length * ROPE_MAX_DISTANCE, 30, i === 0); this.points.push(node); this.draw = function() { for(var index in this.points) { var node = this.points[index]; if(!node.visible) { continue; } if(index > 0) { if(mouseIsPressed) { if(dist(node.x, node.y, mouseX, mouseY) <= 10) { //Cut the damn rope node.connected = false; var lastNode = this.points[this.points.length - 1]; lastNode.connected = false; var time = 1 / 30; lastNode.xVel = (node.x - node.prevX) + lastNode.xVel * time * time;println(lastNode.xVel); lastNode.yVel = (node.y - node.prevY) + lastNode.yVel * time * time; } } var previousNode = this.points[index - 1]; var col1 = color(89, 65, 38, levels[currentLevel].ropeAlpha * 255); var col2 = color(103, 75, 33, levels[currentLevel].ropeAlpha * 255); stroke(index % 2 === 0? col1 : col2); strokeWeight(2.25); if(node.connected && previousNode.connected) { line(previousNode.x, previousNode.y, node.x, node.y); } } else { stroke(0); strokeWeight(5); point(node.x, node.y); } if(keyIsPressed && keyCode === SHIFT && index === "0") { node.x = mouseX; node.y = mouseY; } //ellipse(node.x, node.y, node.mass / 2, node.mass / 2); if(node.mass === 30) { pushMatrix(); { translate(node.x, node.y); rotate(-atan2(node.x - this.points[0].x, node.y - this.points[0].y)); translate(-node.x, -node.y); ellipse(node.x, node.y, 32, 32); drawImage(images[0], node.x - 16, node.y - 16, 32, 32, levels[currentLevel].candyAlpha); } popMatrix(); } } }; this.applyPhysics = function() { for(var index in this.points) { var node = this.points[index]; if(index > 0) { var previousNode = this.points[index - 1]; if(node.mass === 30 && !node.connected) { node.x += node.xVel; node.y += node.yVel; node.yVel += 0.25; node.xVel = 0.99; node.yVel = 0.99; } else { for(i = 0; i < 2; i++) { node.yVel = 19.81; node.xVel = 0.9; if(abs(node.xVel) <= 0.01) { node.xVel = 0; } var time = 1 / 30; var nextX = node.x + (node.x - node.prevX) + node.xVel time * time; var nextY = node.y + (node.y - node.prevY) + node.yVel * time * time; node.prevX = node.x; node.prevY = node.y; node.x = nextX; node.y = nextY; if(node.pinned) { node.x = node.prevX; node.y = node.prevY; } for(var t = 0; t < 50; t++) { if(node.connected) { solveConstraints(node, previousNode); } } } } } } }; }; levels[0] = new Level(new Rope(200, 50, 12), 200, 250, [new AirCushion(120, 150, 0)]); var ImgToBase64 = function(id, url) { var doc = this.externals.canvas[['ownerDocument']]; var canvas = doc[['createElement']]('canvas'); var ctx = canvas.getContext('2d'); var img = doc[['createElement']]('img'); img.crossOrigin = 'Anonymous'; img.onload = function() { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var b64 = canvas.toDataURL('image/png'); images[id].image.src = b64; images[id].loaded = true; canvas = null; }; img.src = url; }; var makeImage = function(id, url) { ImgToBase64(id, url); }; var precacheImage = function(id, src) { var object = {}; object.content = canvas.getContext('2d'); object.loaded = false; var owner = "ownerDocument"; var create = "createElement"; object.image = canvas[owner][create]('img'); object.image.src = makeImage(id, src); images[id] = object; }; frameCount = 0; var draw = function() { if(frameCount === 1) { canvas = this.externals.canvas; /precacheImage(0, "https://dl.dropboxusercontent.com/u/42058520/Candy%20(1).png"); precacheImage(1, "https://dl.dropboxusercontent.com/u/42058520/Cardboard.jpg"); precacheImage(2, "https://dl.dropboxusercontent.com/u/42058520/om-nom.png"); precacheImage(3, "https://dl.dropboxusercontent.com/u/42058520/Om_Nom_Trying_To_get_candy.png"); precacheImage(4, "https://dl.dropboxusercontent.com/u/42058520/Om%20Nom%20Chew.png"); precacheImage(5, "https://dl.dropboxusercontent.com/u/42058520/Hand.png"); precacheImage(6, "https://dl.dropboxusercontent.com/u/42058520/Air_Cushion.png");/ return; } var loadedCount = 0; for(var i = 0; i < images.length; i++) { if(images[i].loaded) { loadedCount++; } } if(loadedCount !== images.length) { background(255); fill(0, 0, 0); rect(20, 350, (loadedCount / images.length) * 360, 40); textAlign(CENTER, CENTER); text("Loading images, " + loadedCount + " out of " + images.length + " images loaded...", 200, 340); return; } background(255); drawImage(images[1], 0, 0, 400, 400); levels[currentLevel].drawLevel(); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgICP9e-iCww
Votes	236
Spin-Offs	6
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"4984921363841024","title":"Cut The Rope ✄----","deleted":"true","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Kazza++
Author Name	Kazzababe
Author ID	kaid_274493427945315320709769
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739456845504
Updated	10 months ago, 1739456853444
Source Deleted	unknown