Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
werto165

Tearable Cloth In browser.

Recommended Posts

Posted · Original PosterOP

http://codepen.io/dissimulate/pen/KrAwx

 

This is too awesome.

fdd7029e2f.jpg

 

/*Copyright (c) 2013 dissimulate at CodepenPermission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included inall copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS INTHE SOFTWARE.*/document.getElementById('close').onmousedown = function(e) {  e.preventDefault();  document.getElementById('info').style.display = 'none';  return false;};// settingsvar physics_accuracy  = 7,    mouse_influence   = 20,    mouse_cut         = 5,    gravity           = 1200,    cloth_height      = 70,    cloth_width       = 70,    start_y           = 0,    spacing           = 7,    tear_distance     = 60;window.requestAnimFrame =    window.requestAnimationFrame ||    window.webkitRequestAnimationFrame ||    window.mozRequestAnimationFrame ||    window.oRequestAnimationFrame ||    window.msRequestAnimationFrame ||    function (callback) {        window.setTimeout(callback, 1000 / 60);};var canvas,    ctx,    cloth,    boundsx,    boundsy,    mouse = {        down: false,        button: 1,        x: 0,        y: 0,        px: 0,        py: 0    };var Point = function (x, y) {    this.x      = x;    this.y      = y;    this.px     = x;    this.py     = y;    this.vx     = 0;    this.vy     = 0;    this.pin_x  = null;    this.pin_y  = null;        this.constraints = [];};Point.prototype.update = function (delta) {    if (mouse.down) {        var diff_x = this.x - mouse.x,            diff_y = this.y - mouse.y,            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);        if (mouse.button == 1) {            if (dist < mouse_influence) {                this.px = this.x - (mouse.x - mouse.px) * 1.8;                this.py = this.y - (mouse.y - mouse.py) * 1.8;            }        } else if (dist < mouse_cut) this.constraints = [];    }    this.add_force(0, gravity);    delta *= delta;    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);    this.px = this.x;    this.py = this.y;    this.x = nx;    this.y = ny;    this.vy = this.vx = 0};Point.prototype.draw = function () {    if (!this.constraints.length) return;    var i = this.constraints.length;    while (i--) this.constraints[i].draw();};Point.prototype.resolve_constraints = function () {    if (this.pin_x != null && this.pin_y != null) {        this.x = this.pin_x;        this.y = this.pin_y;        return;    }    var i = this.constraints.length;    while (i--) this.constraints[i].resolve();    this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);    this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);};Point.prototype.attach = function (point) {    this.constraints.push(        new Constraint(this, point)    );};Point.prototype.remove_constraint = function (constraint) {    this.constraints.splice(this.constraints.indexOf(constraint), 1);};Point.prototype.add_force = function (x, y) {    this.vx += x;    this.vy += y;};Point.prototype.pin = function (pinx, piny) {    this.pin_x = pinx;    this.pin_y = piny;};var Constraint = function (p1, p2) {    this.p1     = p1;    this.p2     = p2;    this.length = spacing;};Constraint.prototype.resolve = function () {    var diff_x  = this.p1.x - this.p2.x,        diff_y  = this.p1.y - this.p2.y,        dist    = Math.sqrt(diff_x * diff_x + diff_y * diff_y),        diff    = (this.length - dist) / dist;    if (dist > tear_distance) this.p1.remove_constraint(this);    var px = diff_x * diff * 0.5;    var py = diff_y * diff * 0.5;    this.p1.x += px;    this.p1.y += py;    this.p2.x -= px;    this.p2.y -= py;};Constraint.prototype.draw = function () {    ctx.moveTo(this.p1.x, this.p1.y);    ctx.lineTo(this.p2.x, this.p2.y);};var Cloth = function () {    this.points = [];    var start_x = canvas.width / 2 - cloth_width * spacing / 2;    for (var y = 0; y <= cloth_height; y++) {        for (var x = 0; x <= cloth_width; x++) {            var p = new Point(start_x + x * spacing, start_y + y * spacing);            x != 0 && p.attach(this.points[this.points.length - 1]);            y == 0 && p.pin(p.x, p.y);            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])            this.points.push(p);        }    }};Cloth.prototype.update = function () {    var i = physics_accuracy;    while (i--) {        var p = this.points.length;        while (p--) this.points[p].resolve_constraints();    }    i = this.points.length;    while (i--) this.points[i].update(.016);};Cloth.prototype.draw = function () {    ctx.beginPath();    var i = cloth.points.length;    while (i--) cloth.points[i].draw();    ctx.stroke();};function update() {    ctx.clearRect(0, 0, canvas.width, canvas.height);    cloth.update();    cloth.draw();    requestAnimFrame(update);}function start() {    canvas.onmousedown = function (e) {        mouse.button  = e.which;        mouse.px      = mouse.x;        mouse.py      = mouse.y;        var rect      = canvas.getBoundingClientRect();        mouse.x       = e.clientX - rect.left,        mouse.y       = e.clientY - rect.top,        mouse.down    = true;        e.preventDefault();    };    canvas.onmouseup = function (e) {        mouse.down = false;        e.preventDefault();    };    canvas.onmousemove = function (e) {        mouse.px  = mouse.x;        mouse.py  = mouse.y;        var rect  = canvas.getBoundingClientRect();        mouse.x   = e.clientX - rect.left,        mouse.y   = e.clientY - rect.top,        e.preventDefault();    };    canvas.oncontextmenu = function (e) {        e.preventDefault();    };    boundsx = canvas.width - 1;    boundsy = canvas.height - 1;    ctx.strokeStyle = '#888';      cloth = new Cloth();      update();}window.onload = function () {    canvas  = document.getElementById('c');    ctx     = canvas.getContext('2d');    canvas.width  = 560;    canvas.height = 600;    start();};

CPU: Intel 3570 GPUs: Nvidia GTX 660Ti Case: Fractal design Define R4  Storage: 1TB WD Caviar Black & 240GB Hyper X 3k SSD Sound: Custom One Pros Keyboard: Ducky Shine 4 Mouse: Logitech G500

 

Link to post
Share on other sites

That is so fucking awesome

 

EDIT - hmm cut the cloth off at the top.. cut the top line.. when its all on the floor.. keep cutting it - eventually it disappears.... somehow I have erased it haha


Desktop - Corsair 300r i7 4770k H100i MSI 780ti 16GB Vengeance Pro 2400mhz Crucial MX100 512gb Samsung Evo 250gb 2 TB WD Green, AOC Q2770PQU 1440p 27" monitor Laptop Clevo W110er - 11.6" 768p, i5 3230m, 650m GT 2gb, OCZ vertex 4 256gb,  4gb ram, Server: Fractal Define Mini, MSI Z78-G43, Intel G3220, 8GB Corsair Vengeance, 4x 3tb WD Reds in Raid 10, Phone Oppo Reno 10x 256gb , Camera Sony A7iii

Link to post
Share on other sites
Posted · Original PosterOP

I don't even know what this is lol

An awesome simulation of a piece of cloth! Just fun to play around with. Trust me I don't understand the code either but still cool regardless.


CPU: Intel 3570 GPUs: Nvidia GTX 660Ti Case: Fractal design Define R4  Storage: 1TB WD Caviar Black & 240GB Hyper X 3k SSD Sound: Custom One Pros Keyboard: Ducky Shine 4 Mouse: Logitech G500

 

Link to post
Share on other sites

That is so fucking awesome

 

EDIT - hmm cut the cloth off at the top.. cut the top line.. when its all on the floor.. keep cutting it - eventually it disappears.... somehow I have erased it haha

Same here ... 


... Life is a game and the checkpoints are your birthday , you will face challenges where you may not get rewarded afterwords but those are the challenges that help you improve yourself . Always live for tomorrow because you may never know when your game will be over ... I'm totally not going insane in anyway , shape or form ... I just have broken English and an open mind ... 

Link to post
Share on other sites

rip hours of my life


CPU: i7-6700k | Cooling: NZXT Kraken x61 (Pull) | Mobo: MSI Z170A Krait Gaming
RAM: G.Skill Ripjaws 4 16GB DDR4-3000 | GPU: Zotac 1080 Amp! Extreme
SSD: Samsung 850 Pro 256GB | HDD: WD 2TB Black | Case: NZXT H440 White | PSU: EVGA 850 G2

 

 

Link to post
Share on other sites

Same here ... 

 

the universe just collapses

 

rip hours of my life

 

On borderlands 2 whenever I came across a piece of cloth I spent hours shooting it and tearing down all the banners,,, i have no idea why but its so good


Desktop - Corsair 300r i7 4770k H100i MSI 780ti 16GB Vengeance Pro 2400mhz Crucial MX100 512gb Samsung Evo 250gb 2 TB WD Green, AOC Q2770PQU 1440p 27" monitor Laptop Clevo W110er - 11.6" 768p, i5 3230m, 650m GT 2gb, OCZ vertex 4 256gb,  4gb ram, Server: Fractal Define Mini, MSI Z78-G43, Intel G3220, 8GB Corsair Vengeance, 4x 3tb WD Reds in Raid 10, Phone Oppo Reno 10x 256gb , Camera Sony A7iii

Link to post
Share on other sites

Change physics_accuracy to 10 <3


CPU: i7-6700k | Cooling: NZXT Kraken x61 (Pull) | Mobo: MSI Z170A Krait Gaming
RAM: G.Skill Ripjaws 4 16GB DDR4-3000 | GPU: Zotac 1080 Amp! Extreme
SSD: Samsung 850 Pro 256GB | HDD: WD 2TB Black | Case: NZXT H440 White | PSU: EVGA 850 G2

 

 

Link to post
Share on other sites

the universe just collapses

Atom Slicer confirmed ... 


... Life is a game and the checkpoints are your birthday , you will face challenges where you may not get rewarded afterwords but those are the challenges that help you improve yourself . Always live for tomorrow because you may never know when your game will be over ... I'm totally not going insane in anyway , shape or form ... I just have broken English and an open mind ... 

Link to post
Share on other sites
Posted · Original PosterOP

Change physics_accuracy to 10 <3

I think I took it too far, it was using 2GB of ram...


CPU: Intel 3570 GPUs: Nvidia GTX 660Ti Case: Fractal design Define R4  Storage: 1TB WD Caviar Black & 240GB Hyper X 3k SSD Sound: Custom One Pros Keyboard: Ducky Shine 4 Mouse: Logitech G500

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×